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.

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