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

Web Rebels 16: DevTools for the Progressive Web

Web Rebels 16: DevTools for the Progressive Web

DevTools for the Progressive Web, Web Rebels 16, June 3rd 2016, in Oslo Norway.

Kenneth Auchenberg

June 03, 2016
Tweet

More Decks by Kenneth Auchenberg

Other Decks in Technology

Transcript

  1. Desktop browsers have changed 2.10% 14.24% 56.89% 4.20% 1.83% (IE

    12.13%) Source: https://www.sitepoint.com/browser-trends-may-2016-firefox-finally-overtakes-ie/ SitePoint May 2016
  2. Mobile browsers have changed 34.17% 10.90% 8.30% 19.75% 2.09% Others

    1.60% Source: https://www.sitepoint.com/browser-trends-may-2016-firefox-finally-overtakes-ie/ 17.48% SitePoint May 2016 5.71%
  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 more integrated with my browser(s)? 4. Why can’t I just connect my editor to my mobile device? 5. 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. Why is the web one of the few platforms that

    still bundles a full development environment with the runtime?
  7. VS Code Chrome Debugger “The mighty cloud” Webkit Remote Debugging

    Protocol Protocol Adapter Chrome Debugging Protocol Local web server Source Map Bundled JavaScript Original source
  8. 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 more integrated with my browser(s)? 4. Why can’t I just connect my editor to my mobile device? 5. Why are DevTools still bundled with our browsers? A few thoughts again
  9. As the web grows out of the browser, we need

    to reimagine what our DevTools could be