{"id":13448655,"url":"https://github.com/auchenberg/vscode-browser-preview","last_synced_at":"2025-05-14T18:05:14.127Z","repository":{"id":46771246,"uuid":"165110580","full_name":"auchenberg/vscode-browser-preview","owner":"auchenberg","description":"A real browser preview inside your editor that you can debug.","archived":false,"fork":false,"pushed_at":"2023-04-30T05:33:08.000Z","size":35511,"stargazers_count":4391,"open_issues_count":54,"forks_count":155,"subscribers_count":48,"default_branch":"master","last_synced_at":"2025-04-13T10:56:38.066Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/auchenberg.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2019-01-10T18:28:33.000Z","updated_at":"2025-04-07T16:36:07.000Z","dependencies_parsed_at":"2023-10-20T18:07:17.584Z","dependency_job_id":null,"html_url":"https://github.com/auchenberg/vscode-browser-preview","commit_stats":null,"previous_names":[],"tags_count":35,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/auchenberg%2Fvscode-browser-preview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/auchenberg%2Fvscode-browser-preview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/auchenberg%2Fvscode-browser-preview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/auchenberg%2Fvscode-browser-preview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/auchenberg","download_url":"https://codeload.github.com/auchenberg/vscode-browser-preview/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254198514,"owners_count":22030965,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T05:01:51.822Z","updated_at":"2025-05-14T18:05:09.116Z","avatar_url":"https://github.com/auchenberg.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","others","HarmonyOS","📦 Legacy \u0026 Inactive Projects"],"sub_categories":["Windows Manager"],"readme":"## :rotating_light: Deprecation Notice \nThis extension has been deprecated in favor of the [Live Preview extension](https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server).\n\nThe 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](https://github.com/microsoft/vscode-livepreview).\n\n\u003chr /\u003e\n\n\u003ch1 align=\"center\"\u003e\n  \u003cbr\u003e\n    \u003cimg src=\"https://github.com/auchenberg/vscode-browser-preview/blob/master/resources/icon_128.png?raw=true\" alt=\"logo\" width=\"100\"\u003e\n  \u003cbr\u003e\n  Browser Preview for VS Code\n  \u003cbr\u003e\n  \u003cbr\u003e\n\u003c/h1\u003e\n\n\u003ch4 align=\"center\"\u003eA real browser preview inside your editor that you can debug.\u003c/h4\u003e\n\n![CI](https://img.shields.io/github/workflow/status/auchenberg/vscode-browser-preview/Build.svg)\n\nBrowser 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](https://developers.google.com/web/updates/2017/04/headless-chrome), 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!\n\n![](resources/demo.gif)\n\n## Getting started\n\n1. Grab extension from [marketplace](https://marketplace.visualstudio.com/items?itemName=auchenberg.vscode-browser-preview)\n2. Click the new \"Browser Preview\" button in the Side Bar to the left or run the command `Browser View: Open Preview`\n\nMake sure you have Google Chrome installed on your computer.\n\n## Features\n\n- Browser preview inside VS Code (Powered by [headless Chromium](https://developers.google.com/web/updates/2017/04/headless-chrome)).\n- Ability to have multiple previews open at the same time.\n- Debuggable. Launch urls and attach [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) to the browser view instance, and debug within VS Code.\n- Attach Chrome DevTools via `chrome://inspect`\n- Option to set the default startUrl via `browser-preview.startUrl`\n- Option to set the path to the chrome executable via `browser-preview.chromeExecutable`\n- Option to set the type of rendering via `browser-preview.format` with the support for `jpeg` (default one) and `png` formats\n\n## How to change the default start url / start page?\n\nGo to your settings, search for \"browser preview\" and set `browser-preview.startUrl` to your desired url.\n\n![](assets/settings.png)\n\n## Launch and Debugging\n\nYou can enable in-editor debugging of Browser Preview by installing [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome), and configure VS Code's debugger to either attach or launch to the browser previews by using the following configuration:\n\n```json\n{\n  \"version\": \"0.1.0\",\n  \"configurations\": [\n    {\n      \"type\": \"browser-preview\",\n      \"request\": \"attach\",\n      \"name\": \"Browser Preview: Attach\"\n    },\n    {\n      \"type\": \"browser-preview\",\n      \"request\": \"launch\",\n      \"name\": \"Browser Preview: Launch\",\n      \"url\": \"http://localhost:3000\"\n    }\n  ]\n}\n```\n\nThe debug configuration also supports these additional properties: `webRoot`, `pathMapping`, `trace`, `sourceMapPathOverrides` and `urlFilter`. See \u003chttps://github.com/Microsoft/vscode-chrome-debug#other-optional-launch-config-fields\u003e for details on how to use.\n\n### Watch It\n\n[Watch an animated gif](docs/DEBUGGING.md) showing how to open the preview and debug a browser app.\n\n## Additional configuration\n\nBrowser Preview has the following settings:\n\n```json\n\"browser-preview.startUrl\": // The default start url for new Browser Preview instances\n\"browser-preview.verbose\": false // Enable verbose logging of messages sent between VS Code and Chrome instance\n\"browser-preview.chromeExecutable\": // The full path to the executable, including the complete filename of the executable\n\"browser-preview.format\": // Option to set the type of rendering with the support for `jpeg` (default one) and `png` formats\n\"browser-preview.ignoreHttpsErrors\": false // Ignore HTTPS errors if you are using self-signed SSL certificates\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fauchenberg%2Fvscode-browser-preview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fauchenberg%2Fvscode-browser-preview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fauchenberg%2Fvscode-browser-preview/lists"}