使用断点调试代码「建议收藏」

使用断点调试代码「建议收藏」简单地说,断点调试是指自己在程序的某一行设置一个断点,调试时,程序运行到这一行就会停住,然后你可以一步一步往下调试,调试过程中可以看各个变量当前的值,出错的话,调试到出错的代码行即显示错误,停下。在web开发中,打断点是经常使用的调试代码的方法,现在在这里简略的翻译一下官方对此功能的讲解,并插入一些自己的说明。文章翻译自:https://developers.google.com……

大家好,又见面了,我是你们的朋友全栈君。

简单地说,断点调试是指自己在程序的某一行设置一个断点,调试时,程序运行到这一行就会停住,然后你可以一步一步往下调试,调试过程中可以看各个变量当前的值,出错的话,调试到出错的代码行即显示错误,停下。

在web开发中,打断点是经常使用的调试代码的方法,现在在这里简略的翻译一下官方对此功能的讲解,并插入一些自己的说明。

文章翻译自:https://developers.google.com…

何时使用何种类型的断点:

Line-of-code: 知道在DevTools代码里要打点的具体区域;

Conditional line-of-code: 知道在DevTools代码里要打点的具体区域且设置条件,只有为真才执行断点操作;

DOM: 在 body 中添加,检测节点或其子节点的增删和属性变化;

XHR: 在 xhr url 包含特定内容的时候打点;

Event listener: 在触发特定事件的时候打点;

Exception: 在抛出异常的时候打点;

Function: 在特定函数被调用的时候打点;

debugger: 在书写的代码里希望打点的时候手动打点;


断点方法

Line-of-code breakpoints

浏览器会执行解析操作到打点的那行代码之前(不包含那行代码)。

操作: f12 -> Sources Tab -> 双击打开需要打点的文件 -> 找到需要打点的那行代码 -> 在行数上单击,出现一个蓝色标记,打点完成。

在标记上再次单击,会删除当前断点。

clipboard.png

在代码中输入 debugger 同样能在指定位置暂停,除了不是在 DevTools UI 里设置以外和 line-of-code breakpoints 是相等的。

console.log('a');

console.log('b');

debugger;  //在此暂停

console.log('c');


Conditional line-of-code breakpoints

在你希望有条件地打点的时候使用 conditional line-of-code 方法。

操作: f12 -> Sources Tab -> 双击打开需要打点的文件 -> 找到需要打点的那行代码 -> 右键行数,选择 Add conditional breakpoint -> 在出现的对话框中输入条件 -> 点击 enter,出现橙色标志,打点完成。

clipboard.png


管理断点

可以在 BreakPoints 面板上统一管理所有的断点。

clipboard.png

上面的图片显示页面共有两个断点,一个在 get-started.js 第15行,一个在第32行。

●  checkbox 选择启用禁用断点

●   在条目上右键,可以选择移除当前断点、停用当前断点、禁用所有断点、移除所有断点、移除其他断点。

      禁用所有断点相当于把所有 checkbox 的勾都去掉;

      停用当前断点会让浏览器忽略掉此断点,但是断点位置和图标仍然保留,以便再次激活使用;

      移除断点会直接去掉此断点;


DOM change breakpoints

在文档节点发生变化的时候暂停。

操作: f12 -> Elements Tab -> 点击希望监测的节点 -> 右击节点 -> 在出现的菜单上选择 Break on -> 按需要选择 Subtree modifications,Attribute modifications, Node removal。

clipboard.png

dom 改变断点类型:

●    subtree modifications , 在当前节点的子节点发生增加、移除、内容改变、交换顺序的情况的时候生效。其他情况例如当前节点发生了变化,或者子节点的属性发生了变化都不会触发。

●    attributes modifications , 在当前节点的属性发生变化,例如增加属性、移除属性、属性值改变 的时候触发。

●    node removal, 在当前节点被移除的时候触发。


XHR breakpoints

在你希望监听特定的 xhr 请求的时候,使用 xhr breakpoints 。 指定特定的字符串,当有包含此字符串的 xhr url 出现时触发,DevTools 会在 xhr.send() 方法被调用的地方暂停。

xhr breakpoints 对 fetch 请求也有效。

对于一些被封装好了的 xhr 请求例如 JQuery 的 ajax 方法,浏览器无法定位到被调用的地方。

操作: f12 -> Source Tab -> XHR Breakpoints 面板 -> 点击 + 号 -> 在出现的对话框里输入指定的字符串,浏览器会在出现包含此字符串的 xhr 请求时暂停(无论字符串在 url 的哪个位置) -> enter , 完成断点。

clipboard.png


Event listener breakpoints

监测事件,在事件发生后暂停,断点到事件绑定的位置。支持单独的事件例如 click , 也支持一整个类别的事件,例如所有的鼠标事件。

操作: f12 -> Source Tab -> 展开 Event Listener Breakpoints 面板,会列出所有能监听的事件 -> 全选或展开之后单独选事件,完成断点。

clipboard.png

上图是在移动设备的手持装置方向事件(横竖屏转换)上打点。


Exception breakpoints

在你希望捕捉到报异常的代码的时候,使用 exception breakpoints。

操作: f12 -> Source Tab -> 点击 Pause on exceptions 暂停图标 -> 图标变成蓝色,表明启用了在未捕获到的异常出现的时候断点的功能。

可选操作: 勾选 Pause On Caught Exceptions , 能够在捕获到异常的情况下也断点。

try{

    throw 'a exception';

}catch(e){

    console.log(e);

}

上面 try 里面的代码会遇到异常,但是后面的 catch 代码能够捕获该异常。如果是所有异常都中断(勾选了 Pause On Caught Exceptions),那么代码执行到会产生异常的 throw 语句时就会自动中断;而如果是仅遇到未捕获异常才中断,那么这里就不会中断。一般我们会更关心遇到未捕获异常的情况。

clipboard.png


Function breakpoints

在你希望 debug 一个具体的函数时使用。功能与在此函数的第一行代码出打断点是一样的。

操作: 在代码里插入 debug(functionName) 或者在浏览器控制台调用。

代码里插入:

function sum(a,b){

    let result = a+b;  // 浏览器在这里暂停

    return result;

};

debug  (sum);  // 参数是一个函数,不是字符串

sum();

控制台调用:

控制台输入debug(sum),点击 enter,再触发一次 sum 操作,就进入断点页面。

要注意确保目标函数与 debug 函数在同一个作用域里面,否则会报 ReferenceError:

clipboard.png

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/143599.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 练习PYTHON之EVENTLET

    练习PYTHON之EVENTLET

  • directx11是啥(polite什么意思)

    电脑爱好者朋友通常会在某款游戏最低配置要求以及某些显卡上看到有DirectX字样,一般DirectX有:Direct9.0、Direct10(简称DX9、DX10)以及时下最新的Direct11(简称DX11),很多朋友对于一些游戏中最低要求的DirectX版本很疑惑,也不知道为什么越来越多游戏都需要Direct10以上,甚至Direct11版本要求。那么DX11是什么呢?又代表着什么含…

  • UFT脚本[通俗易懂]

    UFT脚本[通俗易懂]SystemUtil.Run”C:\ProgramFiles(x86)\HP\UnifiedFunctionalTesting\samples\flight\app\flight4a.exe”使用Systemutil.Run打开订票程序Dialog(“Login”).WinEdit(“AgentName:”).Set”mercury”输入代理名称“mercury”Dialog(“

  • hrbust1224「建议收藏」

    hrbust1224「建议收藏」1.图形输出2.每一个图形的输出都有自己的规律3.不一定要自己一个个printf加for的一行行输出这样会有错4.好比是hrbust1224;这里写代码片include

  • TLSF内存分配器记录[通俗易懂]

    TLSF内存分配器记录[通俗易懂]论文:《TLSF:aNewDynamicMemoryAllocatorforReal-TimeSystems》这也是Unity底层使用的内存分配器。我直接从论文中间部分开始看。firstlevel存的是每个内存分配大小,从2的四次方到2的31次方。而对应每个大小,又指向一个二级列表,里面被分成4级,每一级的范围认为是同一类。1表示空闲,所以只有2的六次方和2的15次方块是空闲的。再看它指向的二级列表。只有2的六次方+16到2的6次方+32的这个.

  • zabbix监控redis信息

    zabbix监控redis信息了解Redis的info要获得Redis的当前情况,使用info命令即可。具体用法:redis-cli-h127.0.0.1-p6379-aredis_passwdinfo[参数]。针对不同的参数就会看到具体的数字,如果没有带参数,那么就会把默认情况写出来,如果带上all参数,那么就会把所有情况都写出来。比如:redis-cli-h127.0.0.1-p6379-aredis_passwdinfoserver,就会看到redis关于server的一些数据,如下:可以看

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号