用户工具

站点工具


vscode:配置调试网上例子1

Visual Studio Code调试运行在Chrome, Firefox与Edge内的JS程序

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

  Debugger for Chrome
  Debugger for Firefox
  Debugger for Edge
  很可惜,社区里没有提供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}"
  }]

}

vscode/配置调试网上例子1.txt · 最后更改: 2018/06/04 11:50 由 luchunqing