vscode的debug技巧

发表于 | 分类于

vscode每打开一个项目，会有一个./vscode文件夹产生，里面的是整个项目在vscode里面的运行配置。
我们可以配置每个项目的debug目录。

1
2
3
4
5
6
7
8
9
10
11
12
"configurations": [


       {
           "type": "chrome",
           "request": "launch",
           "name": "Launch Chrome against localhost",
           "url": "http://localhost:8080",
           "webRoot": "${workspaceFolder}",
           "file": "${workspaceFolder}/index.html"
       }
]

表示加载一个chrome进程。来调试该网页。
可能会以文件形式file：///这种形式 或者localhost:8080
如果以文件形式打开的话，不利于debug.
因此可以利用另外一种配置形式 attach模式

1
2
3
4
5
6
7
8
9
{
          "name": "Attach",
          "type": "chrome",
          "request": "attach",
          "port": 9222,
        
          "sourceMaps": false,
          "webRoot": "${workspaceFolder}",
      }

表示附加在当前chrome进程上，chrome的debug进程的端口号为9222
在mac端 chrome进程以debug模式打开。

1
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

npm全局安装包live-server
随后在本地目录夹跑起来

1
live-server

就可以在附加的chrome的debug进程上调试