【H5开发】在VScode中使用Debugger for Chrome来调试TypeScript，vscodetypescript

【H5开发】在VScode中使用Debugger for Chrome来调试TypeScript，vscodetypescript

在VSCode开发中，调试typescript代码(ts)或者javascript代码(js)，可以直接打开浏览器，在浏览器中调试。

如果你想在VScode中直接调试，断点代码，就需要用到Debugger for Chromer插件了。

打开你的VSCode，  在’扩展‘选项中输入Debugger for Chrome进行搜索.

安装好了之后，需要重启一下VScode。

然后在“调试“选项中，   添加一个新的”调试配置“

选择”Chrome“

这时候，会出现很多调试选项。Chrome有两种调试模式可用。（Launch 运行 ）和（Attach 附加）

这里我们使用Launch运行启动Chrome的模式。

{ // 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。 // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Chrome", "url": "http://localhost:8080", "webRoot": "${workspaceFolder}" } ]}

默认的情况是这样的，会在项目.vscode目录下生成一个launch.json内容如上所示。

需要更改的地方，就是调试端口port，链接soureceMaps和你的index.html的位置。以下是我的配置。

注意，这里的port指的是与Chrome进行连接debug的通讯端口9222，并不是http服务器的端口。

http的web服务器端口在url中指定了，如下中所示是8080端口。

{ // 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。 // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "port": 9222, "name": "Launch Chrome", "sourceMaps": true, "url": "http://localhost:8080/bin/index.html", "webRoot": "${workspaceFolder}" } ]}

除此之外，你需要启动一个本地的http服务器。本博中有介绍，比如lite-server等。

然后，回到vscode界面，按F5就可以启动调试，在vscode中爽快的断点来调试ts或js代码了。

在VScode的控制台，也输出了正常的调试信息。

到此，在vscode中调试typescript或javascript的扩展就完成了！

大功告成。