AtTheFrontend 16: DevTools for the Progressive Web

DevTools for the Progressive Web, AtTheFrontend, May 2016, Copenhagen

1. AtTheFrontend, May 2016 Kenneth Auchenberg Program Manager, Microsoft DevTools for the Progressive Web
2. I’m Kenneth
5. 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/
12. Source: http://www.apple.com/uk/shop/browse/reuse_and_recycle
13. Internet adoption has changed
15. Mobile internet users
16. 237 million new internet in 2015 Source: International Telecommunication Union, ICT Key Data 2015
17. 19.75 million new internet users per month Source: International Telecommunication Union, ICT Key Data 2015
18. 108 million new Indian internet users in 2015 Source: http://www.internetlivestats.com/internet-users-by-country/
19. New platforms rise
20. 20 Source: http://qz.com/314285/30-smartphones-are-here-and-theyre-getting-better-every-day/ Top handsets in India
21. 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
22. Microsoft Edge. Our new browser.
23. We are investing into the web in an open and collaborative way
24. Planning in the open
25. Open source
26. 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%
27. Engines have changed WebKit Blink EdgeHTML Gecko U3 Engine
28. In a few years you won’t know you are using a browser.
29. Mobile: Web embedded inside native Chrome Custom Tabs Safari View Controllers
30. Desktop: Web as a runtime Slack VS Code
31. Windows Universal Apps
32. Progressive Web Apps Browser chrome Home screen “App”
33. Web Assembly (not official logo)
34. Web Assembly C++ code Clang Emscripten (LLVM) WASM WebGL JS Engine
35. The front-end role is being redefined, as native and web melts together
38. So, how do DevTools fit into all of this?
39. Today’s DevTools are very similar
40. Our industry have a DevTools dogma
41. 2007: IE Developer Toolbar
42. 2016: Edge DevTools
43. 2016: Chrome DevTools
44. Is this really the best we can do?
45. Enough performance tools
46. Modern DevTools are collections of tools
47. A fraction of our screens
48. Debugging context
49. Authoring context
50. Authoring tools !== Debugging tools Our workflow is broken
51. Still a typical debugging workflow Open editor Navigate to page Open browser Find file in editor Make change Refresh browser Open DevTool Look in console 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
52. Web Developer Stockholm Syndrome 52
53. 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 decide which DevTools to use? 5. Why can't I leverage the browser logic in my new fancy tool? 6. Why can’t I just connect my editor to my mobile device? 7. Why are DevTools still bundled with our browsers? A few thoughts
54. Disconnect
55. Complimentary tools
56. Connecting the two worlds
57. What if it was like this? Open editor Find file in editor Make change Open browser Look in console Set breakpoint Debug Make change Tab back to browser Repeat
59. VS Code Chrome Debugging
60. Edge Diagnostics Adapter
61. Edge Diagnostics Adapter Chrome Debugging Protocol Edge Diagnostics Adaptor Tool Editor DevTool
63. We support an open ecosystem where browsers and tooling from different vendors work together
64. Why is the web one of the few platforms that still bundles a full development environment with the runtime?
65. Normal web users are confused
66. Normal web users are hacking themselves
67. Why are DevTools bundled with our browsers? Desktop browser New devices Chrome-less contexts Devtool
68. DevTools for the Progressive Web Editors DevTools Device clouds Game studios
70. VS Code + iOS + Web + Cloud
72. 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 decide which DevTools to use? 5. Why can't I leverage the browser logic in my new fancy tool? 6. Why can’t I just connect my editor to my mobile device? 7. Why are DevTools still bundled with our browsers? A few thoughts again
73. @EdgeDevTools Stay in touch @auchenberg
74. Thanks