VSCode 基本前端调试

jgrass

发布于 2024-12-25 16:55:52

3760

文章被收录于专栏：蔻丁杂记蔻丁杂记

如何在 VSCode 断点调试 js 代码

1 单文件调试

可以直接使用 Code Debugger 插件，免配置 launch.json

如果配置 launch.json 则是

{    // 使用 IntelliSense 了解相关属性。    // 悬停以查看现有属性的描述。    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387    "version": "0.2.0",    "configurations": [        {            "type": "node",            "name": "Launch Program by node",            "program": "${workspaceFolder}/debug.js",            "request": "launch",            "skipFiles": [                "<node_internals>/**"            ],        },    ]}

2 调试 html 中加载的 js 脚本

需要安装 Live Server 插件，并使用开启。

配置 launch.json

{    // 使用 IntelliSense 了解相关属性。    // 悬停以查看现有属性的描述。    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387    "version": "0.2.0",    "configurations": [        {            "name": "Launch Chrome",            "request": "launch",            "type": "chrome",            "userDataDir": "${workspaceFolder}/.vscode/vscode-chrome-debug-userdatadir",            "url": "http://127.0.0.1:5500",            "webRoot": "${workspaceFolder}",        },
    ]}

注意，这里的端口号需要与 Live Server 插件指定的端口号一致。

3 `userDataDir` 的设置

from: visual studio code - run vscode chrome debugger with its extensions - Stack Overflow

默认情况下，调用 chrome 启动调试，会启动一个全新 profile 的 chrome 沙箱环境，以避免污染用户端正常的 chrome。如果想要用日常使用的 chrome 调试，则设置 userDataDir 为 false。但非常不建议。

考虑到需要安装插件以辅助调试等，可以设置 userDataDir 到项目目录（别忘记添加 gitignore），或者添加到本机电脑的用户目录。

"userDataDir": "${env:HOME}/.vscode/vscode-chrome-debug-userdatadir"

这样下次启动，就会保留浏览器设置了，还不影响日常使用的 chrome，这个配置只用来调试。

原文链接: https://cloud.tencent.com/developer/article/2481527

本作品采用「署名 4.0 国际」许可协议进行许可，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年7月3日 |，如有侵权请联系 cloudcommunity@tencent.com 删除

chrome

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度