在用 VS Code 做前端开发时，你也许会用 Live Server 或者 Debugger for Chrome 插件，来打开 Chrome 浏览器进行预览和调试。你也许会有这样的痛苦，特别是在只有一个屏幕时，你需要在屏幕的两侧进行位置调整，分别打开 VS Code 和 Chrome。不过现在，Browser Preview 插件完全解决了这个问题。
Browser Preview
安装好 Browser Preview 插件后，你在左侧的边栏会看到一个新增的图标。点击这个图标，就能在 VS Code 里打开一个浏览器啦～
Launch & Debug
Browser Preview 最大的好处就是可以直接在 VS Code 里预览和调试你的网页，不需要额外打开一个浏览器。安装好 Debugger for Chrome 插件，然后在 launch.json 中，进行如下配置，就能方便地 launch 或者 attach 你的 Web 应用啦~
{
Headless Chrome
其实 Browser Preview 的实现是基于 Headless Chrome。从 Chrome 59 开始引入了 Headless Chrome，它可以在没有 Chrome 浏览器界面的情况下来运行 Chrome 的功能。通过 Chromium 和 Blink 渲染引擎，把所有现代 Web 平台的功能都带入了命令行。通过命令行，你可以输出网页的 DOM，创建 PDF，捕获页面截图等等，完全不需要打开一个 Chrome 浏览器。除了命令行，Chrome 团队还提供了 puppeteer-core Node.js 库。在 Browser Preview 插件中，就是使用了 puppeteer-core 提供的 API 来控制 Headless Chrome，然后通过 VS Code 的 Webview API 来渲染出你的网页。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
