Visual Studio Code调试运行在Chrome, Firefox与Edge内的JS程序 - CNode技术社区

没有费话,直上干货了。下面配置中的文件路径与URL能够直接替换成你本地的参数。但是,对于${}变量,我推荐请不要修改。 为了享受VSC IDE的调试方便,下面的三个Extensions是需要被预先安装到你本地的VSC上的:

1. Debugger for Chrome
2. Debugger for Firefox
3. Debugger for Edge
4. 很可惜,社区里没有提供Debugger for IE。

然后,在工作区的.vscode/launch.json文件里,做一点很简单的配置(见如下)就全部搞定了。打开VSC的Debug View,点击Play按扭开始调试程序了。VSC会自行启动一个浏览器实例并进入"调试"模式。

Debugger for Chrome的.vscode/launch.json文件配置例程

{
 "version": "0.2.0",
 "configurations": [{
 "type": "chrome",
 "request": "launch",
 "name": "Chrome localhost",
 "url": "http://192.168.1.100:8887/${relativeFile}",
 "runtimeExecutable": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",
 "runtimeArgs": ["--remote-debugging-port=9222"],
 "userDataDir": "${workspaceRoot}/.vscode/chrome",
 "webRoot": "${workspaceRoot}"
 }]
}

Debugger for Firefox的.vscode/launch.json配置例程

{
 "version": "0.2.0",
 "configurations": [{
 "type": "firefox",
 "request": "launch",
 "name": "learning-three.js firefox",
 "url": "http://192.168.1.100:8887/${relativeFile}",
 "webRoot": "${fileDirname}",
 "pathMappings": [{
 "url": "http://192.168.1.100:8887",
 "path": "${workspaceRoot}"
 }],
	"profile": "default",
 "firefoxExecutable": "G:/Program Files/Mozilla Firefox/firefox.exe",
 "firefoxArgs": ["-start-debugger-server", "-no-remote"],
 "log": {
 "consoleLevel": {
 "PathConversion": "Warn",
 "default": "Warn"
 }
 }
 }]
}

Debugger for Edge的.vscode/launch.json文件配置例程

{
 "version": "0.2.0",
 "configurations": [{
 "type": "edge",
 "request": "launch",
 "name": "learning-three.js edge",
 "url": "http://192.168.1.100:8887/${relativeFile}",
 "webRoot": "${fileDirname}"
 }]
}