vscode和chrome的联调使用

时间:2024-04-05 08:07:31

1.首先在vs中安装如下的插件
vscode和chrome的联调使用

2.安装好之后,需要将chrome的快捷方式找到,点击属性,然后在目标的位置增加一段代码:–remote-debugging-port=9222,注意中间加上空格
vscode和chrome的联调使用

3.接着,打开自己需要打开的文件
这里以2.html文件为例,这里的2.html相当于一个入口文件,其中引用的2.js文件可以进行调试
vscode和chrome的联调使用
点击调试,选择add configure
vscode和chrome的联调使用

 

4.这个时候,需要在打开的一个launch.json的文件中添加配置,这里将它命名为launch debug file

添加一个launch
 

然后将launch中的最后一个webRoot修改成file:同时,将端口修改成9222,这里就是存放需要单独调试文件的位置

vscode和chrome的联调使用

5.点击调试中增加的一个名叫launch debug file,即可

vscode和chrome的联调使用

 

6.如果是需要调试一个项目,就是同样的方法