Pro Yearly is on sale from $80 to $50! »

Edge DevTools Summer 2016

Edge DevTools Summer 2016

DevTools Camp, Vancouver part deux

49f28eff1d0ddf3564a1b8b1f36a6c12?s=128

Kenneth Auchenberg

August 11, 2016
Tweet

Transcript

  1. DevTools Camp, Vancouver Kenneth Auchenberg Program Manager, Microsoft Edge DevTools

    Summer 2016
  2. I’m Kenneth 2

  3. 3

  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

  33. 33

  34. 34 meteor:// app/main.ts -> c:/code/main.ts

  35. 35

  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

  43. 43

  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

  51. 51

  52. @EdgeDevTools Stay in touch 52 @auchenberg

  53. Thanks