DevTools of The Future, JSCONF Asia 2016, Singapore

Slides from my "DevTools of The Future" at JSCONF Asia 2016 in Singapore

Transcript

1. November 2016, Singapore Kenneth Auchenberg Program Manager, Microsoft DevTools of the Future
2. I’m Kenneth
5. DevTools _____
6. First, a bit of context
7. The web platform has changed
8. Document reader
9. Application runtime
10. Our devices have changed
11. Source: http://www.prepressure.com/
13. Source: http://www.highdefgeek.com/visual-portrait-evolution-mobile-phones/
14. 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%)
15. Microsoft Edge. Our new browser
16. Internet adoption has changed
18. Mobile internet users
19. 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
20. 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%
21. Engines have changed WebKit Blink EdgeHTML Gecko U3 Engine
22. In a few years you won’t know you are using a browser.
23. Mobile: Web embedded inside native Chrome Custom Tabs Safari View Controllers
24. Desktop: Web as a runtime Slack VS Code
25. Progressive Web Apps Browser chrome Home screen “App”
27. Web Assembly (not official logo) C++ code Clang Emscripten (LLVM) WASM WebGL JS Engine Source Runtime
28. The front-end role is being redefined, as native and web melts together
31. So, how do DevTools _____ fit into all of this?
32. Today’s DevTools are very similar
33. Our industry have a DevTools dogma
34. 2007: IE Developer Toolbar
35. 2016: Edge DevTools
36. 2016: Chrome DevTools
37. Is this really the best we can do?
38. Modern DevTools are collections of tools
39. A fraction of our screens
40. Debugging context
41. Authoring context
42. Authoring tools !== Debugging tools Our workflow is broken
43. 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
44. Web Developer Stockholm Syndrome 44
45. 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
46. Disconnect
47. Complimentary tools
48. Connecting the two worlds
49. What if it was like this? Open editor Find file in editor Make change Open browser Set breakpoint Debug Repeat Make change
50. VS Code Chrome Debugging https://github.com/Microsoft/vscode-chrome-debug
52. Edge Diagnostics Adapter https://github.com/microsoft/edge-diagnostics-adapter
53. Edge Diagnostics Adapter Chrome Debugging Protocol Edge Diagnostics Adaptor Tool DevTool
54. We support an open ecosystem where browsers and tooling from different vendors work together
55. Node embracing Chrome Debugging Protocol
56. Simultaneous “nirvana” JavaScript debugging
57. VS Code iOS Debugger https://github.com/Microsoft/vscode-ios-web-debug
58. VS Code iOS Debugger https://github.com/Microsoft/vscode-ios-web-debug Chrome Debugging Protocol ios_webkit_debug_proxy Tool DevTool
59. Why is the web one of the few platforms that still bundles a full development environment with the runtime?
60. Normal web users are confused
61. Normal web users don’t know “inspect element”
62. Normal web users are hacking themselves
63. Balancing user-friendliness and developer convenience in Edge
64. Hiding Edge DevTools by default
65. Enable in developer settings or via shortcut
66. Why are DevTools bundled with our browsers? Desktop browser Non desktop devices Chrome-less contexts Devtool
67. DevTools of the Future Editors DevTools Device clouds Game IDE’s
68. As the web grows out of the browser, we need to reimagine our DevTools
69. aka.ms/EdgeDevToolsJobs
70. Thanks! @auchenberg @EdgeDevTools