深入了解 VS Code 内置浏览器

VS Code 是一款功能强大的开发工具，而内置浏览器是其中一个非常实用的功能。通过内置浏览器，你可以在同一个编辑器窗口内编辑代码、预览效果、以及调试程序。在本文中，我们将从多个方面来深入了解 VS Code 内置浏览器。

一、内置浏览器的基本使用

1、默认情况下，VS Code 内置浏览器是不开启的，需要在设置中启用。启用方式如下：

"embeddedPreview.showOnStartup": true

2、启用后，在编辑器中预览 html 文件时，会默认在编辑器下方打开内置浏览器视图。你可以通过拖动视图边框来调整浏览器的大小，方便查看。

3、当浏览器视图打开时，你还可以通过右上角的按钮来关闭和刷新浏览器。

二、内置浏览器的高级使用

1、内置浏览器还可以作为调试工具来使用。在编辑器中按下 F5 键会打开调试视图，在下拉列表中选择“启用内置浏览器”，即可在内置浏览器中单步执行代码并查看变量。这对于前端开发者来说是一个非常实用的功能。

  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${file}"
    },
    {
      "name": "Launch Chrome against localhost",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    },
    {
      "type": "firefox",
      "request": "launch",
      "name": "Launch Firefox Nightly",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    },
    {
      "type": "edge",
      "request": "launch",
      "name": "Launch Microsoft Edge",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    },
    {
      "type": "opera",
      "request": "launch",
      "name": "Launch Opera",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    },
    {
      "type": "pwa-msedge",
      "request": "launch",
      "name": "Launch Microsoft Edge with PWABuilder",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    },
    {
      "type": "pwachrome",
      "request": "launch",
      "name": "Launch Chrome with PWABuilder",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    },
    {
      "type": "firefox",
      "request": "launch",
      "name": "Launch Firefox Nightly with Debugging Support",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}",
      "firefoxExecutable": "${input:firefox}"
    }
  ],
  "inputs": [
    {
      "id": "firefox",
      "type": "command",
      "command": "extension.firefoxScopes",
      "args": {
        "includeDefaultScopes": true
      },
      "description": "Enter the path to a Firefox Nightly build"
    }
  ]

2、内置浏览器还支持与外部浏览器进行同步浏览，你可以在设置中选择浏览器，然后通过点击右键选择“通过浏览器查看”来打开外部浏览器。此时，当你在外部浏览器中切换到其他页面时，内置浏览器也会同步跳转到相应的页面。这一点对于网站前后端开发的同步工作非常有用。

"embeddedPreview.syncWithOutWebView": true

三、插件扩展

1、如果你需要使用完整的前端开发工具链来完成项目，可以安装对应的插件。例如，在 VS Code 中安装 Live Server 插件，可以通过在编辑器中右键选择“通过 Live Server 打开”。这时，浏览器就会自动打开你的项目，而且可以自动刷新。

2、另外还有一些常用的前端插件，例如 HTML CSS Support、Auto Close Tag、Prettier 等，这些插件可以方便你的编码和格式化工作。

四、总结

在本文中，我们从多个方面深入了解了 VS Code 内置浏览器的使用和扩展。通过内置浏览器，你可以在同一个编辑器窗口内编辑代码、预览效果、以及调试程序。另外还可以通过插件扩展实现与完整前端开发工具链的无缝对接，这对于前端开发者来说是一个非常实用的功能。