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

vscode怎么断点调试js项目

王林
发布： 2019-12-31 15:20:37
原创
5060人浏览过

vscode怎么断点调试js项目

1、首先安装 debugger for chrome 插件

5.jpg

2、打开项目，按 F5 ，打开搜索框，选择 chrome

53fa2688238a3ab0735d959488c0db6.png

会打开launch.json文件，如图：

2762e9afc514986d8838c53321392fe.png

3、添加配置信息，如图：

{
            "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
        }
登录后复制

结果如图：

白瓜面试
白瓜面试

白瓜面试 - AI面试助手,辅助笔试面试神器

白瓜面试40
查看详情 白瓜面试

d00755585e9973af1d8b38b219f0204.png

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

6db1d6da7caa00950ae7b03c587bf10.png

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

bd4ffae7466c796161431908c83d74a.png

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

以上就是vscode怎么断点调试js项目的详细内容，更多请关注php中文网其它相关文章！

相关标签：
vscode json chrome for JS vscode

大家都在看：

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

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

下载
来源：php中文网
收藏 点赞
上一篇：vscode怎么实现代码快速自动对齐 下一篇：vscode打开多个窗口的设置
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
VSCode时间线功能：快速查看文件的本地修改历史 时间线功能是VSCode中用于查看文件本地修改记录的工具，位于资源管理器或文件标签上方，可显示自动保存版本、Git提交及文件操作记录；即使未连接Git，也能通过文件系统事件保留近期编辑状态，支持对比和恢复历史版本，但依赖自动保存且重启后可能丢失临时记录，建议配合Git使用以确保历史持久性。
2025-10-30 23:56:02
189
如何在VSCode中配置ESLint 首先安装ESLint扩展并初始化项目配置，生成.eslintrc文件且安装eslint依赖；然后在VSCode中启用ESLint校验，配置settings.json支持js/ts/vue检查，并设置保存时自动修复；最后通过formatonsave与codeActionsOnSave实现保存自动修正，验证提示生效即完成。
2025-10-30 23:51:25
859
VSCode文件关联设置 设置文件关联可让VSCode按指定语言模式打开特定后缀文件。通过Ctrl+,打开设置，搜索files.associations并编辑settings.json，如{".log":"plaintext",".config":"json"}。项目级配置可放在.vscode/settings.json中。临时修改可点击右下角语言标识选择，提升非标准扩展名文件的编辑体验。
2025-10-30 23:47:01
754
VS Code性能监控：扩展主机分析与渲染器优化 扩展主机与渲染器是VSCode性能关键。通过命令面板打开扩展主机监视器可查看各扩展CPU占用，启用跟踪日志监控调用栈以识别耗时任务；若遇卡顿，可用安全模式逐个排查问题扩展。渲染器方面，应限制大文件打开数量，利用"files.exclude"减少加载，关闭行高亮、括号动画等装饰效果，并选用轻量主题与等宽字体如Consolas提升重绘效率。日常需定期更新VSCode及扩展，合理配置工作区设置如TypeScript内存上限，并通过开发者工具Performance面板分析主线程阻塞，确保编辑器高效响应。
2025-10-30 23:46:01
386
在VSCode中集成GitHub Pull Requests和Issues 使用GitHub官方扩展可在VSCode中直接管理PR和Issue。安装“GitHubPullRequestsandIssues”扩展后登录账号，即可在编辑器内浏览、创建和审查PR，查看文件变更并评论，同时支持查看、筛选、创建Issue及关联PR与Issue，实现高效协作。
2025-10-30 23:43:17
600
VSCode代码搜索：使用正则表达式与全局搜索的高级技巧 掌握VSCode正则搜索与全局筛选可显著提升效率。启用正则后，可用^//.查找注释、//\s(TODO|FIXME):?.定位待办项、foo$$[^)]*$$匹配函数调用、let\s+\w+;\s$识别未赋值变量；结合捕获组‘([^’]*)'替换为"$1"可批量改单引号字符串，console.log$$([^)]*)$$替换为logger.info($1)实现日志函数迁移；通过*.js,!/node_modules/等文件筛选缩小范围；开启大小写敏感与\b全词匹配\b确保精度，如\bhandle
2025-10-30 23:31:01
444
使用VSCode进行云计算开发 VSCode凭借轻量级、跨平台和丰富插件生态，高效支持云计算开发。2.通过AWSToolkit、AzureTools、GoogleCloudCode等插件，实现云资源管理与函数调试。3.利用DevContainers和launch.json，支持远程开发与本地模拟调试。4.结合Terraform、Pulumi和YAML扩展，实现基础设施即代码的全流程管理。5.内置终端集成云CLI工具，配合tasks.json可一键构建部署，提升开发效率。
2025-10-30 23:29:33
571
配置VSCode用于Terraform基础设施即代码开发 配置VSCode进行Terraform开发可提升效率，首先安装TerraformbyHashiCorp、EditorConfig、Prettier或TerraformFormat、GitLens等扩展，确保语法高亮、格式统一和变更追踪；HashiCorp插件自动激活语言服务器，需安装terraform-ls以支持智能补全与跨文件跳转；通过.vscode/settings.json设置保存时自动格式化，集成终端运行init、plan、apply命令，并配合.gitignore保护状态文件，实现高效
2025-10-30 23:23:02
665
配置VSCode用于C#开发 首先安装.NETSDK并验证命令可用性，再在VSCode中安装Microsoft官方C#扩展以获得智能提示与调试功能，接着通过dotnetnew命令创建项目并用VSCode打开，自动配置生成launch.json文件，最后按F5启动调试，确保入口文件正确即可完成C#开发环境搭建。
2025-10-30 23:20:02
535
详解VSCode GraphQL API开发与测试工具 配置好VSCode插件与工具可显著提升GraphQL开发效率：1.使用GraphQLforVSCode实现语法高亮与智能提示，需通过.graphqlrc文件关联schema；2.利用ThunderClient或Altair在编辑器内测试查询，支持多环境请求发送；3.采用GraphQLCodeGenerator自动生成TypeScript类型与ReactHooks，确保前端类型安全；4.借助插件错误提示与调试工具快速定位问题，结合schema轮询实时更新提示。全流程集成减少上下文切换，关键在于正确
2025-10-30 23:11:02
258
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

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

  • PHP学习

  • 技术支持

  • 返回顶部