Your SlideShare is downloading. ×
0
Mobile web-debug
Mobile web-debug
Mobile web-debug
Mobile web-debug
Mobile web-debug
Mobile web-debug
Mobile web-debug
Mobile web-debug
Mobile web-debug
Mobile web-debug
Mobile web-debug
Mobile web-debug
Mobile web-debug
Mobile web-debug
Mobile web-debug
Mobile web-debug
Mobile web-debug
Mobile web-debug
Mobile web-debug
Mobile web-debug
Mobile web-debug
Mobile web-debug
Mobile web-debug
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Mobile web-debug

875

Published on

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

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
875
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Mobile web debuggingMy 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 installhttp://phonegap.github.com/weinre/ Installing.html$ cat ~/.weinre/server.propertiesboundHost: -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 #3Charles 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

×