Better JavaScript tooling for a changed world

The JavaScript debugging journey has been rough… • • • • •

We’re in excellent shape • • • • •

Wait… what is all this???

Disappointing considering our state of tooling and documentation

Lots of reasons… • • • • • • •

Confusing for beginners…

The trinity of web development

An opportunity to get bogged down in customisation

An endless cycle of context switching

Learning And the forgotten part (documentation, examples, best practices)

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.

On to greener pastures…

Emulation https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/device-mode/

Browsers can be fully automated… playwright.dev

Browser Developer tools in VS Code! aka.ms/devtools-for-code

Console filtering

Issues by type, option to exclude 3rd party issues https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/issues/

In-context documentation with “learn more” links…

Visual guides and indicators in the source

What comes next?

Better JavaScript tooling for a changed world