首先要下载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,具体如下:
接着在调试中选择 Attach to Chrome, 点击有三角形,开启调试
然后配置launch.json调试文件
他们的区别在于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, 点击有三角形,开启调试
现在就可以添加断点了,刷新网页或者点击重启图标进行调试
若果有错误请大家多多包涵,谢谢大家阅读