JavaScript/Web tooling now and tomorrow 

JAVASCRIPT/WEB TOOLING NOW AND TOMORROW Chris Heilmann (@codepo8) February 2021 aka.ms/js-web-tooling

THE WEB DEBUGGING JOURNEY HAS BEEN ROUGH… alert() document.write() Windows script debugger/Microsoft Script Editor (Douglas Crockford only) Firebug Developer Tools in browsers

Evergreen browsers WE’RE IN GOOD SHAPE THOUGH Good Platform adoption Open, extensible editors Hosting with version control/hooks Framework-a-minute

WAIT… WHAT IS ALL THIS???

DISAPPOINTING CONSIDERING OUR STATE OF TOOLING AND DOCUMENTATION

LOTS OF REASONS… Forgiving browsers Forgiving languages Full Stackoverflow Development Third party interference (ad packages, tracking) Platform-by-committee Focus on high-impact audience Developer tools are overwhelming

CONFUSING FOR BEGINNERS…

THE TRINITY OF WEB DEVELOPMENT Editor/IDE Development Browser Testing and Tweaking Terminal CI/CD, Version Contol, Build scripts

Editor/IDE AN OPPORTUNITY TO GET BOGGED DOWN IN CUSTOMISATION Browser Terminal Web Product

Editor/IDE AN ENDLESS CYCLE OF CONTEXT SWITCHING Browser Terminal Web Product

Editor/IDE Browser AND THE FORGOTTEN PART… Terminal Learning (documentation, examples, best practices) Web Product

DEVELOPER TOOLS SHOULDN’T REQUIRE EXPERT KNOWLEDGE. USING THEM SHOULD MAKE YOU AN EXPERT OVER TIME.

BEST PRACTICES AND DOCUMENTATION SHOULD BE PART OF THE TOOL, NOT SOMETHING YOU NEED TO FIND ELSEWHERE.

LET’S GET ONTO THE JOURNEY…

NOISE REDUCTION

CONSOLE FILTERING

ISSUE REPORTING

WEBHINT: TESTING AND BEST PRACTICES Testing tool to check web projects for: § Accessibility issues § Performance problems § App readiness § Compatibility with standards § Common pitfalls to avoid § Security issues Online service (webhint.io) or NPM package to integrate in other tools Highly customisable

https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/issues/ ISSUES BY TYPE, OPTION TO EXCLUDE 3RD PARTY ISSUES

IN-CONTEXT DOCUMENTATION WITH “LEARN MORE” LINKS…

MISTAKE PREVENTION

WEBHINT IN VISUAL STUDIO CODE PANEL

LIVE LINTING IN CODE

LITTLE TOUCHES THAT GO A LONG WAY…

LITTLE TOUCHES THAT GO A LONG WAY…

VISUAL TOOLS AND WORKFLOWS

VISUAL GUIDES AND SOURCE INDICATORS (CSS GRID)

VISUAL GUIDES AND SOURCE INDICATORS (CSS FLEXBOX)

VISUAL GUIDES AND SOURCE INDICATORS (CSS FLEXBOX)

VISUAL GUIDES AND SOURCE INDICATORS (WEB TYPOGRAPHY)

MAKING IT EASIER TO GO DEEPER

You can set breakpoints in the editor in the browser BREAKPOINTS > CONSOLE.LOG() 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.

BREAKPOINTS > CONSOLE.LOG() • Your code execution is paused – errors can’t slip though • 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

DOM BREAKPOINTS

DOM BREAKPOINTS

DOM BREAKPOINTS

DOM BREAKPOINTS

DOM BREAKPOINTS

DOM BREAKPOINTS

AVOIDING CONTEXT SWITCHING

2/24/21 CHRIS HEILMANN - CODEPO8 41

2/24/21 CHRIS HEILMANN - CODEPO8 42

2/24/21 CHRIS HEILMANN - CODEPO8 43

BROWSERS CAN BE AUTOMATED… developer.microsoft.com/enus/microsoft-edge/tools/webdriver/

BROWSERS CAN BE EMBEDDED… docs.microsoft.com/en-us/microsoftedge/webview2/

VISUAL STUDIO CODE ALLOWS FOR EXTENSIONS… code.visualstudio.com/api

SO, WHY DON’T WE MERGE THE TWO?

MICROSOFT EDGE TOOLS FOR VS CODE aka.ms/devtools-for-code

aka.ms/devtools-for-code

WHAT YOU CAN DO NOW… • Inspect, edit and tweak the DOM structure of the product you build using the tools • Inspect Network requests • Interact with the browser inside VS Code • Sync changes with your code (setting up Sourcemaps/Watchers) • Choose the version of Edge you want to have in the tool • Choose an own browser window or a headless version (embedded in the extension)

ANOTHER CONTEXT?

NETWORK INSPECTION NOT ENOUGH? aka.ms/networkconsole

WANT TO LOOK UNDER THE HOOD?

Open Developer Tools (CMD+SHIFT+I on Mac or F12/CTRL+SHIFT+I on Windows) 2/24/21 CHRIS HEILMANN - CODEPO8 55

Activate the … menu and Select “Undock into separate window” 2/24/21 CHRIS HEILMANN - CODEPO8 56

Developer Tools Are now “fullscreen” Open Developer Tools again… (CMD+SHIFT+I on Mac or F12/CTRL+SHIFT+I on Windows) 2/24/21 CHRIS HEILMANN - CODEPO8 57

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)} 2/24/21 CHRIS HEILMANN - CODEPO8 58

Lots of fun bits to discover (and report if you find a problem) 2/24/21 CHRIS HEILMANN - CODEPO8 59

WHAT’S NEXT? YOU TELL US! github.com/microsoft/vscode-edge-devtools

DETAILED DEVELOPER TOOLS EXPLAINERS github.com/MicrosoftEdge/MSEdgeExplainers

THANKS! Zoher Ghadyali @ZGhadyali DEVELOPER TOOLS EDGE PM TEAM @EDGEDEVTOOLS Chris Heilmann @codepo8 Erica Draud @hiamerica Rachel Weil @partytimeHXLNT Brendyn Alexander @webrendyn