前端程序调试打断点的方式

已于 2024-01-03 15:43:39 修改
阅读量1.3w 收藏 52
点赞数 6
分类专栏： javascript 文章标签： javascript 前端
于 2021-12-31 11:16:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_45382009/article/details/122252339
版权

1. 普通断点

  • 第一步：在想要断住的那一行，写个debugger或者双击左侧的行出现红色断点
    在这里插入图片描述

  • 第二步：打开浏览器，F12打开控制台，刷新浏览器（一定要先打开控制台，不然刷新断点也出不来！）
    在这里插入图片描述

  • 第三步：下一步，单步执行代码
    在这里插入图片描述
    查看变量当前值：
    在这里插入图片描述
    结束断点：
    在这里插入图片描述

想看程序的执行步骤、查找问题都非常方便在这里插入图片描述

2. 条件断点

不能懒鸭
关注
  • 6
    点赞
  • 踩
  • 52
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
学习 前端开发中的JS调试技巧(断点)
2401_83412087的博客
03-30 957
由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！点击【学习资料】即可获取！et/topics/618191877)即可获取！[外链图片转存中…(img-E7CMq1dV-1711767059386)][外链图片转存中…(img-xmNIZ9gr-1711767059386)]点击【学习资料】
番茄时钟+小程序+源码
最新发布
06-05
通过以上内容，我们可以看到，将番茄时钟与小程序结合，不仅提供了便捷的时间管理工具，还为开发者提供了一个实践前端开发技能、尤其是微信小程序开发的平台。通过分析源码，可以学习到小程序的开发流程、设计原则...
外卖流程页面小程序前端模板
05-31
外卖流程页面小程序模板简介 外卖流程页面小程序前端模板源码
前端-vue项目debugger调试
大数据知识梳理
04-16 2870
前端-vue项目debugger调试,以及整体项目简介，项目运行流程
浏览器断点、代码段调试常见的四种快捷方式
qq_42715869的博客
09-27 3502
推荐几个前后端调试比较基础的Google常用的调试方式持续更新一些常用的调试方式。vue浏览器调试工具：Vue.js devtools。
JS 的 6 种打断点的方式，你用过几种？
2401_84093248的博客
04-07 315
前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档，需要的读者可以戳这里获取！ipt面试题文档，Vue面试题文档，大厂面试题文档，需要的读者可以戳这里获取！**[外链图片转存中…(img-PqPI0vcr-1712459213191)][外链图片转存中…(img-vgoZAxvV-1712459213191)]
前端怎么打断点捏
weixin_46235143的博客
07-06 8383
前端的调试基础 如何断点 断点
前端断点调试
kang1011的博客
09-20 5671
前端断点调试 前端dubug调试的俩种方法 1：直接在sources打dubug 如图 1：下图在一个名为toggleTab的方法下打了两个断点， 2：当开始执行我们的点击切换tab行为后，代码会在执行的断点出停下来， 3：并把相关的数据展示一部分，此时可以在已经执行过得代码处，把鼠标放上去，即可查看相关的具体数据信息， 4：同时我们可以使用右侧的功能键进行调试. 调试按钮 右侧最上面一排分别是：暂停/继续(F8)、单步执行(新版浏览器F9、F10)、单步跳入此执行块(F11快捷键)、单步跳
前端断点及使用
qq_53152029的博客
09-02 3563
断点的目的是，代码运行时在想要开始调试的地方停下来。此时可以查看当前上下文信息，比如全局变量、局部变量的值，函数的输入是否正确，请求的返回值是否正常等。通过此操作判断问题发生的地方，好对症下药。
如何打断点
热门推荐
weixin_45628785的博客
10-10 1万+
如何打断点 1. 打开要进行调试的程序，找到想要程序运行到此处停下调试的地方。 2. 设置断点 方法一：可以在想要调试停住的那一行最左侧的单击鼠标右键 -> Toggle Breakpoint，断点就打好了 方法二：双击行左侧即可，与方法一同样的效果 3. 取消断点 方法一：与打断点方法一相同，在想要调试停住的那一行最左侧的单击鼠标右键 -> Toggle Breakpoint，...
前端debug调试方式
java技术博客
03-03 7708
前端debug调试方式 debug , 手动打断点 , 大壮(console.log , alter) , IDE
程序调试说明.zip
12-05
在编程世界中，程序调试是开发过程中的关键环节，它能帮助我们找出并修复代码中的错误，确保软件的稳定性和可靠性。"程序调试说明.zip"这个压缩包文件包含了一份详细的程序调试指南，很可能是为了帮助开发者们提升...
用webstorm和vscode断点调试vue
12-04
断点调试是一种强大的开发工具，它允许我们在程序执行到特定位置时暂停，从而检查此时的变量值、调用栈以及代码状态。这对于查找和修复bug来说是至关重要的。 ### WebStorm中的Vue断点调试 1. **设置断点**：在...
前端项目-spf.zip
09-02
对于开发者而言，理解并熟练运用这样的前端项目是构建现代Web应用的基础，涉及到的知识点包括但不限于： 1. **HTML**：网页结构的构建，如标签的使用、语义化元素的理解等。 2. **CSS**：页面样式的设计，如布局、...
前端项目-angularjs-toaster.zip
09-03
在前端开发中，实时反馈用户操作的结果对于提升用户体验至关重要，AngularJS Toaster就是为了满足这一需求而设计的。这个压缩包文件"angularjs-toaster.zip"包含了AngularJS-Toaster-master主分支的所有源代码和相关...
前端调试断点（相当于后台的单步调试）
imkaifan的博客
03-26 1541
前端调试断点（相当于后台的单步调试） 断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。 调试步骤： 浏览器中按F12–>sources–>找到需要调试的文件–>在程序的某一行设置断点（这一行是可以运行的要不就没有意义）–>打完断点之后要刷...
前端断点调试（以vue项目举例）
qq_40460454的博客
11-08 3435
前端代码断点调试方法，不会调试的小白赶快来看吧
我终于学会的前端技能——代码调试、打断点
技小白的博客
11-05 286
我觉得作为一名合格的前端一定要掌握前端调试的技能，会了调试你的开发效率就会提高，而且如果想进阶看一看框架源码的话调试技能也是必备的。我经常看到别人调试代码的时候就好羡慕咔咔咔一顿操作感觉好厉害啊，可自己就是学不会不善于使用断点的方式调试代码，觉得这玩意儿操作起来好复杂，还不如我的console.log用的顺手呢，就这样我一直呆在自己的舒适区，直到有一天我接触到了源码相关的知识方才意识到学会调试的重要性，后来我在掘金上买了前端调试的小册开始了我的前端调试之路。遇到问题后一个断点就能快速的定位到问题所在。
前端打断点模拟请求超时
05-26
在前端中，我们可以通过以下步骤来模拟请求超时： 1. 在开发者工具中打开调试面板（一般是F12）。 2. 找到你要调试的代码所在的文件，并在该文件中设置断点。 3. 在断点处添加一个定时器，等待一段时间后再继续执行，模拟请求超时的情况。 例如，在以下代码中，我们可以通过设置一个3秒的定时器来模拟请求超时： ``` function fetchData() { // 发送请求 axios.get('/api/data').then(response => { // 处理响应 console.log(response.data); }).catch(error => { // 处理错误 console.error(error); }); } // 在这里设置断点 debugger; // 模拟请求超时 setTimeout(() => { console.log('请求超时'); }, 3000); // 调用 fetchData 函数 fetchData(); ``` 在这个例子中，我们在 `fetchData` 函数调用之前设置了一个断点，并在断点处添加了一个3秒的定时器。当程序执行到断点时，会暂停执行，等待我们手动触发继续执行。同时，定时器也会开始计时，如果3秒钟内请求没有得到响应，就会输出“请求超时”的消息。 需要注意的是，这种方法只是模拟请求超时的情况，并不会真正发送请求。如果要测试真实的网络请求，可以使用一些工具模拟网络延迟，比如 Chrome DevTools 中的 Network Throttling。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值