Mobile web debugging

My tricks to develop for the mobile web

By: Gregers Rygg Twitter: @gregersrygg

Desktop

•  ”All” have developer tools •  Most are very good

 Inspect HTML

 Debug JavaScript

 Network analysis

 Console  JavaScript profiling  Performance tips  Modify CSS/JavaScript on the fly  Memory inspection  Database explorer  +++

Possible in Internet Explorer 6…

…usable in Internet Explorer 8+

 Console  Inspect HTML  Debug JavaScript  Network analysis  JavaScript profiling  Performance tips  Modify CSS/JavaScript on the fly  Memory inspection  Database explorer  +++

Desktop

 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

 JavaScript on the fly  JavaScript profiling  Performance tips  Memory inspection

Opera Mobile + Dragonfly

 Console   Inspect HTML  Debug JavaScript  Modify CSS  Database explorer?   Network analysis

Yay!, but…

…unfortunately not much used (for m.finn.no)

 Debug JavaScript  Network analysis  JavaScript profiling  Performance tips  Memory inspection

iPhone/Android (Weinre)

 Console   Inspect HTML  Modify CSS/JavaScript on the fly  Database explorer

Tip #1

•  Connect to both WiFi and ethernet

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

Tip #2

•  Webkit Inspector Remote (Weinre) •  Demo time!

Weinre install

http://phonegap.github.com/weinre/Installing.html

$ cat ~/.weinre/server.properties boundHost: -all- httpPort: 8001

Weinre install

•  Start server •  Add bookmarklet •  Increase Auto-Lock time (iOS setting) to

prevent disconnect

<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

<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

Tip #3

Charles Debugging Proxy

Tip #4

<style type="text/css”

media = "${param.debug != 'mobile' ?

'only screen and (max-device-width: 480px)' :

'screen'}”

>

Link to all tools mentioned ++ http://goo.gl/FgOg7