A presentation at JavaScript Remote Conf by Chris Heilmann
Adventures in Browser tooling 5/14/20 Chris Heilmann - codepo8 1
$ whoami 5/14/20 § Chris Heilmann @codepo8 – he/him/his § Principal Program Manager Microsoft Developer Experience (VSCode, Devtools…) § W3C Member § 20 years web developer § eToys, Agilisys, Yahoo, Mozilla… § Wrote 3 books, contributed to 10(?)… § Blogged since 2004, loud on Twitter Chris Heilmann - codepo8 2
Minding the gap… 5/14/20 Chris Heilmann - codepo8 3
A demands gap… 🦄 Useful, effective and pretty amazing things in devtools What we demand of the web… What we use day to day… 5/14/20 Chris Heilmann - codepo8 4
An assumptions gap… Build it! 5/14/20 Ship it! Great success! Chris Heilmann - codepo8 5
Our products should: § work independent of device and operating system The web isn’t a native platform § still cater to users of older devices and environments § not make any assumptions § be customizable by our users § have a longer lifetime than the current state of technology 5/14/20 Chris Heilmann - codepo8 6
Realities of great software projects… Research 5/14/20 Design Develop Deploy Monitor Chris Heilmann - codepo8 7
My audience: developers 5/14/20 Chris Heilmann - codepo8 8
Different developers, different needs 5/14/20 Chris Heilmann - codepo8 9
“This is a job” developer I work for a company that defines our tools and computer setup. I know there are probably better things out there, but as I don’t get to use them at work, why bother learning them? 5/14/20 Chris Heilmann - codepo8 10
The “switched on” developer It is frustrating that there are still people out there with old computers and outdated browsers. With a library I can support them as I’d rather learn and try out new things. 5/14/20 Chris Heilmann - codepo8 11
The “I am here to deliver” developer My clients don’t pay extra for fancy new technology. They need to get something that works on their machines. It needs to be legally compliant, you know, accessible so they can’t be sued. That’s why I use a framework. 5/14/20 Chris Heilmann - codepo8 12
The “the web is broken” developer I’ve always worked with higher programming languages and rich UI environments. The web seems like a mess and I don’t want to spend time trying to guess what the outcome of my code is. 5/14/20 Chris Heilmann - codepo8 13
The “I’m here to learn” developer I just started as a web developer and wherever I look, I am confused. There is so much information and often people give contradicting advice. I just want to learn the right thing… 5/14/20 Chris Heilmann - codepo8 14
§ The caring developer is a tiny fraction of the market § For many, this is a job to make a living Somehow bitter pills to swallow… 5/14/20 § New developers don’t find an empathic, open world, but an avalanche of choice and opinions § Satisfying developer needs has no direct correlation to creating better user products Chris Heilmann - codepo8 15
§ Constant change in the developer space is a double-edged sword Tech innovation isn’t the answer 5/14/20 § We empower a small group of highly motivated people at the cost of overwhelming others § We don’t find out about real problems as we don’t ask people outside our bubble Chris Heilmann - codepo8 16
§ Security § Privacy § Performance Why are things “slow”? 5/14/20 § Maintainability § Ownership § Backwards compatibility Chris Heilmann - codepo8 17
Browsers for developers § Consumption and creation platform § App platform (Progressive Web Apps, Electron…) § Test platform (Automation with Puppeteer / Playwright) § Preview of technology of the web to come (Beta, Canary, Developer builds, flags, origin trials) 5/14/20 Chris Heilmann - codepo8 18
Why do we need web standards? § Predictability of code outcome § Prevention of monopolies § Quality control – if your code validates the issue must be somewhere else § Maintainability, backwards compatibility and future readiness. 5/14/20 Chris Heilmann - codepo8 19
Web standards are an agreement § They used to be pretty academic § Nowadays they are informed by use and needs of developers and users collected by browser makers and developers § Discussions happen in the open and you are welcome to join 5/14/20 Chris Heilmann - codepo8 20
Usage gap Useful, effective and pretty amazing things in devtools What we use day to day… 5/14/20 Chris Heilmann - codepo8 21
Editor in the browser… 5/14/20 Chris Heilmann - codepo8 22
Editor in the browser… 5/14/20 Chris Heilmann - codepo8 23
Upgrading your dev experience… 5/14/20 Chris Heilmann - codepo8 24
§ You can set breakpoints in the editor in the browser Breakpoints > console.log() 5/14/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 25
§ Your code execution is paused – errors can’t slip though Breakpoints > console.log() 5/14/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 26
DOM breakpoints! 5/14/20 Chris Heilmann - codepo8 27
DOM breakpoints? 5/14/20 Chris Heilmann - codepo8 28
Breakpoints > console.log() 5/14/20 Chris Heilmann - codepo8 29
DOM breakpoints! 5/14/20 Chris Heilmann - codepo8 30
DOM breakpoints! 5/14/20 Chris Heilmann - codepo8 31
DOM breakpoints! 5/14/20 Chris Heilmann - codepo8 32
Breakpoints > console.log() 5/14/20 Chris Heilmann - codepo8 33
No need for a mouse! 5/14/20 Chris Heilmann - codepo8 34
More visual tooling? 5/14/20 Chris Heilmann - codepo8 35
Animation Editor 5/14/20 Chris Heilmann - codepo8 36
3D View 5/14/20 Chris Heilmann - codepo8 37
Easy to miss extra features… 5/14/20 Chris Heilmann - codepo8 38
Colour Picker 5/14/20 Chris Heilmann - codepo8 39
Shadow Editor 5/14/20 Chris Heilmann - codepo8 40
§ CSS Grid tooling § Font tooling Currently in production: 5/14/20 § Service Worker lifecycle visualization § ??? (you decide) Chris Heilmann - codepo8 41
Emulation 5/14/20 Chris Heilmann - codepo8 42
Device Mode 5/14/20 Chris Heilmann - codepo8 43
Device Mode 5/14/20 Chris Heilmann - codepo8 44
More features of Device Emulation 5/14/20 Chris Heilmann - codepo8 45
Media Queries 5/14/20 Chris Heilmann - codepo8 46
Screen Ruler 5/14/20 Chris Heilmann - codepo8 47
Interaction emulation 5/14/20 Chris Heilmann - codepo8 48
Breakpoints > console.log() 5/14/20 Chris Heilmann - codepo8 49
Rendering menu 5/14/20 Chris Heilmann - codepo8 50
Rendering menu 5/14/20 Chris Heilmann - codepo8 51
5/14/20 Chris Heilmann - codepo8 52
Accessibility concerns 5/14/20 Chris Heilmann - codepo8 53
5/14/20 Chris Heilmann - codepo8 54
5/14/20 Chris Heilmann - codepo8 55
5/14/20 Chris Heilmann - codepo8 56
Pro tip: CMD+SHIFT+P 5/14/20 Chris Heilmann - codepo8 57
§ Developer tools are keyboard and screenreader accessible Already shipped: 5/14/20 § Developer tools work in high contrast mode Chris Heilmann - codepo8 58
§ High Contrast simulation § Simpler accessible interfaces Currently in production: 5/14/20 § Accessibility error reporting in context § Dual Screen Emulation Chris Heilmann - codepo8 59
Need for speed? 5/14/20 Chris Heilmann - codepo8 60
5/14/20 Chris Heilmann - codepo8 61
Browser task manager! 5/14/20 Chris Heilmann - codepo8 62
Where did my resources go? 5/14/20 Chris Heilmann - codepo8 63
Hat tip: also in Firefox! 5/14/20 Chris Heilmann - codepo8 64
How the sausage is made… 5/14/20 Chris Heilmann - codepo8 65
Innovation in the open… https://github.com/MicrosoftEdge/MSEdgeExplainers 5/14/20 Chris Heilmann - codepo8 66
Detailed developer tools explainers https://github.com/MicrosoftEdge/MSEdgeExplainers 5/14/20 Chris Heilmann - codepo8 67
Discussion amongst browser makers 5/14/20 Chris Heilmann - codepo8 68
Others join, too! https://github.com/WebKit/explainers 5/14/20 Chris Heilmann - codepo8 69
Popping the hood… 5/14/20 Chris Heilmann - codepo8 70
What are developer tools made of? 5/14/20 Chris Heilmann - codepo8 71
Open Developer Tools (CMD+SHIFT+I on Mac or F12/CTRL+SHIFT+I on Windows) 5/14/20 Chris Heilmann - codepo8 72
Activate the … menu and Select “Undock into separate window” 5/14/20 Chris Heilmann - codepo8 73
Developer Tools Are now “fullscreen” Open Developer Tools again… (CMD+SHIFT+I on Mac or F12/CTRL+SHIFT+I on Windows) 5/14/20 Chris Heilmann - codepo8 74
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/14/20 Chris Heilmann - codepo8 75
Lots of fun bits to discover (and report if you find a problem) 5/14/20 Chris Heilmann - codepo8 76
§ Web Content? § Extensions? In-built reporting tool… 5/14/20 § Memory Leaks? § Long running processes? Chris Heilmann - codepo8 77
What makes me happy? 5/14/20 Chris Heilmann - codepo8 78
§ 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/14/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 79
Little touches that go a long way… 5/14/20 Chris Heilmann - codepo8 80
Little touches that go a long way… 5/14/20 Chris Heilmann - codepo8 81
§ 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/14/20 Chris Heilmann - codepo8 82
§ 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/14/20 Chris Heilmann - codepo8 83
§ 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/14/20 Chris Heilmann - codepo8 84
§ VS Code is not only an editor, it also includes version control and a terminal Merging of tools 5/14/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 85
§ 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/14/20 Chris Heilmann - codepo8 86
§ 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/14/20 Chris Heilmann - codepo8 87
Thanks – your voice matters! Chris Heilmann @codepo8 @EdgeDevTools christianheilmann.com Click the feedback in Edge developer tools! 5/14/20 Chris Heilmann - codepo8 88
We’ve come a long way from using alert() to debug our JavaScript and constantly re-loading the browser to see why some CSS doesn’t work. And yet we’re always complaining that tooling in the web space isn’t good enough. In this talk you’ll learn that you can do something about that. Either by providing use cases, contributing to the open stack of web developer tooling or simply by finding out where to stay up-to-date. There is a lot to be discovered to get more effective, and here’s a guide how to.
for free. You
can too.