Mobile web-debug
0 likes653 views
The document presents various tips for mobile web debugging, highlighting tools and techniques for effective development across platforms like iPhone, Android, and desktop browsers. Key strategies include using developer tools such as console, HTML inspection, and web profiling, along with specific installation instructions for tools like Weinre and Charles Debugging Proxy. It also provides configuration tips to optimize connectivity for debugging sessions.
Mobile web-debug
- 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
- 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