在visual studio code中用Debugger for Chorme调试JavaScript

在打开的Chorme中进行调试为例(这样不用每次启动调试就打开Chorme)

  • 下载Debugger for Chorme
 
  • 对Chorme启动设置参数
Google Chorme 右键属性-快捷方式-目标-在尾部添加" --remote-debugging-port=9222"(注意--前面有空格)
 
  • 在vscode配置launch.json文件
比如调试的网址为“http://localhost:8080/Default.html ”，
type设置为chorme
request设置为attach
 
{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach chorme",
            "url": "http://localhost:8080/Default.html",
            "port": 9222,
            "webRoot": "${workspaceRoot}"
        }
    ]
}
 
  • 重新打开Chorm
打开网址http://localhost:8080/Default.html
 
  • 设置断点调试
左边栏的Local可以自动显示变量，调试中也可以鼠标悬停显示
posted @ 2017-03-31 17:31  riyefu  阅读(270)  评论(0)  编辑  收藏  举报