AtTheFrontend 16: DevTools for the Progressive Web

AtTheFrontend 16: DevTools for the Progressive Web

DevTools for the Progressive Web, AtTheFrontend, May 2016, Copenhagen

49f28eff1d0ddf3564a1b8b1f36a6c12?s=128

Kenneth Auchenberg

May 25, 2016
Tweet

Transcript

  1. 3.
  2. 4.
  3. 6.
  4. 14.
  5. 21.

    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
  6. 26.

    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%
  7. 36.
  8. 37.
  9. 51.

    Still a typical debugging workflow Open editor Navigate to page

    Open browser Find file in editor Make change Refresh browser Open DevTool Look in console 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
  10. 53.

    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 decide which DevTools to use? 5. Why can't I leverage the browser logic in my new fancy tool? 6. Why can’t I just connect my editor to my mobile device? 7. Why are DevTools still bundled with our browsers? A few thoughts
  11. 57.

    What if it was like this? Open editor Find file

    in editor Make change Open browser Look in console Set breakpoint Debug Make change Tab back to browser Repeat
  12. 58.
  13. 62.
  14. 64.

    Why is the web one of the few platforms that

    still bundles a full development environment with the runtime?
  15. 67.
  16. 69.
  17. 71.
  18. 72.

    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 decide which DevTools to use? 5. Why can't I leverage the browser logic in my new fancy tool? 6. Why can’t I just connect my editor to my mobile device? 7. Why are DevTools still bundled with our browsers? A few thoughts again
  19. 74.