JSCONF China 2016: DevTools for the Progressive Web

JSCONF China 2016; DevTools for the Progressive Web

Transcript

1. September 2016 Kenneth Auchenberg Program Manager, Microsoft DevTools for the Progressive Web
2. I’m Kenneth
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.apple.com/uk/shop/browse/reuse_and_recycle
11. Desktop browsers have changed 2.88% 13.96% 58.44% 9.61% 1.76% (IE 9.82%) Source: https://www.sitepoint.com/browser-trends-september-2016-browser-wars/ SitePoint September 2016
12. Microsoft Edge. Our new browser
13. Internet adoption has changed
14. Mobile internet users
15. 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
16. 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%
17. Engines have changed WebKit Blink EdgeHTML Gecko U3 Engine
18. In a few years you won’t know you are using a browser.
19. Mobile: Web embedded inside native Chrome Custom Tabs Safari View Controllers
20. Desktop: Web as a runtime Slack VS Code
21. Progressive Web Apps Browser chrome Home screen “App”
22. Web Assembly (not official logo) C++ code Clang Emscripten (LLVM) WASM WebGL JS Engine
23. The front-end role is being redefined, as native and web melts together
26. So, how do DevTools fit into all of this?
27. Today’s DevTools are very similar
28. Our industry have a DevTools dogma
29. 2007: IE Developer Toolbar
30. 2016: Edge DevTools
31. 2016: Chrome DevTools
32. Is this really the best we can do?
33. Modern DevTools are collections of tools
34. A fraction of our screens
35. Debugging context
36. Authoring context
37. Authoring tools !== Debugging tools Our workflow is broken
38. 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
39. Web Developer Stockholm Syndrome 39
40. 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 just connect my editor to my mobile device? 5. Why are DevTools still bundled with our browsers? A few thoughts
41. Disconnect
42. Complimentary tools
43. Connecting the two worlds
44. What if it was like this? Open editor Find file in editor Make change Open browser Set breakpoint Debug Repeat Make change
46. VS Code Chrome Debugging https://github.com/Microsoft/vscode-chrome-debug
47. Edge Diagnostics Adapter https://github.com/microsoft/edge-diagnostics-adapter
48. Edge Diagnostics Adapter Chrome Debugging Protocol Edge Diagnostics Adaptor Tool Editor DevTool
50. We support an open ecosystem where browsers and tooling from different vendors work together
51. Node.js embracing Chrome Debugging Protocol
52. Node embracing Chrome Debugging Protocol Chrome Debugging Protocol VS Code Chrome Debugger Client Server New tools DevTool
53. VS Code iOS Debugger https://github.com/Microsoft/vscode-ios-web-debug
54. VS Code iOS Debugger Chrome Debugging Protocol VS Code Chrome Debugger Device ios_webkit_debug_proxy https://github.com/Microsoft/vscode-ios-web-debug
55. Why is the web one of the few platforms that still bundles a full development environment with the runtime?
56. Normal web users are confused
57. Normal web users are hacking themselves
58. Hiding Edge DevTools by default
59. Enable in developer settings
60. Enabled via F12 or menubar
62. Why are DevTools bundled with our browsers? Desktop browser New devices Chrome-less contexts Devtool
63. 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 just connect my editor to my mobile device? 5. Why are DevTools still bundled with our browsers? A few thoughts again
64. As the web grows out of the browser, we need to reimagine our DevTools
65. Thanks! @auchenberg @EdgeDevTools