A real browser preview inside your editor that you can debug.
Branch: master
Clone or download
Latest commit b2f4681 Feb 19, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode No more Yarn Feb 19, 2019
assets animated gif of debugging Jan 22, 2019
docs animated gif of debugging Jan 22, 2019
ext-src Add no-sandbox flag for linux users. Fixes #61 Feb 19, 2019
public adds prettier Jan 22, 2019
resources Initial plumming for inspect Feb 10, 2019
src Merge pull request #50 from Arminkhodaei/development Feb 17, 2019
.env Initial Jan 2, 2019
.gitignore Initial Jan 2, 2019
.prettierrc Increse line width to 120 Feb 17, 2019
LICENSE More Jan 10, 2019
README.md Merge pull request #22 from johnpapa/master Feb 17, 2019
package-lock.json Updates Feb 19, 2019
package.json Version 0.3.1 Feb 19, 2019
tsconfig.extension.json adds prettier Jan 22, 2019
tsconfig.json adds prettier Jan 22, 2019
tslint.json adds prettier Jan 22, 2019

README.md


logo
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 Chrome Headless, and works by starting a headless Chrome instance in a new process. This enables a secure way to render web content inside VS Code, and enables interesting features such as in-editor debugging and more!

Getting started

  1. Grab extension from marketplace
  2. 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.

Features

  • Browser preview inside VS Code (Powered by Chrome Headless).
  • 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 chrome://inspect
  • Option to set the default startUrl via browser-preview.startUrl
  • Option to set the path to the chrome exectuable via browser-preview.chromeExecutable
  • Option to set the type of rendering via browser-preview.format with the support for jpeg (default one) and png formats

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:

{
    "version": "0.1.0",
    "configurations": [
        {
            "type": "browser-preview",
            "request": "attach",
            "name": "Browser Preview: Attach"
        },
        {
            "type": "browser-preview",
            "request": "launch",
            "name": "Browser Preview: Launch",
            "url": "http://localhost:3000"
        }
    ]
}

The debug configuration also supports these additional properties: webRoot, pathMapping, trace, sourceMapPathOverrides and urlFilter. See https://github.com/Microsoft/vscode-chrome-debug#other-optional-launch-config-fields for details on how to use.

Watch It

Watch an animated gif showing how to open the preview and debug a browser app.

Additional configuration

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 exectuable
"browser-preview.format": // Option to set the type of rendering with the support for `jpeg` (default one) and `png` formats