A presentation at Halfstack Online 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
Not being able to go out and use the normal distractions might be a good time to take stock and look at what we have. You could re-arrange your cupboards and wardrobes or order all those USB cables you collected over the years. Or you could take a look at what tools and tool options are available to us as developers these days. In this quick talk Chris Heilmann will take you on a tour of the Chromium developer tools universe and point out some things that are useful but may have slipped under the radar in our quest to always find the next new thing.
The following resources were mentioned during the presentation or are useful additional information.
Extension embedding the Edge Devtools into Visual Studio Code
for free. You
can too.