vscode调试nodejs前端网页

首先要下载Debugger for Chrome插件,
然后配置launch.json调试文件

request有两种方式: 一种是launch,另一种是attach
他们的区别在于launch模式下,每次调试前端网页都会打开一个新的谷歌浏览器,然后自动打开网页
在attach模式下,可以在已经打开的网页中进行调试
所以推荐用attach模式

前端调试具体配置如下:
{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000", // 端口号是nodejs里你开启服务设置的端口号
            "webRoot": "${workspaceFolder}/public" // 这里一定要加/public,不能写成/public/,会报错
        }, // ${workspaceFolder} 指的是当前的项目文件夹
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
      "url": "http://localhost:3000", // 这里要注意,如果要调试http://localhost:3000/login页面,首先要进入http://localhost:3000,开启调试,再进入/login
            "webRoot": "${workspaceFolder}/public" // 这里一定要加/public,不能写成/public/,会报错
        }
    ]
}


然后返回到桌面,右键点击谷歌浏览器属性,然后在目标字段添加  --remote-debugging-port=9222,具体如下:

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222


接着在调试中选择 Attach to Chrome, 点击有三角形,开启调试

现在就可以添加断点了,刷新网页或者点击重启图标进行调试


若果有错误请大家多多包涵,谢谢大家阅读

  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值