DevTools Camp, Edge DevTools and the future of tooling

Talk at DevTools Camp in Vancouver. www.meetup.com/DevTools-Camp/events/229240242/

1. DevTools Camp, Vancouver Kenneth Auchenberg Program Manager, Microsoft Edge DevTools and the future of tooling
2. A typical debugging workflow 2 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
3. I’m Kenneth 3
8. First, a bit of context 8
9. The web platform has changed 9
10. Document reader 10
11. Application runtime 11
12. Our devices have changed 12
13. Source: 13
14. Source: http://www.apple.com/uk/shop/browse/reuse_and_recycle 14
15. Internet adoption has changed 15
17. Mobile internet users 17
18. New platforms rise 18
19. 6 million new internet users per month Source: Google 19
20. Source: http://qz.com/314285/30-smartphones-are-here-and-theyre-getting-better-every-day/ 20
21. Source: Bruce Lawson, Opera Mini 1. Nokia X2-01 2. Samsung GT-E1282T 3. Nokia 2690 4. Nokia C1-01 5. Micromax A106 Top handsets in India 21
22. Desktop browsers have changed 1.69% 14.48% 54.33% 4.17% 1.92% (IE 19.27%) Source: http://www.sitepoint.com/browser-trends-february-2016-mobile-market-decline 22
23. Microsoft Edge. Our new browser. 23
24. We are investing into the web in an open and collaborative way 24
25. Planning in the open 25
26. Planning in the open 26
27. More than 200 million active devices with Windows 10 & Edge 27
28. Mobile browsers have changed 37.69% 10.91% 10.24% 18.63% 2.32% Others 1.90% Source: http://www.sitepoint.com/browser-trends-february-2016-mobile-market-decline 18.31% 28
29. Engines have changed WebKit Blink EdgeHTML Gecko U3 Engine 29
30. In a few years you won’t know you are using a browser. Source: Paul Kinlan, Google 30
31. Mobile: Web embedded inside native Chrome Custom Tabs Safari View Controllers 31
32. Desktop: Web as a runtime Slack VS Code 32
33. Windows Universal Apps 33
34. Progressive Web Apps Browser chrome Home screen “App” 34
35. The front-end role is being redefined, as native and web melts together 35
38. So, how do DevTools fit into all of this? 38
39. Today’s DevTools are very similar 39
40. Our industry have a DevTools dogma 40
41. 2007: IE Developer Toolbar 41
42. 2016: Edge DevTools 42
43. 2016: Chrome DevTools 43
44. Is this really the best we can do? 44
45. Enough performance tools 45
46. Modern DevTools are collections of tools 46
47. A fraction of our screens 47
48. Debugging context 48
49. Authoring context 49
50. Authoring tools !== Debugging tools 50 Our workflow is broken
51. Still a typical debugging workflow 51 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. Disconnect 53
54. Complimentary tools 54
55. Connecting the two worlds 55
56. What if it was like this? 56 Open editor Find file in editor Make change Open browser Look in console Set breakpoint Debug Make change Tab back to browser Repeat
57. VSCode Chrome Debugging 57
59. 59 We support an open ecosystem where browsers and tooling from different vendors work together
60. A common API for our browsers 60 Chrome Debugger Protocol
61. So what about Edge DevTools? 61
62. We’re building features in Edge DevTools you can’t find anywhere else 62 Edge DevTools
63. 63 Like CSS Changes
64. 64 Outside of Edge DevTools VS Code Edge DevTools
65. 65 Stay tuned
66. 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 can't I decide which DevTools to use? 5. Why can't I use DevTools to debug my mobile apps? 6. Why can't I leverage the browser logic in my new fancy tool? 7. Why are DevTools bundled with our browsers? 66 A few thoughts
67. 67 Why are DevTools bundled with our browsers? Desktop browser New devices Chrome-less contexts Devtool
68. @EdgeDevTools Stay in touch 68 @auchenberg
69. Thanks