VS Code插件之Debugger for Chrome

号称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}"         }    ]}