Web Rebels 16: DevTools for the Progressive Web

DevTools for the Progressive Web, Web Rebels 16, June 3rd 2016, in Oslo Norway.

1. Web Rebels, June 2016 Kenneth Auchenberg Program Manager, Microsoft DevTools for the Progressive Web
2. Hei, Oslo!
7. DevTools
8. First, a bit of context
9. The web platform has changed
10. Document reader
11. Application runtime
12. Our devices have changed
13. Source: http://www.prepressure.com/
14. Source: http://www.apple.com/uk/shop/browse/reuse_and_recycle
15. Desktop browsers have changed 2.10% 14.24% 56.89% 4.20% 1.83% (IE 12.13%) Source: https://www.sitepoint.com/browser-trends-may-2016-firefox-finally-overtakes-ie/ SitePoint May 2016
16. Microsoft Edge. Our new browser
17. We are investing into the web in an open and collaborative way
18. Planning in the open
19. Open source
20. Internet adoption has changed
22. Mobile internet users
23. 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
24. 237 million new internet in 2015 Source: International Telecommunication Union, ICT Key Data 2015
25. 19.75 million new internet users per month Source: International Telecommunication Union, ICT Key Data 2015
26. 108 million new Indian internet users in 2015 Source: http://www.internetlivestats.com/internet-users-by-country/
27. New platforms rise
28. 28 Source: http://qz.com/314285/30-smartphones-are-here-and-theyre-getting-better-every-day/ Top handsets in India
29. Mobile browsers have changed 34.17% 10.90% 8.30% 19.75% 2.09% Others 1.60% Source: https://www.sitepoint.com/browser-trends-may-2016-firefox-finally-overtakes-ie/ 17.48% SitePoint May 2016 5.71%
30. Engines have changed WebKit Blink EdgeHTML Gecko U3 Engine
31. In a few years you won’t know you are using a browser.
32. Mobile: Web embedded inside native Chrome Custom Tabs Safari View Controllers
33. Desktop: Web as a runtime Slack VS Code
34. Windows Universal Apps
35. Progressive Web Apps Browser chrome Home screen “App”
36. Web Assembly (not official logo)
37. Web Assembly C++ code Clang Emscripten (LLVM) WASM WebGL JS Engine
38. The front-end role is being redefined, as native and web melts together
41. So, how do DevTools fit into all of this?
42. Today’s DevTools are very similar
43. Our industry have a DevTools dogma
44. 2007: IE Developer Toolbar
45. 2016: Edge DevTools
46. 2016: Chrome DevTools
47. Is this really the best we can do?
48. Enough performance tools
49. Modern DevTools are collections of tools
50. A fraction of our screens
51. Debugging context
52. Authoring context
53. Authoring tools !== Debugging tools Our workflow is broken
54. 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
55. Web Developer Stockholm Syndrome 55
56. 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
57. Disconnect
58. Complimentary tools
59. Connecting the two worlds
60. What if it was like this? Open editor Find file in editor Make change Open browser Set breakpoint Debug Repeat Make change
62. VS Code Chrome Debugging https://github.com/Microsoft/vscode-chrome-debug
63. Edge Diagnostics Adapter https://github.com/microsoft/edge-diagnostics-adapter
64. Edge Diagnostics Adapter Chrome Debugging Protocol Edge Diagnostics Adaptor Tool Editor DevTool
66. We support an open ecosystem where browsers and tooling from different vendors work together
67. Node.js embracing Chrome Debugging Protocol
68. Node.js embracing Chrome Debugging Protocol Chrome Debugging Protocol VS Code Chrome Debugger Client Server New tools DevTool
69. Why is the web one of the few platforms that still bundles a full development environment with the runtime?
70. Normal web users are confused
71. Normal web users are hacking themselves
72. Why are DevTools bundled with our browsers? Desktop browser New devices Chrome-less contexts Devtool
73. DevTools for the Progressive Web Editors DevTools Device clouds Game IDE’s
75. VS Code + iOS + Web + Cloud
76. VS Code Chrome Debugger “The mighty cloud” Webkit Remote Debugging Protocol Protocol Adapter Chrome Debugging Protocol Local web server Source Map Bundled JavaScript Original source
78. 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
79. As the web grows out of the browser, we need to reimagine what our DevTools could be
80. Thanks! @auchenberg @EdgeDevTools