This document discusses the history and current state of debugging tools for web development on mobile devices. It covers early debugging techniques using console.log as mobile browsers did not initially support tools. It then outlines debugging options across different browsers and platforms, including remote debugging protocols, mobile bookmarklets, browser developer tools, and proxy-based debugging using Fiddler. The document expresses a hope that mobile browsers will continue advancing their built-in debugging support to improve the developer experience.

1. Patrick D’Souza

2. 10/12/12 Patrick D'Souza 2

3.  Released by Joe Hewitt in 2006, one of the
creators of Firefox.
 console.log – yay !!
 Happy developers !!!
10/12/12 Patrick D'Souza 3

4. Firebug has the following panels which help
you inspect content
 HTML
 CSS
 Javascript
 DOM
 Net
10/12/12 Patrick D'Souza 4

5. 10/12/12 Patrick D'Souza 5

6.  Chrome based off the Webkit Layout Engine
and the V8 Javascript Engine.
 This brought along Chrome Developer Tools.
 Similar to Firebug, but has kept evolving with
changes in Chrome.
10/12/12 Patrick D'Souza 6

7.  Microsoft adds Debugger Tools to IE
 Some nice debugging features in terms of
profiling along with expected features to
debug the DOM and javascript.
10/12/12 Patrick D'Souza 7

8.  WAP enabled phones
 Apple launches iOS and the iPhone in 2007.
 Google launches Android and Android
powered phones.
 iPad launched in 2010.
 Android tablets – Nook, Kindle
And the fragmentation continues ...
10/12/12 Patrick D'Souza 8

9. What is Mobile Debugging?
 Back to pre-firebug era
 console.log
 Emulators
 Emulators are not very reliable
10/12/12 Patrick D'Souza 9

10.  Remote Debugging Protocol added to webkit
 https://www.webkit.org/blog/1875/announcin
g-remote-debugging-protocol-v1-0/
 Typical debugging port is 9222
10/12/12 Patrick D'Souza 10

11.  Injects code into webpage and provides you
an interface similar to console.log
 Allows you to remotely execute code and
capture console entries.
10/12/12 Patrick D'Souza 11

12.  Mobile Perf bookmarklet
 http://stevesouders.com/mobileperf/mobileperfbkm.ph
p
 Consists of
▪ Firebug Lite
▪ Page Resources
▪ Docsource
▪ Web Timing
▪ Storager
▪ SpriteMe
▪ CSSSes
10/12/12 Patrick D'Souza 12

13.  Uses webkit inspector
 Part of the phone gap
 Useful for debugging DOM and HTML
 Has a remote console log for executing
javascript.
10/12/12 Patrick D'Souza 13

14.  Adobe Shadow released by Adobe Labs as an
experiment.
 Now packaged and renamed as Adobe Edge.
 Free version allows you to debug only one
device
 Paid version provides access to unlimted
devices
10/12/12 Patrick D'Souza 14

15.  Synchronizes browser state across devices.
 Controlled via a Chrome extension and Weinre.
 Enables you to take screenshots.
 Ideal toolkit for any designer/developer
 Helps to inspect local storage, indexdb and cookies.
10/12/12 Patrick D'Souza 15

16.  What is Fiddler?
 Web Debugging Proxy.
 Can be used to inspect traffic, set breakpoints,
ingest scripts, replace content, export into different
formats.
10/12/12 Patrick D'Souza 16

17.  iOS/Android phones have the capability to
connect to a proxy on a wifi-connection.
 Fiddler can be used as the http proxy to
inspect and manipulate inbound and outbound
traffic from a mobile device.
10/12/12 Patrick D'Souza 17

18.  Fiddler can be used to generate HAR files
which can be exported and used by any HAR
viewer.
 Since all traffic is routed via Fiddler,
beta/staging servers can be tested easily on a
mobile device.
10/12/12 Patrick D'Souza 18

19.  Mobile Browsers need to get better with
debugging tools.
 Still a long way to go before mobile devices are
developer friendly.
 Until then ……. let’s keep dreaming that mobile
development becomes more developer friendly !!
10/12/12 Patrick D'Souza 19