arrow_back Needle in a haystack - Advanced DevTools usage
Submitted by Pankaj Malhotra (@bitgeekypankaj) on Wednesday, 29 July 2015
Section: Full talk Technical level: Advanced
There has been a tremendous and rapid increase in the percentage of users accessing internet over smartphones in a past couple of years and some studies say that by 2016 around 2 billion users will be accessing the web on their mobile phones.
- Introduce Javascipt debugging tools for mobile browsers. Live Demo of various tools like Weinre, Vorlon and JSConsole. Discuss their advantages and limitations.
- Compare remote debugging protocol with JS Injection techniques.
- Demonstrate tools like Valence + WebIDE and Chrome DevTools built over remote debugging protocol.
- Discuss how Chrome DevTools can be extracted out of the Blink source and deployed locally for JS Debugging.
- JS debugging solution for mobile browsers located remotely.
The questions which arise are ?
- Does each mobile browser has Debugging Tools like desktop browsers ?
- Is there anything that works for all mobile browsers ?
- Don’t have direct access to Mobile Lab , How can I debug remotely ?
- 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 ?
Mobile web debugging has always been a challenging problem. Few years back we saw tools like Apache Weinre and JSConsole coming up and providing a pretty good solution but most of them actually require injecting around 3000 - 4000 lines of javascipt code which essentially talks to a backend server and the front end application. Such solutions are old and not used anymore. If you are using it, You should NOT !
Remote Debugging Protocol enables user to remotely debug browsers and there are a lot of tools being built over this protocol. Unfortunately each browser has its own protocol and there aren’t any cross browser debugging solutions. This talks aims to introduce such efforts and hacks which enable Chrome DevTools to be used for debugging applications across different browsers.
This is how the talk is going to be split over an hour.
Apache Weinre, Vorlon JS, JSConsole, Adobe Edge Inspect etc.
(10 min) Remote Debugging Protocol Introduction. chrome://inspect demo and DevTools information.
(15 min) Taking DevTools out of the Blink source and deploying locally.
(10 min) Using Mozilla Valence + WebIDE for cross platform debugging.
(10 min) Doubts, Suggestions and Discussions.
- Laptop with Unix/Linux operating Systems and *Chrome/Chromium installed.
- Latest *Chrome/Chromium binary.
- Android Device with latest chrome installed.
- (Optional) IOS device with latest Safari installed.
Firefox Nightly installed or Valence Addon + WebIDE on latest Firefox.
You can have any of Chrome or Chromium since DevTools are exaclty the same for both.
Has a strong interest in Web Platform, researched a lot about developer tools and JS Debugging. Speaker at various Open Source Developers Group meetups. Likes to share knowledge and give good talks.
Software Engineering Intern 2015 @ BrowserStack
Spring Scholar 2015 @ HashiCorp
Google Summer of Code Intern 2014 @ Mozilla Corporation