Patrick D’Souza
10/12/12   Patrick DSouza   2
 Released     by Joe Hewitt in 2006, one of the     creators of Firefox. console.log     – yay !! Happy     developers ...
Firebug has the following panels which help     you inspect content              HTML              CSS              Jav...
10/12/12   Patrick DSouza   5
 Chrome     based off the Webkit Layout Engine     and the V8 Javascript Engine. This     brought along Chrome Developer...
 Microsoft    adds Debugger Tools to IE Some      nice debugging features in terms of     profiling along with expected ...
 WAP   enabled phones Apple launches iOS and the iPhone in 2007. Google launches Android and Android  powered phones. ...
What is Mobile Debugging?      Back   to pre-firebug era      console.log      Emulators      Emulators      are not v...
 Remote    Debugging Protocol added to webkit https://www.webkit.org/blog/1875/announcin     g-remote-debugging-protocol...
    Injects code into webpage and provides you     an interface similar to console.log    Allows you to remotely execute...
 Mobile            Perf bookmarklet       http://stevesouders.com/mobileperf/mobileperfbkm.ph        p       Consists o...
 Uses     webkit inspector Part     of the phone gap Useful     for debugging DOM and HTML Has    a remote console log...
 Adobe     Shadow released by Adobe Labs as an     experiment. Now      packaged and renamed as Adobe Edge. Free    ver...
   Synchronizes browser state across devices.   Controlled via a Chrome extension and Weinre.   Enables you to take scr...
 What          is Fiddler?       Web Debugging Proxy.       Can be used to inspect traffic, set breakpoints,           ...
 iOS/Android      phones have the capability to     connect to a proxy on a wifi-connection. Fiddler     can be used as ...
 Fiddler    can be used to generate HAR files     which can be exported and used by any HAR     viewer. Since     all tr...
    Mobile Browsers need to get better with       debugging tools.      Still a long way to go before mobile devices are...
Upcoming SlideShare
Loading in …5
×

Remote mobile debugging

807 views

Published on

Remote Mobile Debugging by Patrick D'Souza

1 Comment
1 Like
Statistics
Notes
  • check this out, i wrote it few months ago https://github.com/nkashyap/ConsoleJS
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
807
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Remote mobile debugging

  1. 1. Patrick D’Souza
  2. 2. 10/12/12 Patrick DSouza 2
  3. 3.  Released by Joe Hewitt in 2006, one of the creators of Firefox. console.log – yay !! Happy developers !!!10/12/12 Patrick DSouza 3
  4. 4. Firebug has the following panels which help you inspect content  HTML  CSS  Javascript  DOM  Net10/12/12 Patrick DSouza 4
  5. 5. 10/12/12 Patrick DSouza 5
  6. 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 DSouza 6
  7. 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 DSouza 7
  8. 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, KindleAnd the fragmentation continues ...10/12/12 Patrick DSouza 8
  9. 9. What is Mobile Debugging?  Back to pre-firebug era  console.log  Emulators  Emulators are not very reliable10/12/12 Patrick DSouza 9
  10. 10.  Remote Debugging Protocol added to webkit https://www.webkit.org/blog/1875/announcin g-remote-debugging-protocol-v1-0/ Typical debugging port is 922210/12/12 Patrick DSouza 10
  11. 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 DSouza 11
  12. 12.  Mobile Perf bookmarklet  http://stevesouders.com/mobileperf/mobileperfbkm.ph p  Consists of ▪ Firebug Lite ▪ Page Resources ▪ Docsource ▪ Web Timing ▪ Storager ▪ SpriteMe ▪ CSSSes10/12/12 Patrick DSouza 12
  13. 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 DSouza 13
  14. 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 devices10/12/12 Patrick DSouza 14
  15. 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 DSouza 15
  16. 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 DSouza 16
  17. 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 DSouza 17
  18. 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 DSouza 18
  19. 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 DSouza 19

×