微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > 开发工具 > VSCode > 正文

如何使用vscode进行断点调试

王林
发布： 2019-12-30 10:24:24
原创
15374人浏览过

如何使用vscode进行断点调试

目的：

在VSCode里，直接F5打开html页面，并且可以在编辑器里，进行断点调试js代码。

准备工作：

1、VSCode 软件

2、js项目

3、VSCode 上装一个插件：Debugger for Chrome

70c756d503f41cb259636a387cf22f2.png

配置文件更改：

1、用VSCode装载项目

7ceb8aca36dcee73a76b3c2277de329.png

2、然后按F5，出现这个框，选择 Chrome

e36d733223212f701c7c6519416182d.png

3、然后出现个配置的提示，并打开了launch.json这个文件

造点AI
造点AI

夸克 · 造点AI

造点AI 325
查看详情 造点AI

5d7edb52c8f4dac6cb02a079bd8bf8f.png

添加如下信息：

       {
            "name": "使用本机 Chrome 调试",
            "type": "chrome",
            "request": "launch",
             "file": "${workspaceRoot}/index.html",
        //  "url": "http://mysite.com/index.html", 
        //使用外部服务器时,请注释掉 file, 改用 url, 并将 useBuildInServer 设置为 false "http://mysite.com/index.html
            "runtimeExecutable": "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe", 
            // 改成您的 Chrome 安装路径
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
        //  "preLaunchTask":"build",
            "userDataDir":"${tmpdir}",
            "port":5433
        }
登录后复制

结果如图：

8ede8318d018a175c4e00efed3aa825.png

4、更改调试方式

如图：选择左边的圆形按钮，然后出来这个调试配置管理界面，选择“使用本机 Chrome 调试”

6f864bce77645c0030a216e7a1b41b1.png

5、最后在项目的 js 处设置好断点，按 F5，就可以进行断点调试了。

d8acaaf593e32a37dd7eabbba5f0598.png

相关文章教程推荐：vscode教程

以上就是如何使用vscode进行断点调试的详细内容，更多请关注php中文网其它相关文章！

相关标签：
vscode

大家都在看：

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：vscode如何导入项目 下一篇：如何设置vscode打开文件时新建窗口
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
vscode怎么用git开启详细日志_vscode开启git操作详细日志便于排查问题 启用详细日志可排查VSCode中Git问题，首先将“Git:LoggingLevel”设为"debug"或"verbose"以显示详细操作记录；其次通过设置GIT_TRACE等环境变量捕获底层调试信息；再者在“输出”面板选择“Git”查看具体执行命令及结果；最后使用开发者工具控制台观察Git相关错误提示与网络通信情况。
2025-11-07 13:52:02
894
在VSCode中配置TypeScript编译与错误检查 先安装项目本地TypeScript并创建tsconfig.json，再启用VSCode错误检查与自动编译任务，可实现实时类型检测与代码编译。
2025-11-07 13:47:02
688
vscode如何全局搜索插件依赖_vscode全局搜索插件所依赖的其他模块的方法 首先通过全局搜索和package.json分析插件显式依赖，再结合TypeScript跳转功能与正则搜索定位import/require引用，区分第三方库、VSCodeAPI及本地模块，最终梳理完整依赖结构。
2025-11-07 13:38:02
656
深入理解VSCode C++编译系统集成与调试 VSCode通过tasks.json、c_cpp_properties.json和launch.json协同实现C++编译调试：tasks.json定义编译任务（如调用g++），c_cpp_properties.json配置IntelliSense（头文件路径、语言标准），launch.json控制GDB调试流程（程序启动、断点、预编译任务）。三者分工明确，确保代码正确编译、智能提示准确、调试顺利进行。
2025-11-07 13:37:02
748
vscode运行HTML需要联网吗_vscode运行HTML是否需要网络连接的说明 VSCode运行HTML无需联网，安装LiveServer等插件后可通过本地服务器预览页面，文件以file://协议加载，静态内容离线显示；但引用CDN资源、调用API、更新插件或同步代码时需网络连接。
2025-11-07 13:21:36
133
VSCode界面主题：自定义工作台颜色与图标主题的完整指南 通过设置颜色主题、安装第三方主题扩展及自定义工作台颜色，可高效美化VSCode界面。1.使用快捷键打开命令面板选择内置颜色主题如Dark+；2.在扩展市场搜索并安装OneDarkPro等流行主题；3.通过编辑settings.json文件中的workbench.colorCustomizations字段微调侧边栏、状态栏等颜色；4.切换文件图标主题如MaterialIconTheme以提升文件识别效率。合理搭配配色与图标，显著提升视觉体验与工作效率。
2025-11-07 13:19:02
187
VSCode终端集成：配置Shell环境 正确配置VSCode终端Shell可提升开发效率。首先通过“terminal.integrated.defaultProfile”设置默认Shell，如Windows选GitBash、macOS选zsh；若Shell位于非标准路径，可用“terminal.integrated.profiles”手动指定path；为确保加载.zshrc等配置文件，应添加"-l"参数启用登录模式；还可通过“terminal.integrated.env”设置环境变量，利用${env:NAME}继承系统变量，避免覆盖
2025-11-07 13:07:13
119
vscode怎么用git恢复文件_vscode通过git恢复误删或修改文件的方法 可通过Git历史记录恢复文件。在VSCode中，利用源代码管理面板或Timeline视图找到文件历史版本，右键选择ReverttoThisVersion；或使用终端执行gitcheckout命令恢复指定版本；安装GitLens插件可增强可视化恢复功能；若文件曾暂存，可用gitfsck找回丢失对象并手动恢复。
2025-11-07 12:15:28
722
配置VSCode用于Spring Boot开发 使用VSCode开发SpringBoot项目可行，需安装SpringBootExtensionPack、JavaExtensionPack等插件，配置JDK和Maven环境，通过SpringInitializr创建或导入项目，运行时可使用“Run|Debug”按钮或mvn命令，配合自动编译、代码格式化、热部署等设置提升效率。
2025-11-07 11:00:02
974
VSCode用户代码片段配置教程 首先打开命令面板输入Preferences:ConfigureUserSnippets，选择语言或创建全局片段后编辑JSON文件，定义名称、prefix触发词、body内容及描述，支持$1、$2光标定位与时间变量等，保存后在对应文件中输入prefix即可触发插入，提升编码效率。
2025-11-07 10:22:03
987
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部