JSCONF Columbia 2016: DevTools for the Progressive Web

Slides from my JSCONF Columbia 2016: DevTools for the Progressive Web talk.

Transcript

1. October 2016 Kenneth Auchenberg Program Manager, Microsoft DevTools for the Progressive Web
2. I’m Kenneth
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: http://www.prepressure.com/
11. Source: http://www.highdefgeek.com/visual-portrait-evolution-mobile-phones/
12. Desktop browsers have changed 2.88% 13.96% 58.44% 9.61% 1.76% (IE 9.82%) SitePoint September 2016 Source: https://www.sitepoint.com/browser-trends-september-2016-browser-wars/ (iPad 5.38%)
13. Microsoft Edge. Our new browser
14. Internet adoption has changed
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 39.02% 10.91% 6.95% 14.28% 1.88% Others 1.38% Source: https://www.sitepoint.com/browser-trends-september-2016-browser-wars/ 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 Controllers
22. Desktop: Web as a runtime Slack VS Code
23. The Progressive Web
24. Progressive Web Apps Browser chrome Home screen “App”
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
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. 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 Chrome Debugging Protocol VS Code Chrome Debugger Client Server New tools DevTool
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. Thanks! @auchenberg @EdgeDevTools