Browser Preview for VS Code
A real browser preview inside your editor that you can debug.
Browser Preview for VS Code enables you to open a real browser preview inside your editor that you can debug. Browser Preview is powered by headless Chromium, and works by starting a headless Chromium instance in a new process. This can either be Google Chrome or Microsoft Edge. This enables a secure way to render web content inside VS Code, and enables interesting features such as in-editor debugging and more!
- Grab extension from marketplace
- Click the new "Browser Preview" button in the Side Bar to the left or run the command
Browser View: Open Preview
Make sure you have Google Chrome installed on your computer.
- Browser preview inside VS Code (Powered by headless Chromium).
- Ability to have multiple previews open at the same time.
- Debuggable. Launch urls and attach Debugger for Chrome to the browser view instance, and debug within VS Code.
- Attach Chrome DevTools via
- Option to set the default startUrl via
- Option to set the path to the chrome executable via
- Option to set the type of rendering via
browser-preview.format with the support for
jpeg (default one) and
How to change the default start url / start page?
Go to your settings, search for "browser preview" and set
browser-preview.startUrl to your desired url.
Launch and Debugging
You can enable in-editor debugging of Browser Preview by installing Debugger for Chrome, and configure VS Code's debugger to either attach or launch to the browser previews by using the following configuration:
"name": "Browser Preview: Attach"
"name": "Browser Preview: Launch",
The debug configuration also supports these additional properties:
urlFilter. See https://github.com/Microsoft/vscode-chrome-debug#other-optional-launch-config-fields for details on how to use.
Watch an animated gif showing how to open the preview and debug a browser app.
Browser Preview has the following settings:
"browser-preview.startUrl": // The default start url for new Browser Preview instances
"browser-preview.verbose": false // Enable verbose logging of messages sent between VS Code and Chrome instance
"browser-preview.chromeExecutable": // The full path to the executable, including the complete filename of the executable
"browser-preview.format": // Option to set the type of rendering with the support for `jpeg` (default one) and `png` formats
"browser-preview.ignoreHttpsErrors": false // Ignore HTTPS errors if you are using self-signed SSL certificates