devtools

Each line of a file labelled with the change that last touched it, so the file answers who and when rather than what it says.

A text area specialised for code, with a gutter of line numbers, syntax colouring and a caret that understands indentation.

The view that puts two versions of a text against each other, side by side or interleaved, marking every line added, removed or changed and aligning what did not.

Stacked bars where width is time spent and depth is call nesting, so the widest plateau rather than the tallest tower is the thing worth fixing.

A canvas of boxes wired to each other by lines, where each box does one job and the wiring between them is the thing being built, rearranged by dragging.

Three versions on screen at once, mine, theirs, and the ancestor they both came from, with the result edited underneath so a conflict is decided rather than guessed.

The view that lays a request's spans on one time axis, each nested under the span that called it, so the bar that is too long or starts too late is the finding.

A look borrowed from the command line: monospace type on a fixed character grid, a block cursor, and green or amber text on black.

Reading a geometric value after writing to the DOM in the same frame, forcing the browser to lay out synchronously over and over and stalling the animation that caused it.

A typeface in which every character occupies the same horizontal width, so characters stack into columns down the page.

A texture storing each pixel's distance to a shape's edge rather than its color, so glyphs and icons rendered from it stay crisp at any scale on the GPU.

Colouring code by what each token is, keyword or string or comment or name, so the structure and the typo are visible before a line has actually been read.