Adventures in Browser tooling

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