Upload
patrick-dsouza
View
545
Download
3
Embed Size (px)
DESCRIPTION
Remote Mobile Debugging by Patrick D'Souza
Citation preview
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