Browser console logs from a Vite dev server, shown on your source lines in VS Code with no plugin

[lagudafuadtosin]

Ever had a value you logged in the browser and then hunted for it in DevTools while your code sat open in VS Code?

I made a VS Code extension, Inline Logs, that puts browser console.log output from a Vite dev server on the source line that logged it. There is no Vite plugin to add. When you start vite in the VS Code terminal, the extension adds a small script to the HTML Vite serves, before /@vite/client, and maps each browser stack back through Vite's source maps.

A few Vite things it handles:

1. Pages with a Content-Security-Policy, by reusing the page's nonce or adding its own hash
2. SvelteKit, Nuxt, Astro and React Router 7 dev servers, on the server side as well as the browser
3. Vite 7's module runner, whose code lives in memory, so React Router 7 loaders and actions still land on their own line
4. Errors from the page go into the Problems panel and leave it when the page reloads

It is free and open source (GPL), and nothing leaves your machine.

https://marketplace.visualstudio.com/items?itemName=lagudafuadtosin.inline-logs
https://github.com/lagudafuadtosin/inline-logs

If your Vite setup puts a value on the wrong line, an issue with the Vite version and framework would help a lot.