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

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

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

--

--

--

Maker of web things. Ponderer of new technology. Lover of simplicity. Portfolio: http://christianheilmann.com — http://developer-evangelism.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Real integration tests with React, Redux and Router

JAVASCRIPT AND ITS USE CASES

Increase App Performance — Tame Tag Managers and Take Back Control From Third-Parties

Everything we need to know about CSS Borders

Bringing Together React, D3, And Their Ecosystem

Your first Typescript Package on NPM (Part 1/2)

Replace or reset YouTube Embed iFrame when video ends (fix rel=0 with YouTube API)

How to make a Stack — Typescript

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
Christian Heilmann

Christian Heilmann

Maker of web things. Ponderer of new technology. Lover of simplicity. Portfolio: http://christianheilmann.comhttp://developer-evangelism.com

More from Medium

3 Major Features of Node.js 17

Everything about OOP in TypeScript 4.5

A simple guide to JavaScript Decorators

Svelte: All the Nice Things of a Framework — Without the Framework