A presentation at CityJS/Halfstack on the Beach in in London, UK by Chris Heilmann
7 Developer Tools secrets that shouldn’t be secrets Chris Heilmann @codepo8
1 Console is much more than log()! Image used under license from Freestock.com
console.log(🧢's 🪵 ⭐ 📆… ${new Date().getTime()})
Noise!
https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/console/console-filters
What is that? console.log(width); console.log(height);
Simple trick: use the curls! console.log({width}); console.log({height});
Adding to your vocabulary https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/console/console-log
console.error() and console.assert()
console.trace() > console.log(”called”)
console.group()
console.table()
Blinging it up: $() and $$()
2 You can log without source access
Live expressions
Logpoints!
3 You can log outside the browser!
Using the debugger in VS Code…
Dedicated browser instance and console!
Console in VS Code!
4 You can inject code into any site! Snippets and overrides
Snippets https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/javascript/snippets
Run snippets from the command menu https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/javascript/snippets
Overrides https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/javascript/overrides
5 You can inspect and debug much more than you know!
GitHub Desktop…
Visual Studio Code
Browser DevTools?
Browser DevTools?
Inspect DevTools with DevTools…
DevTools in VS Code?
Dedicated browser instance and console!
Going the next step…
6 Some dirty secrets…
People use only a small fraction of Devtools.
Developer tools should not expect people to be experts but turn them into experts over time.
Sorting tools into use cases
Providing incontext explanations
We’re not yet fully integrated into the development process and there is one big gap!
Writing Code (Editor/IDE)
Checking if it works (Browser)
Debugging and Tweaking (Browser DevTools)
Done with changes, now what?
CSS mirror editing (open to feedback)
7 You’re the audience and the clients of Developer Tools!
Good products thrive on input
In context feedback tools
Open source on GitHub!
90% on the way… • Shows what URL the issue happened on • Takes a screenshot to include • Offers to also send diagnostic data • Offers you to provide an email for more questions • Allows for attachments and info how to recreate the issue. • We check this daily!
THANKS! Developer Tools Edge PM Team @EdgeDevTools Chris Heilmann @codepo8 Zoher Ghadyali @ZGhadyali Erica Draud @hiamerica aka.ms/7-devtools-secrets Rachel Weil @partytimeHXLNT
As JavaScript developers we have excellent tools at our disposal and yet there seems never be enough time to use them to their full potential. Let’s change that by making it easier to become a power user.
for free. You
can too.