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

JSCONF Columbia 2016: DevTools for the Progress...

JSCONF Columbia 2016: DevTools for the Progressive Web

Slides from my JSCONF Columbia 2016: DevTools for the Progressive Web talk.

Kenneth Auchenberg

October 08, 2016
Tweet

More Decks by Kenneth Auchenberg

Other Decks in Programming

Transcript

  1. Desktop browsers have changed 2.88% 13.96% 58.44% 9.61% 1.76% (IE

    9.82%) SitePoint September 2016 Source: https://www.sitepoint.com/browser-trends-september-2016-browser-wars/ (iPad 5.38%)
  2. Mobile browsers have changed 39.02% 10.91% 6.95% 14.28% 1.88% Others

    1.38% Source: https://www.sitepoint.com/browser-trends-september-2016-browser-wars/ 18.77% SitePoint September 2016 6.95%
  3. Still a typical debugging workflow Open editor Navigate to page

    Open browser Find file in editor Make change Refresh browser Open DevTool Go to scripts-tab Find same file again Go to the edited line Set breakpoint Debug Switch back to editor Make change Tab back to browser Repeat
  4. 1. Why do I need to learn a new DevTool

    for each browser? 2. Why do I have to use different tools for authoring and debugging? 3. Why isn't my editor integrated with my browser(s)? 4. Why are DevTools still bundled with our browsers? A few thoughts
  5. What if it was like this? Open editor Find file

    in editor Make change Open browser Set breakpoint Debug Repeat Make change
  6. Node embracing Chrome Debugging Protocol Chrome Debugging Protocol VS Code

    Chrome Debugger Client Server New tools DevTool
  7. VS Code iOS Debugger Chrome Debugging Protocol VS Code Chrome

    Debugger Device ios_webkit_debug_proxy https://github.com/Microsoft/vscode-ios-web-debug
  8. Why is the web one of the few platforms that

    still bundles a full development environment with the runtime?