Edge DevTools Summer 2016

DevTools Camp, Vancouver part deux

Transcript

1. DevTools Camp, Vancouver Kenneth Auchenberg Program Manager, Microsoft Edge DevTools Summer 2016
2. I’m Kenneth 2
4. 4 Last time
5. So what have we been up to? 5
6. 6 Windows 10 Anniversary Update
7. 7 EdgeHTML 14
8. 8 Edge Extensions
9. 9 Accessibility improvements http://html5accessibility.com/
10. 10 Battery improvements
11. 11 More compatible
12. 12 New shiny stuff in EdgeHTML 14 APIs Web Notifications Fetch API Web Authentication API Beacon Web Speech API WOFF2 Web Fonts Elements <date> <time> <output> Codecs Opus Audio VP9 Video Codec JavaScript ES6 Default params Exponentiation operator Array.prototype.includes Object.values + Object.entries Experimental JavaScript ES Modules! Async/await
13. 13 We are implementing Service Workers
14. 14 Progressive Web Apps
15. 15 Edge DevTools
16. 16 Extension debugging
17. 17 Accessibility tree view
18. 18 Making Edge more user friendly by surfacing less developer tooling
19. 19 New “soft” developer mode
20. 20 PWA’s and the future of DevTools
21. 21 Why are DevTools bundled with our browsers? Desktop browser New devices Chrome-less contexts Devtool
22. 22 We are exploring different paths to take our DevTools
23. 23 F12 Chooser
24. VS Code 24
25. 25 TABS TABS TABS
26. VS Code Chrome Debugging 26
27. 27 Popular extension for VS Code
28. Source files Served assets Editor DevTool Concept
29. 29 Source maps are a mess
30. 30 Improving source maps support
31. 31 Story time
32. 32 Meteor framework
34. 34 meteor:// app/main.ts -> c:/code/main.ts
36. 36 "sourceMapPathOverrides": { "webpack:///*": "${webRoot}/*", // Example: "webpack:///src/app.js" -> "/users/me/project/src/app.js" "meteor:// app/*": "${webRoot}/*" // Example: "meteor:// app/main.ts" -> "c:/code/main.ts" } sourceMapPathOverrides mappings
37. 37 vscode-chrome-debug-core Chrome Debugging Protocol vs-code-chrome-debug-core Server vs-code-edge-debug vs-code-chrome-debug Client vs-code-node-debug
38. 38 Open source on GitHub
39. VS Code Edge Debugging 39
40. 40 Helping mobile web developers to become more productive.
41. 41 Debugging iOS Safari from Windows is a big problem for many people.
42. VS Code iOS Web Debugging 42 New release
44. We are looking for BETA testers of a new tool for iOS developers 44 Beta testers wanted
45. Enabling other tools to work with Edge 45
46. 46 Chrome Debugging Protocol Edge Diagnostics Adaptor Tool Editor DevTool Edge Diagnostics Adapter
47. 47 Architecture Edge Diagnostics Adaptor HTTP WS Node native extension Edge process Signed DLL bridge Tool Editor DevTool
48. 48 Open source on GitHub
49. Edge + Chrome DevTools 49 Demo
50. Edge + debugger.html 50 Demo
52. @EdgeDevTools Stay in touch 52 @auchenberg
53. Thanks