A presentation at JSWorld Conference in in Amsterdam, Netherlands by Chris Heilmann
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
We live in amazing times when it comes to browser tooling and open web tooling. Browsers aren’t only a thing for end users, but also power our editors and can be automated to do a lot of work for us. In this session we’ll take a look how the developer tools in browsers work, how to contribute and what’s cooking to make developers more effective and prevent us from making mistakes before we make them.
The following resources were mentioned during the presentation or are useful additional information.
for free. You
can too.