JSFoo 2015

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.

We realize that mobile is future, but the point is it effects the future of Javascript and JS Developers also.

With new platform comes more challenging problems. Especially for developers, its a challenge how to debug their Javascript code on mobile browsers, and be more productive.

The talk aims to answer some of the questions and introduce tools to debug Javascript on mobile platform.

1. Introduce Javascipt debugging tools for mobile browsers. Live Demo of various tools like Weinre, Vorlon and JSConsole. Discuss their advantages and limitations.
2. Compare remote debugging protocol with JS Injection techniques.
3. Demonstrate tools like Valence + WebIDE and Chrome DevTools built over remote debugging protocol.
4. Discuss how Chrome DevTools can be extracted out of the Blink source and deployed locally for JS Debugging.
5. JS debugging solution for mobile browsers located remotely.

Outline

If you have been developing applications for Mobile platform, you would know what a nightmare it can be sometimes to debug Javascript mainly because of platform dependency of debugging tools. There aren’t any direct debugging tools within mobile browsers as they exist for Desktop browsers. Most of the times the tools are built over remote debugging protocol which communicates with the browser within mobile.

The questions which arise are ?

1. Does each mobile browser has Debugging Tools like desktop browsers ?
2. Is there anything that works for all mobile browsers ?
3. Don’t have direct access to Mobile Lab , How can I debug remotely ?
4. I love Chrome DevTools ! Can I use them for mobile Chrome/Safari/Firefox ?
5. 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.

1. (15 min) Introduction to JS debugging tools, using Javascript injection.
   Apache Weinre, Vorlon JS, JSConsole, Adobe Edge Inspect etc.

2. (10 min) Remote Debugging Protocol Introduction. chrome://inspect demo and DevTools information.

3. (15 min) Taking DevTools out of the Blink source and deploying locally.

4. (10 min) Using Mozilla Valence + WebIDE for cross platform debugging.

5. (10 min) Doubts, Suggestions and Discussions.

Requirements

1. Laptop with Unix/Linux operating Systems and *Chrome/Chromium installed.
2. Latest *Chrome/Chromium binary.
3. Android Device with latest chrome installed.
4. (Optional) IOS device with latest Safari installed.
5. 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.

Speaker bio

Pankaj Malhotra

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.

IRC : bitgeeky
GitHub : https://github.com/bitgeeky
WebSite : http://pankajmalhotra.com/
Twitter : https://twitter.com/bitgeekypankaj

Software Engineering Intern 2015 @ BrowserStack
Spring Scholar 2015 @ HashiCorp
Google Summer of Code Intern 2014 @ Mozilla Corporation

Links

• 1. https://docs.webplatform.org/wiki/concepts/mobile_web/mobile_debugging
• 2. http://blogs.msdn.com/b/eternalcoding/archive/2015/04/30/why-we-made-vorlon-js-and-how-to-use-it-to-debug-your-javascript-remotely.aspx
• 3. http://people.apache.org/~pmuellr/weinre-docs/latest/
• 4. https://developer.chrome.com/devtools/docs/remote-debugging
• 5. https://developer.mozilla.org/en-US/docs/Tools/Valence
• 6. https://developer.mozilla.org/en/docs/Tools/WebIDE
• 7. https://kenneth.io/blog/2014/12/28/taking-chrome-devtools-outside-the-browser/
• 8. https://medium.com/@aslushnikov/hacking-chrome-devtools-8c8896f5cef3

Slides

https://speakerdeck.com/bitgeeky/debugging-javascript-on-mobile-browsers