All tooled up and nowhere to go? 5/18/20 Chris Heilmann - codepo8 1
A presentation at Halfstack Online in May 2020 in by Chris Heilmann
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
