vscode 怎么打断点调试

最新推荐文章于 2025-10-14 22:22:20 发布
原创 最新推荐文章于 2025-10-14 22:22:20 发布 · 置顶 · 3w 阅读 · 50 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍如何在VSCode中使用Debugger for Chrome和Firefox插件进行网页调试。从安装插件开始，到配置launch.json文件，再到利用http-server进行本地服务搭建，最后实现在Chrome和Firefox中设置断点并进行调试。

第一步：在vscode中安装Debugger for Chrome 或者debugger for fireFox的插件

在这里插入图片描述
在这里插入图片描述

第二步：快捷键F5 或者点击运行=>启动调试

在这里插入图片描述

第三步：选择环境需要配置的环境Chrome ，firefox或者node

在这里插入图片描述

第四步：上一步选chrome 或者firefox的环境随便选其中一个，此时会出现一个launch.json的配置文件

在这里插入图片描述

第五步：配置launch.json加入chrome和firefox的配置项，再一次按下F5，添加配置文件，选择fiefox：server，会自动生成配置在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

第六步：全局安装http-server

npm i http-server -g
第七步：测试（在js中打上断点），

在这里插入图片描述

并在命令行中运行http-server，会自动产生一个模拟路径，

在这里插入图片描述

最后再一次F5 ，出现可以拦截到之前所设置的断点

在这里插入图片描述

通过切换配置项我们可以更换为火狐游览器

在这里插入图片描述

使用VSCode 断点调试 js项目，html页面
wanglei0832的博客
11-07 5646
一、效果目的 1.在VSCode里，直接F5打开html页面，并且可以在编辑器里，进行断点调试js代码； 二、工具准备 1.VSCode 软件 2.一个js项目 3.VSCode 上装一个插件：Debugger for Chrome 如图 三、配置文件更改 1.用VSCode装载项目 2.然后按F5，出现这个框 选择 Chrome 3.然后出现个配置的提示，和打开了launch.json这...
在新版的VSCode中，打断点等调试一个 js 文件的过程
狮子座的男孩
08-08 3818
1、首先打开想要调试的 js 文件界面，例：以我新建的 ‘app.js’ 为例； 2、打开调试的界面，即：类似 ‘小蜘蛛’ 的第四个界面； 3、由于之前没有调试过，因此在此界面打开，点击：‘Run and Debug’ 下的 ‘create a launch.json file’； 4、在下面的界面下，我是运行的 ‘node.js’ ，因此我就选择了这个环境；(注意：VS Code 将尝试自动检测您的调试环境，如果手动没有检测出来，那么就需要手动了)； 5、VS Code 会自动创建这样的一个文件
设置 VSCode+Vite+Vue3+ts 的断点调试
weixin_41245990的博客
06-21 4749
当前，Vite+Vue3+ts再结合一些优秀的UI框架，如Element plus，Ant design，Naive UI，移动端的Vant UI，是比较流行的前端技术之一。如何在vscode中 调试 Vite+Vue3+ts 的代码呢，今天我们一起来进行配置。首先，我们先配置ts的调试环境，再来配置Vue3的调试环境。
VS Code断点使用及条件断点失效问题
最新发布
这是C.L 的博客，欢迎大家学习浏览！！
10-14 1054
本文介绍了VSCode中条件断点的使用方法：1.右键行号添加条件断点，输入表达式（不加分号）；2.条件表达式在断点作用域内求值，遵循变量作用域规则；3.可编辑或更换条件表达式。还介绍了命中次数断点、记录点（日志消息断点）和触发断点（依赖其他断点激活）的使用场景。最后指出条件断点失效的常见原因：表达式末尾误加分号，或断点位置设置不当（如for循环行）。
如何利用vscode进行断点调试后端node开发的项目，如express或koa?
guiplan
10-18 1976
在我们平常开发中前端可以通过浏览器断点调试代码执行的过程，但是node项目后端通常用命令启动，但命令启动项目也只能打印日志信息，不能断点。所以这一章节教大家如何利用vscode进行断点调试。
C/C++程序的断点调试 - Visual Studio Code
海洋饼干叔叔
12-13 2200
本文以Visual Studio Code为例，简述C/C++程序断点调试的基本方法和过程。其它的IDE环境，大同小异。
VSCode打断点
热门推荐
mygoes
03-31 3万+
VSCode打断点1、安装插件 `Debugger for Chrome`2、运行→启动调试 （或 F5 快捷键）3、选择环境 `Chrome`4、此时会出现 `launch.json` 配置文件5、鼠标单击行数左侧打断点6、全局安装 `http-server`7、运行`http-server`8、再次 运行→启动调试 （或 F5 快捷键）即可拦截断点处 以 VSCode IDE 、js代码、谷歌浏览器 为例。 1、安装插件 Debugger for Chrome 2、运行→启动调试 （或 F5
VSCode中通过launch.json文件打断点DeBug调试代码（详细图文教程）
qq_40280673的博客
07-18 6613
launch.json 文件配置了一个调试会话，用于调试 train.py 脚本，传递了多个命令行参数，并设置了必要的环境变量。通过这种配置，你可以在 VSCode 中启动并调试你的训练脚本，并方便地设置断点、检查变量等。
vscode调试教程和断点类型的介绍
bueryi的博客
03-06 3万+
vscode的调试过程以及不同断点类型的详细介绍
vscode打断点调试
09-24
在这里可以创建新的启动任务（launch.json）来指定调试程序的命令、入口点等信息。 3. **设置断点**：在代码行号旁单击鼠标左键或按 `F9` 可以插入一个临时断点，当代码执行到该行时会暂停。也可以通过菜单选择 ...
vscode打断点调试python
07-02
在 Visual Studio Code (VSCode) 中调试 Python 程序时，设置断点是调试过程中的关键步骤之一。通过断点，可以在程序执行到特定代码行时暂停运行，以便检查变量状态、调用堆栈和程序流程。以下是几种在 VSCode 中为 ...
python中vscode打断点调试
11-28
在Visual Studio Code (VSCode) 中使用Python进行断点调试通常涉及安装特定的插件，并设置调试配置。以下是基本步骤： 1. **安装插件**： - 安装`Python`插件：确保已经安装了Python的官方支持插件，如"Python"，...
VScode 单步断点调试Nodejs方法总结
FeelTouch Labs
02-29 2231
使用vscode开发nodejs程序，能够启动单步调试模式
如何使用 VS Code 的调试工具进行断点调试
02-02 3246
在 Python 开发中，调试是定位和修复问题的关键环节。作为一款轻量、功能强大的编辑器，Visual Studio Code（VS Code） 提供了直观、灵活的调试工具，让开发者可以轻松设置断点、检查变量状态、逐步执行代码等。无论是初学者还是经验丰富的开发者，VS Code 的调试功能都能显著提高调试效率。本文将详细介绍如何在 VS Code 中使用调试工具进行断点调试，从基础操作到进阶技巧，帮助你快速上手并掌握调试工具的核心功能。
分享如何使用vscode打断点
du_aitiantian的博客
03-20 6745
前端，vscode打断点
已触发了一个断点 vs_VSCode源码分析-断点调试
weixin_40003780的博客
11-20 677
背景今年年初，有幸参与了阿里集团IDE 共建项目组，打造阿里生态体系内的公共IDE底层，而作为一款面向开发者的IDE，调试能力的支持一定程度上决定着一款IDE的开发体验；VSCode作为微软体系下一款当前最热的IDE开发工具，在调试领域上的探索实践是很好的学习案例，有道是：借他山之石,逐已身之玉，故本文着力于分析VCode中调试功能的设计与实现，让后来的人可以较为简单的理解调试这件事情是如何做到的...
VSCode中node.js如何断点调试
你，若盛开的专栏
08-06 4339
1、找到如图所示的按钮，点击如图位置，创建launch.json文件 2、选择node.js 3、自动生成并打开如下文件 4、将程序入口文件修改为当前项目的入口文件，保存 例如：该项目的入口的文件为app.js,将最后一行改为 "program": "${workspaceFolder}\\app.js" 5、关闭当前项目进程（如果之前没有启动的话，忽略此步骤） 此处以pm2开启的项目为例 pm2 delete 0 如报如下错误，就去对应位置删除掉pm2.ps1文件后，重新执行pm2 delete
VScode如何调试
lanmy_dl的博客
06-11 2260
1.打断点1.点击调试按钮3.点击下拉选择环境node，点击绿三角选择输入调试的命令（具体命令查看package.json中scripts中的哪一个命令和运行的文件），点击右边的设置（可以直接跳下面第八步！！！4.点击设置会自动生成一个launch.json文件如下5.传递参数，有时候并不是直接启动程序，还需要给程序传递参数，直接传就行如果是变量赋值类，总之就是这个启动命令后的所有字段放进来6.选择node版本运行。
vscode的4种特殊断点（满足条件时触发断点）
LL的专栏
12-18 1343
解决痛点：在循环中如果循环到第十次才出错，进行断点的时候，要跳过前面很多次。第一种：Expression，条件断点。路径：先在需要断点的地方单机，断点出现后，点击右键，可以选择Edit Breakpoint，出现4种断点的选择方式。第二种：Hit Count：运行多少次后中断运行（在循环中很好用，除了指定次数，也可以用大于等符号）；注意：切换条件时需要清除之前设置的条件，这些条件是或的方式，只要满足其中一个就会中断运行。第三种：Log Message，不中断，只是在debug打出要求的内容（不咋需要）；
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值