- 安装VS Code插件 "Debugger for Chrome",该插件可以将VS Code与Chrome浏览器进行调试。
- 打开Chrome浏览器,进入开发者工具(快捷键F12或ctrl+shift+i),在设置页面的“Console”选项卡中,启用“Preserve log”选项;这个选项将确保console日志不会在页码重载后丢失。
- 在VS Code的Debug面板中创建一个新的配置文件,并将"type"设置为"chrome","request"设置为"attach","url"设置为你要使用的Web应用程序的URL。
示例代码如下:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "attach",
"name": "Attach to Chrome",
"url": "http://localhost:3000" // Replace with your app's URL
}
]
}
- 在你的代码中加入console.log输出,例如:
console.log("Hello world!");
- 点击开始调试按钮或按F5启动调试。
- 在Chrome浏览器中打开你的Web应用程序,并在控制台中查看console.log的输出。
现在你就可以在VS Code中查看你的console.log输出,并在调试过程中进行查看和分析了。