SoftForge
Marketplace

Products / Engineering tools for VS Code / Browser DevTools

Browser DevTools

A browser workbench in VS Code: live preview, elements, styles, console, network, performance, memory, storage and accessibility.

Free · Pro by subscription
View on the MarketplaceSee the line
A page's code on the left, its live preview on the right, and the inspector panel below.
See your page update beside its code as you edit.
The inspector with a heading selected in the page tree and the style rules that apply to it.
Pick any element and see which styles shape it.
A list of the page's requests with status, size and time, with one response opened below.
Every request the page makes, with its timing and response.

What it does

A live preview of your page beside its code, and every panel you need to inspect it: the elements and their styles, the console, the network, performance, memory, storage and accessibility.

Where it fits

Pages are built, checked and fixed without leaving the editor.

Availability
On the Marketplace
Plans
Free; Pro by subscription
Panels
Elements, Styles, Console, Network, Performance, Memory, Storage, Accessibility

Related

  • UI Designer

    A design tool inside VS Code: one design file next to your code, which your assistant edits with you.

  • Perf Analyser

    See where your program spends its time, line by line, with an interactive flame graph.