Mobile web debugging

My tools and tricks to develop for the mobile web

Transcript

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.  Console  Inspect HTML  Debug JavaScript  Network analysis  JavaScript profiling  Performance tips  Modify CSS/JavaScript on the fly  Memory inspection  Database explorer  +++ Desktop
10.  Inspect HTML  Debug JavaScript  Network analysis  JavaScript profiling  Performance tips  Modify CSS/JavaScript on the fly  Memory inspection  Database explorer iPhone/Android (built-in)  Console
11.  JavaScript on the fly  JavaScript profiling  Performance tips  Memory inspection Opera Mobile + Dragonfly   Console   Inspect HTML   Debug JavaScript   Modify CSS   Database explorer?   Network analysis
12. Yay!, but… …unfortunately not much used (for m.finn.no)
13.  Debug JavaScript  Network analysis  JavaScript profiling  Performance tips  Memory inspection iPhone/Android (Weinre)   Console   Inspect HTML   Modify CSS/JavaScript on the fly   Database explorer
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. <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> page.jsp?weinre=8001
20. <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> page.jsp?weinre=8001
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