Edge DevTools Summer 2016

Slide 1

Slide 1 text

DevTools Camp, Vancouver Kenneth Auchenberg Program Manager, Microsoft Edge DevTools Summer 2016

Slide 2

Slide 2 text

I’m Kenneth 2

Slide 3

Slide 3 text

Slide 4

Slide 4 text

4 Last time

Slide 5

Slide 5 text

So what have we been up to? 5

Slide 6

Slide 6 text

6 Windows 10 Anniversary Update

Slide 7

Slide 7 text

7 EdgeHTML 14

Slide 8

Slide 8 text

8 Edge Extensions

Slide 9

Slide 9 text

9 Accessibility improvements http://html5accessibility.com/

Slide 10

Slide 10 text

10 Battery improvements

Slide 11

Slide 11 text

11 More compatible

Slide 12

Slide 12 text

12 New shiny stuff in EdgeHTML 14 APIs Web Notifications Fetch API Web Authentication API Beacon Web Speech API WOFF2 Web Fonts Elements 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

Slide 13

Slide 13 text

13 We are implementing Service Workers

Slide 14

Slide 14 text

14 Progressive Web Apps

Slide 15

Slide 15 text

15 Edge DevTools

Slide 16

Slide 16 text

16 Extension debugging

Slide 17

Slide 17 text

17 Accessibility tree view

Slide 18

Slide 18 text

18 Making Edge more user friendly by surfacing less developer tooling

Slide 19

Slide 19 text

19 New “soft” developer mode

Slide 20

Slide 20 text

20 PWA’s and the future of DevTools

Slide 21

Slide 21 text

21 Why are DevTools bundled with our browsers? Desktop browser New devices Chrome-less contexts Devtool

Slide 22

Slide 22 text

22 We are exploring different paths to take our DevTools

Slide 23

Slide 23 text

23 F12 Chooser

Slide 24

Slide 24 text

VS Code 24

Slide 25

Slide 25 text

25 TABS TABS TABS

Slide 26

Slide 26 text

VS Code Chrome Debugging 26

Slide 27

Slide 27 text

27 Popular extension for VS Code

Slide 28

Slide 28 text

Source files Served assets Editor DevTool Concept

Slide 29

Slide 29 text

29 Source maps are a mess

Slide 30

Slide 30 text

30 Improving source maps support

Slide 31

Slide 31 text

31 Story time

Slide 32

Slide 32 text

32 Meteor framework

Slide 33

Slide 33 text

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

38 Open source on GitHub

Slide 39

Slide 39 text

VS Code Edge Debugging 39

Slide 40

Slide 40 text

40 Helping mobile web developers to become more productive.

Slide 41

Slide 41 text

41 Debugging iOS Safari from Windows is a big problem for many people.

Slide 42

Slide 42 text

VS Code iOS Web Debugging 42 New release

Slide 43

Slide 43 text

Slide 44

Slide 44 text

We are looking for BETA testers of a new tool for iOS developers 44 Beta testers wanted

Slide 45

Slide 45 text

Enabling other tools to work with Edge 45

Slide 46

Slide 46 text

46 Chrome Debugging Protocol Edge Diagnostics Adaptor Tool Editor DevTool Edge Diagnostics Adapter

Slide 47

Slide 47 text

47 Architecture Edge Diagnostics Adaptor HTTP WS Node native extension Edge process Signed DLL bridge Tool Editor DevTool