跪拜 Guibai
← All articles
Frontend

VS Code's Integrated Browser Opens Web Pages Without Leaving the Editor

By 笨笨狗吞噬者 ·
Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Keeping the browser inside the editor cuts context-switching during front-end iteration. It also gives developers a quick, zero-extension way to preview static HTML without installing or configuring a live-reload server.

Summary

The Integrated Browser — triggered via the command palette or a right-click on an HTML file — renders web pages inside VS Code. It accepts any URL, including local dev-server addresses like `http://localhost:5173`, so a developer can keep the editor and the rendered output side by side. Changes to local HTML files update the preview automatically, making it a lightweight alternative for quick demos and static pages.

The feature is distinct from Live Server or Live Preview. Those extensions start a local server and inject auto-refresh logic; the Integrated Browser simply displays a page inside VS Code. For a full project with a build step, the workflow is to run `pnpm dev` (or equivalent) and point the Integrated Browser at the resulting localhost URL.

Takeaways
Run `Browser: Open Integrated Browser` from the command palette to open any URL inside VS Code.
Right-click an HTML file and select `Open in Integrated Browser` to preview it in-editor; changes to the file update the preview.
Local dev-server addresses like `http://localhost:5173` work, letting you view a running project without leaving the editor.
Integrated Browser is not a live-reload server — it only renders pages. Pair it with a dev server for full-project previews.
Conclusions

VS Code's built-in browser has been overlooked partly because the extension ecosystem (Live Server, Live Preview) absorbed the same use case early, but the native feature requires no install and avoids extension conflicts.

Separating page rendering from live-reload logic clarifies a common confusion: many developers treat them as one tool, but they solve two distinct problems.

Source: juejin.cn ↗ Google Translate ↗ Backup ↗