7 Developer Tools secrets that shouldn’t be secrets

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?

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