Developer Tools secrets that shouldn’t be secrets

1. Console is much more than `log()`!

What is that you’re logging?

console.log(width)
console.log(height)
console.log({width})
console.log({height})

Adding to your console vocabulary

Errors and assertions in Console

Tracing where something came from

Grouping console messages

Displaying and filtering lots of information in the console as tables

Blinging it up: $() and $$()

$$('a').map(a => {
return {url: a.href, text: a.innerText}
})

2. You can log without source access — live expressions and logpoints

3. You can log outside the browser — VS Code debugger

4. You can inject code into any site — snippets and overrides.

5. You can inspect and debug much more than you know!

6. Some dirty secrets…

Developer tools have become complex and are overwhelming — a few ideas how to fix that

Developer tools should not expect people to be experts but turn them into experts over time.

There is still a disconnect between authoring code and debugging the outcome

7. You’re the audience and the clients of Developer Tools!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store