All tooled up and nowhere to go?

All tooled up and nowhere to go? 5/18/20 Chris Heilmann - codepo8 1

Lots of time to spend at home… 5/18/20 Chris Heilmann - codepo8 2

Organising my clothes… 5/18/20 Chris Heilmann - codepo8 3

Tackling that box of cables… 5/18/20 Chris Heilmann - codepo8 4

Tackling that box of cables… 5/18/20 Chris Heilmann - codepo8 5

5/18/20 Chris Heilmann - codepo8 6

Developer Tools Edge(Chromium) PM Team Zoher Ghadyali @ZGhadyali Chris Heilmann @codepo8 Erica Draud @hiamerica Rachel Weil @partytimeHXLNT Brendyn Alexander @webrendyn

A demands gap… Useful, effective and pretty amazing things in devtools 5/18/20 🦄 What we demand of the web… Chris Heilmann - codepo8 8

An assumptions gap… Build it! 5/18/20 Ship it! Great success! Chris Heilmann - codepo8 9

Realities of great software projects… Research 5/18/20 Design Develop Deploy Monitor Chris Heilmann - codepo8 10

A demands gap… 🦄 Useful, effective and pretty amazing things in devtools What we demand of the web… What we use day to day… 5/18/20 Chris Heilmann - codepo8 11

§ Security § Privacy § Performance Why are things “slow”? 5/18/20 § Maintainability § Ownership § Backwards compatibility Chris Heilmann - codepo8 12

Use cases drive new features 5/18/20 Chris Heilmann - codepo8 13

Usage gap Useful, effective and pretty amazing things in devtools What we use day to day… 5/18/20 Chris Heilmann - codepo8 14

5/18/20 Chris Heilmann - codepo8 15

Editor in the browser… 5/18/20 Chris Heilmann - codepo8 16

Editor in the browser… 5/18/20 Chris Heilmann - codepo8 17

Upgrading your dev experience… 5/18/20 Chris Heilmann - codepo8 18

§ You can set breakpoints in the editor in the browser Breakpoints > console.log() 5/18/20 § You can also set breakpoints in your text editor (f.e. Visual Studio Code) § They are more work upfront than a console.log() - but worth it. Chris Heilmann - codepo8 19

§ Your code execution is paused – errors can’t slip though Breakpoints > console.log() 5/18/20 § You get an end-to-end picture of what is happening § You are not likely to litter the web with yet another console message that end users should never see Chris Heilmann - codepo8 20

DOM breakpoints! 5/18/20 Chris Heilmann - codepo8 21

DOM breakpoints? 5/18/20 Chris Heilmann - codepo8 22

Breakpoints > console.log() 5/18/20 Chris Heilmann - codepo8 23

DOM breakpoints! 5/18/20 Chris Heilmann - codepo8 24

DOM breakpoints! 5/18/20 Chris Heilmann - codepo8 25

DOM breakpoints! 5/18/20 Chris Heilmann - codepo8 26

Breakpoints > console.log() 5/18/20 Chris Heilmann - codepo8 27

No need for a mouse! 5/18/20 Chris Heilmann - codepo8 28

More visual tooling? 5/18/20 Chris Heilmann - codepo8 29

Animation Editor 5/18/20 Chris Heilmann - codepo8 30

3D View 5/18/20 Chris Heilmann - codepo8 31

3D View 5/18/20 Chris Heilmann - codepo8 32

Easy to miss extra features… 5/18/20 Chris Heilmann - codepo8 33

Colour Picker 5/18/20 Chris Heilmann - codepo8 34

Shadow Editor 5/18/20 Chris Heilmann - codepo8 35

§ CSS Grid tooling § Font tooling Currently in production: 5/18/20 § Service Worker lifecycle visualization § ??? (you decide) Chris Heilmann - codepo8 36

Emulation 5/18/20 Chris Heilmann - codepo8 37

Device Mode 5/18/20 Chris Heilmann - codepo8 38

Device Mode 5/18/20 Chris Heilmann - codepo8 39

More features of Device Emulation 5/18/20 Chris Heilmann - codepo8 40

Media Queries 5/18/20 Chris Heilmann - codepo8 41

Screen Ruler 5/18/20 Chris Heilmann - codepo8 42

Interaction emulation 5/18/20 Chris Heilmann - codepo8 43

Breakpoints > console.log() 5/18/20 Chris Heilmann - codepo8 44

Rendering menu 5/18/20 Chris Heilmann - codepo8 45

Rendering menu 5/18/20 Chris Heilmann - codepo8 46

5/18/20 Chris Heilmann - codepo8 47

Accessibility concerns 5/18/20 Chris Heilmann - codepo8 48

§ Developer tools are keyboard and screenreader accessible Already shipped: 5/18/20 § Developer tools work in high contrast mode Chris Heilmann - codepo8 49

Pro tip: CMD+SHIFT+P 5/18/20 Chris Heilmann - codepo8 50

5/18/20 Chris Heilmann - codepo8 51

5/18/20 Chris Heilmann - codepo8 52

5/18/20 Chris Heilmann - codepo8 53

§ High Contrast simulation § Simpler accessible interfaces Currently in production: 5/18/20 § Accessibility error reporting in context § Dual Screen Emulation Chris Heilmann - codepo8 54

§ High Contrast simulation § Simpler accessible interfaces Currently in production: 5/18/20 § Accessibility error reporting in context § Dual Screen Emulation Chris Heilmann - codepo8 55

Need for speed? 5/18/20 Chris Heilmann - codepo8 56

5/18/20 Chris Heilmann - codepo8 57

Browser task manager! 5/18/20 Chris Heilmann - codepo8 58

Where did my resources go? 5/18/20 Chris Heilmann - codepo8 59

Hat tip: also in Firefox! 5/18/20 Chris Heilmann - codepo8 60

How the sausage is made… 5/18/20 Chris Heilmann - codepo8 61

Innovation in the open… https://github.com/MicrosoftEdge/MSEdgeExplainers 5/18/20 Chris Heilmann - codepo8 62

Detailed developer tools explainers https://github.com/MicrosoftEdge/MSEdgeExplainers 5/18/20 Chris Heilmann - codepo8 63

Discussion amongst browser makers 5/18/20 Chris Heilmann - codepo8 64

Others join, too! https://github.com/WebKit/explainers 5/18/20 Chris Heilmann - codepo8 65

Popping the hood… 5/18/20 Chris Heilmann - codepo8 66

What are developer tools made of? 5/18/20 Chris Heilmann - codepo8 67

Open Developer Tools (CMD+SHIFT+I on Mac or F12/CTRL+SHIFT+I on Windows) 5/18/20 Chris Heilmann - codepo8 68

Activate the … menu and Select “Undock into separate window” 5/18/20 Chris Heilmann - codepo8 69

Developer Tools Are now “fullscreen” Open Developer Tools again… (CMD+SHIFT+I on Mac or F12/CTRL+SHIFT+I on Windows) 5/18/20 Chris Heilmann - codepo8 70

You now can debug the developer tools with developer tools (I changed to light mode to make it obvious which are which) while(🐢){go(deeper)} 5/18/20 Chris Heilmann - codepo8 71

Lots of fun bits to discover (and report if you find a problem) 5/18/20 Chris Heilmann - codepo8 72

§ Web Content? § Extensions? In-built reporting tool… 5/18/20 § Memory Leaks? § Long running processes? Chris Heilmann - codepo8 73

What makes me happy? 5/18/20 Chris Heilmann - codepo8 74

§ I like that we use web technology to build developer tools § This makes them embeddable into other software (VS Code is an Electron shell with Monaco inside) What are developer tools made of? 5/18/20 § It also allows us to build for the web on the web (CodePen, JSBin, Code Sandbox, Workspaces for GitHub) § It is fun to work in them as you have a predictable environment – we can test upcoming web tech there. Chris Heilmann - codepo8 75

Little touches that go a long way… 5/18/20 Chris Heilmann - codepo8 76

Little touches that go a long way… 5/18/20 Chris Heilmann - codepo8 77

§ Testing tool to check web projects for: § Accessibility issues § Performance problems § App readiness § Compatibility with standards Webhint: testing and best practices § Common pitfalls to avoid § Security issues § Online service (webhint.io) or node package to integrate in other tools § Highly customisable 5/18/20 Chris Heilmann - codepo8 78

§ Testing tool to check web projects for: § Accessibility issues § Performance problems § App readiness § Compatibility with standards Webhint in VS Code § Common pitfalls to avoid § Security issues § Online service (webhint.io) or node package to integrate in other tools § Highly customisable 5/18/20 Chris Heilmann - codepo8 79

§ Testing tool to check web projects for: § Accessibility issues § Performance problems § App readiness § Compatibility with standards Webhint: testing and best practices § Common pitfalls to avoid § Security issues § Online service (webhint.io) or node package to integrate in other tools § Highly customisable 5/18/20 Chris Heilmann - codepo8 80

§ VS Code is not only an editor, it also includes version control and a terminal Merging of tools 5/18/20 § This means I don’t have to jump from one context to another to debug § However… wouldn’t it me cool to have Devtools in VS Code? Chris Heilmann - codepo8 81

§ Edge/Chromium developer tools inside VS Code Devtools for Code § No need to switch to the browser to try a few things out § No need to replicate the same functionality in both places aka.ms/elements4code 5/18/20 Chris Heilmann - codepo8 82

§ Edge/Chromium developer tools inside VS Code Devtools for Code § No need to switch to the browser to try a few things out § No need to replicate the same functionality in both places aka.ms/elements4code 5/18/20 Chris Heilmann - codepo8 83

Thanks – your voice matters! Chris Heilmann @codepo8 @EdgeDevTools christianheilmann.com Click the feedback in Edge developer tools! 5/18/20 Chris Heilmann - codepo8 84

All tooled up and nowhere to go? 5/18/20 Chris Heilmann - codepo8 1