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

已于 2024-01-03 15:43:39 修改
阅读量1.5w 收藏 55
点赞数 9
分类专栏： javascript 文章标签： javascript 前端
于 2021-12-31 11:16:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_45382009/article/details/122252339
版权
这篇博客介绍了如何利用debugger在前端开发中设置普通断点和条件断点，以便于跟踪代码执行步骤和定位问题。通过在代码中插入debugger语句，结合浏览器的开发者工具，可以实现单步执行并查看变量值。此外，还提到了条件断点的使用，增强了调试的灵活性。
摘要由CSDN通过智能技术生成

1. 普通断点

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

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

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

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

2. 条件断点

不能懒鸭
关注
专栏目录
学习 前端开发中的JS调试技巧(断点)
2401_83412087的博客
03-30 1076
由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！点击【学习资料】即可获取！et/topics/618191877)即可获取！[外链图片转存中…(img-E7CMq1dV-1711767059386)][外链图片转存中…(img-xmNIZ9gr-1711767059386)]点击【学习资料】
前端怎么打断点捏
weixin_46235143的博客
07-06 8573
前端的调试基础 如何断点 断点
我终于学会的前端技能——代码调试、打断点
技小白的博客
11-05 332
我觉得作为一名合格的前端一定要掌握前端调试的技能，会了调试你的开发效率就会提高，而且如果想进阶看一看框架源码的话调试技能也是必备的。我经常看到别人调试代码的时候就好羡慕咔咔咔一顿操作感觉好厉害啊，可自己就是学不会不善于使用断点的方式调试代码，觉得这玩意儿操作起来好复杂，还不如我的console.log用的顺手呢，就这样我一直呆在自己的舒适区，直到有一天我接触到了源码相关的知识方才意识到学会调试的重要性，后来我在掘金上买了前端调试的小册开始了我的前端调试之路。遇到问题后一个断点就能快速的定位到问题所在。
【浏览器】f12控制台，如何选中click、hover才出现的元素（断点调试）
最新发布
m0_63143512的博客
08-13 372
1. 按f12打开控制台，点击sources，按 ctrl+o 查找你要开发的文件。当鼠标点击select框时才显现选项，没有办法直接选中元素进行样式的调试。2. 给元素添加断点（如果操作的时候没有停，就多打几个）3. 刷新页面，进行调试，暂停之后就可以选择元素了。4. 页面顶部点击按钮就可以继续下一步操作。5. 完事之后去掉断点就好了。以切换语言的弹窗为例。
前端断点调试
josiecici的博客
11-05 1058
全局搜索：寻找 .vue 文件或 .js 文件等 ctrl+o 效果： 例如我想搜某个vue文件： 点击之后即可进入到文件中： 在搜寻到的文件中查找事件名等ctrl+f： 添加断点：单机行数那里 注意灰色的部分是不可打断点的 断点将会被添加 如下图所示 ...
前端程序调试时打断点的方式
zy103118的博客
04-21 7186
1先利用network定义请求，2利用source选项去定位源码位置 本例中我的请求都是在action文件夹里面的，source页签点开源码，要对应找出响应发出请求的位置 本例中我的项目是Action目录下的index.js是和action请求相关的js源码，去找对应的按钮点击事件代码部分 一刷新按钮一点击就会直接进入断点处 第二种调试方式： ...
前端断点调试是如何实现的？
IT界那些事儿
09-25 695
作为一个前端开发，前端调试的方式一般有如下几种：代码中直接打印，比如很多时候直接在代码中使用console来打印一些变量，或者在 vscode 中使用等插件生成特色的日志内容。debugger，在代码中输入debugger关键字，然后在浏览器中进行断点调试，或者在浏览器中找到源码，然后进行断点调试。vscode 自带的 web 调试能力。相比于 console，debugger 可以看到代码实际的执行路线以及每个变量的变化，代码可以跳着看，也可以针对某个函数步步执行。
前端断点及使用
qq_53152029的博客
09-02 3684
断点的目的是，代码运行时在想要开始调试的地方停下来。此时可以查看当前上下文信息，比如全局变量、局部变量的值，函数的输入是否正确，请求的返回值是否正常等。通过此操作判断问题发生的地方，好对症下药。
前端调试之断点
wwf1225的博客
05-14 342
https://www.cnblogs.com/-wanglei/p/11189935.html
程序调试说明.zip
12-05
在编程世界中，程序调试是开发过程中的关键环节，它能帮助我们找出并修复代码中的错误，确保软件的稳定性和可靠性。"程序调试说明.zip"这个压缩包文件包含了一份详细的程序调试指南，很可能是为了帮助开发者们提升...
前端开发调试技巧
逆袭的菜鸟X
12-01 3080
如图所示，我们只需要在你想再次发送的网络请求上右键，然后选择“Replay XHR”即可，Chrome就会自动为我们再次发送该请求，无需做其他的任务操作。首先同样的在你需要重复发送的请求上右键，然后选择Copy—Copy as fetch，接下来我们只需要打开控制台，然后使用我们最熟悉的Ctrl + V。正对js代码的调试，我们往往需要获取某些变量的值，于是在早期我们往往通过alert方法将变量的值通过弹窗的形式进行打印。Chrome同样也想到了这一点，并且还可以让我们自由的去设计请求参数。
前端如何进行调试
weixin_53777231的博客
12-23 9050
一.为什么需要调试 解决bug通常要对代码进行调试，这样才能比较容易的找出关键性问题。掌握一个好的调试技巧是一个开发人员必备的基本技能。 二.基本调试（pc端） 这里我们拿一套iview-admin 的源码来进行调试 1.肉眼调试 所谓肉眼调试就是指直接看代码进行调试，这种方式效率非常低下。 2.console log(...) 查看console.log(...)打印出的日志应该是目前大多数前端惯用的调试方法。但是这种方式对于缕清程序运行的步骤和过程来说是比较困难的。 比如，我要
前端入门技巧之浏览器调试
xiaoxijinger的博客
12-03 2677
前端调试是用来测试前端开发代码BUG比较常用的方式，通过调试我们可以把一些BUG提前扼杀在摇篮里。今天小千就来教大家利用Chrome谷歌浏览器进行前端的调试，web前端初学者一定要好好看一下啦。
前端打断点模拟请求超时
05-26
在前端中，我们可以通过以下步骤来模拟请求超时： 1. 在开发者工具中打开调试面板（一般是F12）。 2. 找到你要调试的代码所在的文件，并在该文件中设置断点。 3. 在断点处添加一个定时器，等待一段时间后再继续执行...
JS 的 6 种打断点的方式，你用过几种？，web前端开发软件
2301_82244343的博客
04-04 1405
面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体免费获取[外链图片转存中…(img-nUlrrUfZ-1712163174777)][外链图片转存中…(img-FY5zOLig-1712163174777)][外链图片转存中…(img-KIwCwYri-1712163174778)][外链图片转存中…(img-ixR7zPw3-1712163174778)]
前端调试断点（相当于后台的单步调试）
imkaifan的博客
03-26 1607
前端调试断点（相当于后台的单步调试） 断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。 调试步骤： 浏览器中按F12–>sources–>找到需要调试的文件–>在程序的某一行设置断点（这一行是可以运行的要不就没有意义）–>打完断点之后要刷...
debugger在JS中打断点调试
passWordEnterX的博客
12-28 643
在JS代码想断点调试的地方输入 debugger 运行JS代码，F12打开开发者工具，它会自动跳转到断点debugger处，咱们就可以查看到底是哪出问题了 红框中箭头符号为代码前或者后进入执行顺序 ...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值