Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Debugging Javascript on Mobile Browsers

Debugging Javascript on Mobile Browsers

Techniques, Tools, Practices, Platforms and Remote Debugging Protocol

Pankaj Malhotra

July 29, 2015
Tweet

More Decks by Pankaj Malhotra

Other Decks in Technology

Transcript

  1. Debugging Javascript on Mobile Browsers Techniques, Tools, Practices, Platforms and

    Remote Debugging Protocol Copyright © 2015 Pankaj Malhotra
  2. About Speaker Pankaj Malhotra IRC & GitHub : @bitgeeky Twitter

    : @bitgeekypankaj Software Engineering Intern 2015 @BrowserStack Spring Scholar 2015 @HashiCorp Google Summer of Code Intern 2014 @Mozilla Corporation www.pankajmalhotra.com Copyright © 2015 Pankaj Malhotra
  3. Users rapidly shifting to Smartphones More Than 2 Billion By

    2016 Worldwide Active Smartphone Users Forecast Copyright © 2015 Pankaj Malhotra
  4. Mobile is the Future ! How does it effect the

    future of Javascript ? Lets See ! Copyright © 2015 Pankaj Malhotra
  5. Developing for Mobile Can be a complete nightmare ! Not

    just because of different resolutions.
 
 Its mostly because of platform dependency.
 
 AOSP/Chrome/Firefox/Safari/ Opera Copyright © 2015 Pankaj Malhotra
  6. How to Debug Javascript ? Does each mobile browser has

    Debugging Tools like desktop browsers ? What solutions are there ? Is there anything that works for all mobile browsers ? I love Chrome DevTools ! Can I use them for mobile Chrome/Safari/Firefox ? I love Firefox JS Debugger ! Can I use it for mobile Chrome/Safari/Firefox ? Don’t have direct access to Mobile Lab , How can I debug remotely ? What is remote debugging protocol ? That’s what the rest of talk is gonna be about ! Copyright © 2015 Pankaj Malhotra
  7. JS Debugging Javascript Injection 
 Apache Weinre (Classical Solution) JSConsole

    Microsoft Vorlon JS Copyright © 2015 Pankaj Malhotra
  8. Remote Debugging Protocol Firefox Standards 
 
 Chrome/Chromium Protocol 


    
 Tools
 
 Chrome DevTools
 Valence + Web IDE
 IOS Webkit Debug Proxy Copyright © 2015 Pankaj Malhotra
  9. Chrome DevTools Debugging using chrome://inspect ADB Forwarding
 Legacy Protocol 


    WebSocket Connection Demo Copyright © 2015 Pankaj Malhotra
  10. Taking out DevTool out of the Blink Repository 
 Deploying

    DevTools Locally Chrome DevTools Deployed Locally Demo Copyright © 2015 Pankaj Malhotra
  11. Cross Platform Debugging Mozilla Valence + WebIDE
 Demo
 Lots of

    Native Code
 Work In Progress Copyright © 2015 Pankaj Malhotra
  12. Google’s IOS WebKit Debug Proxy Debug Mobile Safari using Chrome

    DevTools
 
 Maintained by Google
 
 Limitations Copyright © 2015 Pankaj Malhotra