Pro Yearly is on sale from $80 to $50! »

JSCONF Columbia 2016: DevTools for the Progressive Web

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


  1. October 2016 Kenneth Auchenberg Program Manager, Microsoft DevTools for the

    Progressive Web
  2. I’m Kenneth

  3. None
  4. DevTools

  5. First, a bit of context

  6. The web platform has changed

  7. Document reader

  8. Application runtime

  9. Our devices have changed

  10. Source:

  11. Source:

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

    9.82%) SitePoint September 2016 Source: (iPad 5.38%)
  13. Microsoft Edge. Our new browser

  14. Internet adoption has changed

  15. None
  16. Mobile internet users

  17. Saying “mobile internet” = “color tv” Source: Benedict Evans,

    Benedict Evans, Andreessen Horowitz
  18. Mobile browsers have changed 39.02% 10.91% 6.95% 14.28% 1.88% Others

    1.38% Source: 18.77% SitePoint September 2016 6.95%
  19. Engines have changed WebKit Blink EdgeHTML Gecko U3 Engine

  20. In a few years you won’t know you are using

    a browser.
  21. Mobile: Web embedded inside native Chrome Custom Tabs Safari View

  22. Desktop: Web as a runtime Slack VS Code

  23. The Progressive Web

  24. Progressive Web Apps Browser chrome Home screen “App”

  25. None
  26. Web Assembly (not official logo) C++ code Clang Emscripten (LLVM)

    WASM WebGL JS Engine Source Runtime
  27. The front-end role is being redefined, as native and web

    melts together
  28. None
  29. None
  30. So, how do DevTools _____ fit into all of this?

  31. Today’s DevTools are very similar

  32. Our industry have a DevTools dogma

  33. 2007: IE Developer Toolbar

  34. 2016: Edge DevTools

  35. 2016: Chrome DevTools

  36. Is this really the best we can do?

  37. Modern DevTools are collections of tools

  38. A fraction of our screens

  39. Debugging context

  40. Authoring context

  41. Authoring tools !== Debugging tools Our workflow is broken

  42. 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
  43. Web Developer Stockholm Syndrome 43

  44. 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
  45. Disconnect

  46. Complimentary tools

  47. Connecting the two worlds

  48. What if it was like this? Open editor Find file

    in editor Make change Open browser Set breakpoint Debug Repeat Make change
  49. VS Code Chrome Debugging

  50. Edge Diagnostics Adapter

  51. Edge Diagnostics Adapter Chrome Debugging Protocol Edge Diagnostics Adaptor Tool

    Editor DevTool
  52. None
  53. We support an open ecosystem where browsers and tooling from

    different vendors work together
  54. Node embracing Chrome Debugging Protocol

  55. Node embracing Chrome Debugging Protocol Chrome Debugging Protocol VS Code

    Chrome Debugger Client Server New tools DevTool
  56. VS Code iOS Debugger

  57. VS Code iOS Debugger Chrome Debugging Protocol VS Code Chrome

    Debugger Device ios_webkit_debug_proxy
  58. Why is the web one of the few platforms that

    still bundles a full development environment with the runtime?
  59. Normal web users are confused

  60. Normal web users are hacking themselves

  61. Inspect Element?

  62. Hiding Edge DevTools by default

  63. Enable in developer settings or via shortcut

  64. Why are DevTools bundled with our browsers? Desktop browser New

    devices Chrome-less contexts Devtool
  65. DevTools for the Progressive Web Editors DevTools Device clouds Game

  66. As the web grows out of the browser, we need

    to reimagine our DevTools
  67. Thanks! @auchenberg @EdgeDevTools