Mobile web-debug

1,098 views

Published on

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

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,098
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Mobile web-debug

  1. 1. Mobile web debuggingMy tricks to develop for the mobile web By: Gregers Rygg Twitter: @gregersrygg
  2. 2. Desktop•  ”All” have developer tools•  Most are very good
  3. 3.  Inspect HTML
  4. 4.  Debug JavaScript
  5. 5.  Network analysis
  6. 6.  Console JavaScript profiling Performance tips Modify CSS/JavaScript on the fly Memory inspection Database explorer +++
  7. 7. Possible in Internet Explorer 6…
  8. 8. …usable in Internet Explorer 8+
  9. 9. Desktop Console Inspect HTML Debug JavaScript Network analysis JavaScript profiling Performance tips Modify CSS/JavaScript on the fly Memory inspection Database explorer +++
  10. 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. 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. 12. Yay!, but……unfortunately not much used (for m.finn.no)
  13. 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. 14. Tip #1•  Connect to both WiFi and ethernet
  15. 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. 16. Tip #2•  Webkit Inspector Remote (Weinre)•  Demo time!
  17. 17. Weinre installhttp://phonegap.github.com/weinre/ Installing.html$ cat ~/.weinre/server.propertiesboundHost: -all-httpPort: 8001
  18. 18. Weinre install•  Start server•  Add bookmarklet•  Increase Auto-Lock time (iOS setting) to prevent disconnect
  19. 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. 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. 21. Tip #3Charles Debugging Proxy
  22. 22. Tip #4<style type="text/css” media = "${param.debug != mobile ? only screen and (max-device-width: 480px) : screen}”>
  23. 23. Link to all tools mentioned ++ http://goo.gl/FgOg7

×