Future of DevTools, Full Stack Tech 2016, Argentina

Future of DevTools, Full Stack Tech 2016, Argentina

Future of DevTools, , Full Stack Tech 2016, Buenos Aires, Argentina.

49f28eff1d0ddf3564a1b8b1f36a6c12?s=128

Kenneth Auchenberg

November 08, 2016
Tweet

Transcript

  1. November 2016, Buenos Aires, Argentina Kenneth Auchenberg Program Manager, Microsoft

    Future of DevTools
  2. I’m Kenneth

  3. None
  4. First, a bit of context

  5. The web platform has changed

  6. Document reader

  7. Application runtime

  8. Our devices have changed

  9. Source: http://www.prepressure.com/

  10. Source: http://www.prepressure.com/

  11. Source: http://www.highdefgeek.com/visual-portrait-evolution-mobile-phones/

  12. Desktop browsers have changed 2.82% 13.28% 59.39% 10.21% 1.91% (IE

    8.89%) SitePoint October 2016 Source: https://www.sitepoint.com/browser-trends-november-2016-rise-underdog (iPad 5.42%)
  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, http://ben-evans.com/benedictevans/2016/3/29/presentation-mobile-ate-the-world

    Benedict Evans, Andreessen Horowitz
  18. Mobile browsers have changed 40.64% 8.64% 5.83% 17.90% 2.65% Others

    1.13% Source: https://www.sitepoint.com/browser-trends-november-2016-rise-underdog 16.69% SitePoint October 2016 6.52%
  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

    Controllers
  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 https://github.com/Microsoft/vscode-chrome-debug

  50. Edge Diagnostics Adapter https://github.com/microsoft/edge-diagnostics-adapter

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

    Editor DevTool
  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

  56. VS Code iOS Debugger https://github.com/Microsoft/vscode-ios-web-debug

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

    Debugger Device ios_webkit_debug_proxy https://github.com/Microsoft/vscode-ios-web-debug
  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

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

    to reimagine our DevTools
  67. We are growing the Edge DevTools team aka.ms/EdgeDevToolsJobs

  68. Thanks! @auchenberg @EdgeDevTools