这里以google浏览器为例,首先运行你的web项目,然后打开F12,F12的调试框可以放到任何位置,这里放到浏览器的下面。
2
选择sources(资源),找到要调试的界面,然后我们双击页面打开,然后找到要调试的位置,打上断点。
3
然后我们点击相关页面元素,让程序运行到我们的断点位置,如下图所示,证明我们的断点起作用了。
4
我们点击上面的类似播放的按钮让程序一步步执行,在此过程中我们可以把鼠标移动到我们想看的变量或者代码位置。
5
当然我们可以通过右侧的Watch检测面板将需要查看的元素或者变量加进去,方便我们看到它的结果。
6
在调试过程中,可能会遇到各种各样的错误,我们可以通过查看console(控制台)的形式进行查看。
把 launch.json 文件修改为:{
"version": "0.2.0",
"configurations": [
{
"name": "Launch",
"type": "node",
"request": "launch",
"program": "server.js", //这个配置成你要调试的文件
"stopOnEntry": false,
"args": [],
"cwd": ".",
"runtimeExecutable": null,
"runtimeArgs": [
"--nolazy"
],
"env": {
"NODE_ENV": "development"
},
"externalConsole": false,
"preLaunchTask": "",
"sourceMaps": false,
"outDir": null
},
{
"name": "Attach",
"type": "node",
"request": "attach",
"port": 5858
}
]
}