Slides from a lightening talk I did at the FINN tech day, about the tools I use to debug the mobile web.

1. Mobile web debugging
My tricks to develop for the
mobile web
By: Gregers Rygg
Twitter: @gregersrygg

2. Desktop
• ”All” have developer tools
• Most are very good

3.  Inspect HTML

4.  Debug JavaScript

5.  Network analysis

6.  Console
 JavaScript profiling
 Performance tips
 Modify CSS/JavaScript on the fly
 Memory inspection
 Database explorer
 +++

7. Possible in Internet Explorer 6…

8. …usable in Internet Explorer 8+

9. Desktop
 Console
 Inspect HTML
 Debug JavaScript
 Network analysis
 JavaScript profiling
 Performance tips
 Modify CSS/JavaScript on the fly
 Memory inspection
 Database explorer
 +++

10. iPhone/Android (built-in)
 Console
 Inspect HTML
 Debug JavaScript
 Network analysis
 JavaScript profiling
 Performance tips
 Modify CSS/JavaScript on the fly
 Memory inspection
 Database explorer

11. Opera Mobile + Dragonfly
 Console
 Inspect HTML
 Debug JavaScript
 Modify CSS
 Database explorer?
 Network analysis
 JavaScript on the fly
 JavaScript profiling
 Performance tips
 Memory inspection

12. Yay!, but…
…unfortunately not much used (for m.finn.no)

13. iPhone/Android (Weinre)
 Console
 Inspect HTML
 Modify CSS/JavaScript on the fly
 Database explorer
 Debug JavaScript
 Network analysis
 JavaScript profiling
 Performance tips
 Memory inspection

14. Tip #1
• Connect to both WiFi and ethernet

15. HP ”Elite”Book
• WiFi turns off when ethernet is connected
• BIOS Settings (reboot + ESC, then F10)
• System Configuration
– Built-In Device Option
• Disable LAN/WLAN switching

16. Tip #2
• Webkit Inspector Remote (Weinre)
• Demo time!

17. Weinre install
http://phonegap.github.com/weinre/
Installing.html
$ cat ~/.weinre/server.properties
boundHost: -all-
httpPort: 8001

18. Weinre install
• Start server
• Add bookmarklet
• Increase Auto-Lock time (iOS setting) to
prevent disconnect

19. page.jsp?weinre=8001
<c:if test="${!empty param.weinre}">
<script src="http://${pageContext.request.serverName}:<c:out
value="${param.weinre}"/>/target/target-script-min.js#anonymous">
</script>
</c:if>

20. page.jsp?weinre=8001
<c:if test="${!empty param.weinre}">
<script src="http://${pageContext.request.serverName}:<c:out
value="${param.weinre}"/>/target/target-script-min.js#anonymous">
</script>
<script>
window.console &&
(window.onerror = function(e) { console.error(e); });
</script>
</c:if>

21. Tip #3
Charles Debugging Proxy

22. Tip #4
<style type="text/css”
media =
"${param.debug != 'mobile' ?
'only screen and (max-device-width:
480px)' :
'screen'}”
>

23. Link to all tools mentioned ++
http://goo.gl/FgOg7