https://blog.csdn.net/xdcx950288/article/details/80640918
号称2018最火的编辑器，不用用怎么行？
不多说直接开始踩坑之路。
要在vs中启动chrome控制台怎么办？vscode并没有集成环境，这里我们需要借助一个插件Debugger for Chrome。
选择左边安装包选项，点击商店搜索Debugger for Chrome，然后点击安装，重新加载。。。
安装完之后,点击调试，选择chrome，我们万分激动的等待控制台打开。。。
结果却是
这样：
或者这样：
反正就是不能启动。无奈去插件主页翻了翻插件说明，才明白问题所在。下面一一给大家讲解问题原因，顺带翻译部分插件说明，以便大家能顺利使用chrome控制台以及一些其他调试插件。
先贴一张vs官网对debug模块的整体描述图，左侧图标栏第三个就是进入调试面板，右下角是控制台输入输出，最下方式调试工具信息。
接着是官方推荐的常用调试工具，今天我们主要讲讲Debugger for Chrome。
下面是重点。。。
首先我们要搞明白一个重要文件，launch.json。先看下官网对这个文件的描述：
大致意思就是，要使用大多数调试插件，你得创建一个文件用来保存这些插件的配置。vscode把调试插件的文件保存在.vscode文件夹下面的launch.json文件里。.vscode文件夹作用不用多说，里面基本就是保存用户配置或者工作区配置。（这里再罗嗦一句，用户配置就相当于全局配置，在所有的工作空间都有效，工作区配置只在当前的项目目录中生效。）
从这里打开launch.json配置文件。
一般来说，一个调试工具的配置大概长这样：
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${file}"
}
]
}
官网对于配置选项的描述如下：
俺带着高中水平都不如的英文加上百度翻译，给大家说下大致意思，造福下英文水平跟我一样的渣渣，英文好的略过。。。
这些选项中，其中最上面的3条是必须的。
type：就是debugger工具的类型，每一个安装好的调试插件都有自己的类型。比如说node调试工具的type就是node，同理php调试工具的type就是php，我们安装的Debugger for Chrome的type就是chrome。
request：可以理解为调试工具的启动方式，目前官网提供两种，launch和attach，翻译过来就是“启动”和“附加”。就是直接启动或者挂载到进程启动，稍后在插件配置中再详细说明两种方式的差别。
name：给调试器起一个名字，这个可以自己随便写，就是调试器启动以后最下面显示的名字。
preLaunchTask：控制台启动一次调试之前需要执行的任务，可以把任务命令写到 文件夹中的 文件，在调试器启动前会先执行这些任务。
postDebugTask：跟上面差不多，不同的是结束后执行。
internalConsoleOptions：控制调试台的标签是否在调试过程可见。
port：当调试工具需要挂载到进程的时候，就要配置端口号了。
Debugger for Chrome插件用到的配置也不多，其他配置有兴趣的同学自己了解。上面这些配置是所有调试工具的通用配置。下面开始重点说明 Debugger for Chrome插件的配置。
附上插件地址：https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
type：选项没啥说的，就是“chrome”；
request：启动方式官网给了两种。关于启动要先搞明白一件事，vscode并没有集成chorme控制台，而这个插件也没有集成控制台，那么插件如何做到使用chrome控制台呢？很简单，插件会打开chrome浏览器，然后挂载到chrome进程，挂载完成之后，你在vscode中输入的命令，比如“var a=1”，vscode是并不能识别的，它会把这条语句传送给chrome进程，由浏览器处理这条语句并输出结果，然后再显示给vscode的调试器。明白这个原理之后我们就知道：调试器必须要启动浏览器程序。
事实上，调试器控制浏览器打开指定html文件，我们手动一样能完成，它只是帮我们省略了频繁切换和自己手动打开浏览器控制台的过程。我们知道，浏览器打开html文件有两种方式：1、本地打开。2、通过http服务打开（这两种方式不用我解释了吧。。。）
下面先说第一种launch，官网给出两种方案：
{
"version": "0.1.0",
"configurations": [
{
"name": "Launch localhost",
"type": "chrome",
"request": "launch",
"url": "http://localhost/mypage.html",
"webRoot": "${workspaceFolder}/wwwroot"
},
{
"name": "Launch index.html",
"type": "chrome",
"request": "launch",
"file": "${workspaceFolder}/index.html"
},
]
}
其实就是对应浏览器打开html文件的两种方式：有url选项的时候，表示在本地用http服务打开（怎样在本机开启http服务不用多说了吧，apache或者iis或者node都可以，反正必须开启本地http服务）；如果不想开启服务器，就选择file配置，这样浏览器会打开本地html文件。
注意：不管选用哪个方式，指定一个文件都是必须的。如果是url，webRoot选项用于将url解析到磁盘上的文件。比如写localhost/app.js会解析到工作目录里面的app.js文件。本地的话，也就是file，直接设置要打开的html文件路径，${workspaceFolder}意思就是当前工作目录，如果你写了${workspaceFolder}/index.html,就必须确保在相应的工作目录下有这个index.html文件才行。如果找不到这个文件，那么控制台是不会启动成功的。
举例来说，如果我的工作空间是PRACTICE文件夹，创建好index.html后，调试器打开浏览器，地址栏像这样才是正确的打开了文件。
如果像是这样，about:blank
那就是没有找到对应文件，调试器打开肯定会失败！只有找到正确文件路径，才能打开控制台。
再说说attach，如果选择了这个选项，就意味着chrome要连接到远程服务器，所以在浏览器启动的时候要在选项中加上--remote-debugging-port=9222。这个选项是要连接到远程调试服务器上的，如果不是chrome内核，就没法连接。还有被墙的话也可能会有影响，反正我是没有用这个。
attach选项不能设置runtimeExecutable。这个远程调用时chrome特有的，不允许自己设置浏览器。
具体做法就是：
windows下：找到浏览器图标，右键单击，选择属性，在目标这一栏加上
Linux：在启动命令后面直接加上就行。
下面我写一个常用配置：
{
"version": "0.2.0",
"configurations": [
{
"name": "这里随便写名字1",
"type": "chrome",
"request": "launch",
"sourceMaps": false,
"file": "${workspaceRoot}/index.html",
"runtimeExecutable":"D:/Program Files/360safebrowser/360Chrome/Chrome/Application/360chrome.exe"
},
{
"name": "这里随便写名字2",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8080",
"webRoot": "${workspaceRoot}",
"runtimeExecutable":"D:/Program Files/360safebrowser/360Chrome/Chrome/Application/360chrome.exe"
},
{
"name": "这里随便写名字3",
"type": "chrome",
"request": "attach",
"port": 9222,
"webRoot": "${workspaceRoot}"
}
]
}
上面这3种配置你可以选择一个适合自己的，也可以3个都选上，如果3个都写上
随后可以在左上角选择切换要启动的方式，由于我写了3个，左上角就有了3个，对应也就是name属性。
再说下你可能会遇到和我一样的问题：
1、当出现Error processing "launch": Error: 找不到 Chrome，的提示时，意味着vscode找不到默认的chrome路径，此时
需要我们手动添加浏览器路径，runtimeExecutable: 后面写上你要使用的浏览器路径，上面图中我写的是我自己的路径，你们换成自己的就好。
2、无法连接到运行中的进程，将在10000毫秒后超时 - （原因：无法连接到目标：connect ECONNREFUSED 127.0.0.1:9229）
按照理论来说，只有使用attach的时候才会出现这个问题。而事实是，即是你采用哪种方式都有可能会出现这个问题，原因在插件主页找到答案。
我们看第三条，如果你使用launch出现了这个报错，因为chrome实例存在，所以无法挂载到chrome进程，需要关闭正在运行的chrome程序，也就是关掉浏览器，必须要关掉全部窗口，然后再从vscode调试工具启动浏览器，这样就可以愉快的玩耍了。
让我们来打个window对象试一下：
最后再强调一点，文件路径非常重要，很多问题都是路径有问题，要记着，必须找到对应的文件才能启动浏览器控制台。