Patrick D’Souza

10/12/12 2Patrick D'Souza

Released by Joe Hewitt in 2006, one of the creators of Firefox.

console.log – yay !!

Happy developers !!!

10/12/12 3Patrick D'Souza

Firebug has the following panels which help you inspect content

HTML CSS Javascript DOM Net

10/12/12 4Patrick D'Souza

10/12/12 5Patrick D'Souza

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 6Patrick D'Souza

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 7Patrick D'Souza

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 8Patrick D'Souza

What is Mobile Debugging?

Back to pre-firebug era

console.log

Emulators

Emulators are not very reliable

10/12/12 9Patrick D'Souza

Remote Debugging Protocol added to webkit

https://www.webkit.org/blog/1875/announcing-remote-debugging-protocol-v1-0/

Typical debugging port is 9222

10/12/12 10Patrick D'Souza

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 11Patrick D'Souza

Mobile Perf bookmarklet http://stevesouders.com/mobileperf/

mobileperfbkm.php Consists of▪ Firebug Lite▪ Page Resources▪ Docsource▪ Web Timing▪ Storager▪ SpriteMe▪ CSSSes

10/12/12 12Patrick D'Souza

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 13Patrick D'Souza

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 14Patrick D'Souza

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

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 16Patrick D'Souza

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 17Patrick D'Souza

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

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 19Patrick D'Souza