vscode配置前端开发插件及设置Debugger for Chrome，open in browser

vscode凭借其强大的插件扩展，支持各种文件格式（html/jade/css/less/sass/xml）在前端开发中越来越受欢迎

本文记录一下用vs运行简单网页的例子

1，使用Debugger for Chrome插件

打开vscode，点击文件然后点击打开文件夹，然后打开自己想要创建的项目文件夹

然后安装Debugger for Chrome插件，按照如图所示步骤：

安装Debugger for Chrome插件之后打开自己要运行的文件按f5调用chrome浏览器运行，然后会自动创建.vs文件夹还有launch.json文件。launch.json文件内容如下所示：

然后返回要运行的网页然后按f5会出现

然后对launch.json文件进行配置，把launch.json中的内容更改为

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceRoot}"
    },
    {
      "type": "chrome",
      "request": "attach",
      "name": "Attach to Chrome",
      "port": 9222,
      "webRoot": "${workspaceRoot}"
    },
    {
      "name": "debug test",
      "type": "chrome",
      "request": "launch",
      "sourceMaps": false,
      "file": "${workspaceRoot}/test.html"
    }
  ]
}

关于launch.json中的配置参数说明访问https://go.microsoft.com/fwlink/?linkid=830387有详细说明，launch.json中的配置文件中的文件名和要运行的文件名一致如下图所示：

按照下图设置dubug方式

然后按f5即可成功调用chrome浏览器运行自己的网页

2，使用open in browser插件

Debugger for Chrome插件配置过程有点繁琐，使用open in browser插件可以更加方便使用浏览器打开自己编写的网页

在插件库中搜索安装open in browser 

然后在要运行的网页文件中右键点击 open in default browser（快捷键alt+b）使用默认的浏览器打开即可运行网页，或者选择open in other browsers（快捷键shift+alt+b）使用其他浏览器打开运行网页