Debugging Javascript on Mobile Browsers

Techniques, Tools, Practices, Platforms and Remote Debugging Protocol

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. JS Injection Cross Browser Testing
 Demo
 Limitations Copyright © 2015 Pankaj Malhotra
9. Remote Debugging Protocol Firefox Standards 
 
 Chrome/Chromium Protocol 
 
 Tools
 
 Chrome DevTools
 Valence + Web IDE
 IOS Webkit Debug Proxy Copyright © 2015 Pankaj Malhotra
10. Chrome DevTools Debugging using chrome://inspect ADB Forwarding
 Legacy Protocol 
 WebSocket Connection Demo Copyright © 2015 Pankaj Malhotra
11. Taking out DevTool out of the Blink Repository 
 Deploying DevTools Locally Chrome DevTools Deployed Locally Demo Copyright © 2015 Pankaj Malhotra
12. Cross Platform Debugging Mozilla Valence + WebIDE
 Demo
 Lots of Native Code
 Work In Progress Copyright © 2015 Pankaj Malhotra
13. Google’s IOS WebKit Debug Proxy Debug Mobile Safari using Chrome DevTools
 
 Maintained by Google
 
 Limitations Copyright © 2015 Pankaj Malhotra
14. Thanks ! Questions ?