vscode与chrome调试配置与常见问题 vscode怎么调试webpack查看webpack的原理 以及 vscode调试错误提示的解决办法 ? - vue.js - 方帮信
当前位置: 首页 >  > 技术 > 软件开发 > js > vue.js

vscode与chrome调试配置与常见问题 vscode怎么调试webpack查看webpack的原理 以及 vscode调试错误提示的解决办法 ?

2022/6/14 16:45:31 浏览

Cannot connect to the target at localhost:0: Could not connect to debug target at http://localhost:0: Could not find any debuggable target解决方法:1)浏览器桌面快捷方式对应图标,右键属性,找到“快捷方式”选项卡->下的目标,在 "C:\Program Files…

Cannot connect to the target at localhost:0: Could not connect to debug target at http://localhost:0: Could not find any debuggable target



image-20220520135713682.png


解决方法:

1)浏览器桌面快捷方式对应图标,右键属性,找到“快捷方式”选项卡->下的目标,在 "C:\Program Files\Google\Chrome\Application\chrome.exe" 后添加 -remote-debugging-port=9222 变更为:"C:\Program Files\Google\Chrome\Application\chrome.exe" -remote-debugging-port=9222


image-20220520150232294.png


2)vscode打开调试窗口,在下图箭头指向的位置点击打开配置文件 launch.json


image-20220520150414455.png


image-20220520150541950.png


image-20220520150621567.png

选择后会自动添加如下内容:

        {
           "name": "Attach to Chrome",
           "port": 9222,
           "request": "attach",
           "type": "chrome",
           "webRoot": "${workspaceFolder}"
       }

这里的9222对应的就是步骤(1)中在快捷方式中添加的 9222 端口。


3)通过快捷方式启动chrome浏览器,然后在cmd中输入 netstat -ano | findstr 9222 会看到对应9222端口号的进程,如下:

image-20220520160948533.png


在任务管理器中也可以得到确认,如下:


image-20220520161043023.png



4)在vscode中启动调试

image-20220520161127005.png


5)在步骤(3)中启动的浏览器窗口中输入要调试的页面后就可以在vscode中命中相应的断点。开启vscode的调试。通过这种方式可以跟踪webpack中具体的执行细节,和对应于浏览器中无法跟踪的 commonjs 的相应的实现过程 和对应的 变量以及方法的监视。



reference

https://blog.csdn.net/a15110793402/article/details/81605839


来源:方帮信(微信:wenwenjisuanji,邮箱:changyandou@126.com),欢迎分享!