Hysen Labs
Open-source project
auchenberg/vscode-browser-preview avatar
auchenberg

vscode-browser-preview

GitHub describes it as A real browser preview inside your editor that you can debug.. The repository metadata lists TypeScript as its primary language. The metadata lists the MIT license. This article stays within the project description and details documented in the GitHub repository README.

4,381 stars152 forksTypeScriptMIT
01
DEEP OPEN-SOURCE ANALYSIS

auchenberg/vscode-browser-preview: :rotating light: Deprecation Notice

GitHub describes it as A real browser preview inside your editor that you can debug.. The repository metadata lists TypeScript as its primary language. The metadata lists the MIT license. This article stays within the project description and details documented in the GitHub repository README.

02
DEEP OPEN-SOURCE ANALYSIS

Repository scope

GitHub describes it as A real browser preview inside your editor that you can debug.. The repository metadata lists TypeScript as its primary language. The metadata lists the MIT license. The README describes the project this way: The Live Preview extension is under active development and has much of the same functionality, including an embedded preview and external browser debugging. You can install the Live Preview extension and safely uninstall or disable this Browser Preview extension. Please file any issues you encounter in the Live Preview repository.

03
DEEP OPEN-SOURCE ANALYSIS

:rotating light: Deprecation Notice

The README section ":rotating light: Deprecation Notice" states: 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!

04
DEEP OPEN-SOURCE ANALYSIS

Getting started

The README section "Getting started" states: 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

05
DEEP OPEN-SOURCE ANALYSIS

Features

The README section "Features" states: - 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 chrome://inspect - Option to set the default startUrl via browser-preview.startUrl - Option to set the path to the chrome executable 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

06
DEEP OPEN-SOURCE ANALYSIS

Editorial conclusion

The repository README is the source for this review. It does not replace a local installation or an independent test.

07
DEEP OPEN-SOURCE ANALYSIS

Official sources

08
Community notes

Community notes