你可能不知道的5个Chrome调试技巧

1.格式化压缩过的JavaScript

压缩过后的JavaScript看起来就几行,每一行都很长,如果不进行格式化,根本没办法进行调试。Chrome的{}按钮(Pretty-print)可以使JavaScript以格式化的方式打开。

2.断点修改DOM元素的JavaScript

想要知道哪个代码修改了当前元素属性、修改了当前元素的子元素、删除了当前元素?Break on可以断点到对应的JavaScript上:

3.事件监听器断点(Event Listener Breakpoints)

可以直接对全局事件进行断点,当选择的事件发生时,该事件的所有监听器都会被断点

4.查看元素上绑定了哪些事件

可以通过下面的方式查看元素身上绑定了哪些事件,是从哪儿邦的。并且还能进行解绑操作:

5.监听DOM元素身上发生了哪些事件

参考:

1.https://elijahmanor.com/7-chrome-tips-developers-designers-may-not-know/

2.https://stackoverflow.com/questions/10213703/how-do-i-view-events-fired-on-an-element-in-chrome-devtools

原文地址:https://www.cnblogs.com/at0x7c00/p/11655742.html

时间: 2024-10-09 20:21:16

你可能不知道的5个Chrome调试技巧的相关文章

你可能不知道的14个JavaScript调试技巧

以更快的速度和更高的效率调试你的 JavaScript 了解你的工具可以在完成任务的过程中发挥重大作用.尽管传言 JavaScript 难以调试,但是如果你掌握了一些调试技巧,那么你将会花费更少的时间来解决这些错误. 我们已经列出了14个您可能不知道的调试技巧,但可能要记住,这样下次你需要调试 JavaScript 代码时就可以马上使用了! 现在就马上开始. 1. 'debugger;' 除了 console.log , debugger; 是我们最喜欢.快速且肮脏的调试工具.一旦执行到这行代码

Java程序员应该知道的10个Eclipse调试技巧

Eclipse是众多Java程序员实用的开发工具,其中开发技巧也是繁多,但作为优秀的Java程序员,需要掌握最起码的调试技巧. 小编从前辈程序员和网络中,整理了10个Eclipse调试技巧,希望对Java程序员有用. 1 条件断点 如果你不知道如何添加断点,只需点击左边面板(行号前面)断点即被创建.在调试界面中,“断点”视图会把所有被创建的断点列出来.我们可以给它加一个布尔条件,也就是说,该断点会被激活并且如果布尔条件为真,就会执行该断点,否则将会跳过往下执行. 2 异常断点 在断点视图中,有一

Chrome 调试技巧: 调整网速

为了方便调试某些内容,比如我想网速设置为 1kb每秒,甚至0kb每秒. 1.打开chrome DevTool ,切换到 "Network".找到最右侧 "Online" 和箭头的图标. 2.点击可以添加一个实例.输入你需要设置的网速配置. 然后点击 [Add],之后在NetWork选择它即可. 原文地址:https://www.cnblogs.com/CyLee/p/10382888.html

效率系列(六) Chrome调试技巧

前言:Chrome 自带的开发者工具是一个简单实用的调试工具,下面我们来看看这个强大的工具要怎么使用吧 1.开发者工具 打开 Chrome 浏览器,使用快捷键 Ctrl + Shift + I 或 F12 打开开发者工具,这里以 Chrome 官网 作为例子 可以看到网页下半部分显示的就是开发者工具,用红色方框圈起来的就是工具栏,下面我们将对它们进行介绍 2.两个小工具 在工具栏的最左边有两个比较常用的小工具,分别是 审查元素 和 选择设备 (1)审查元素 当我们点击审查元素按钮(或者按下 Ct

Chrome调试技巧

    1.利用console控制台查询字体编码 打开浏览器,按下键盘F12 至控制台 输入escape("要查询的字体中文名称")(注意:括号与引号都是英文输入法下输入) 将查询到的结果中的符号替换成\即可例如:华文新魏 查询到的是"%u534E%u6587%u65B0%u9B4F" ,写成font-family:"\534E\6587\65B0\9B4F"                   2.模拟移动端及不同浏览器效果 单击标志,可切换到

Chrome 调试技巧

一.windows平台下Chrome: 1. 打开控制台:F12 2. 查找文件:ctrl + o 3. 在已加载的源码文件中查找代码段:ctrl + shift + f 4. 在Element面板中查找: ctrl + f 二.Mac 平台下Chrome: 1. 打开控制台:command + option + i 2. Elements 面板查找: command + f

google chrome 调试技巧:监控 DOM 元素被修改

在很多时候, 页面上一个元素的属于被修改.删除,子节点的添加与修改,很难一下找到对应的代码,在 google chrome 开发者工具里, 提供了对 DOM 元素的监控: 在 Elements 标签, 右击有监控的元素,在弹出来的菜单中有一个 Break on 的菜单项, 下面有三个子菜单项 subtree modifcations: 监控当前元素子级元素结构的变化,添加结点和删除节点,移动节点不知道算不算. attribute modifcations: 监控当前元素属性的变化. node r

你可能还不知道的暗黑3常用小技巧

以下是上次活动热心坛友发来的游戏小技巧,经过我的搜集和加入一些自己和朋友们分享的经验整合编辑而成.再次感谢大家的热心参与.都非常实用哟!!! 操作篇 1,如果你不希望朋友进入你的游戏时,按ESC,在设定画面里(社交)---(启动:快速加入)的选项关掉. 2,按ESC,(游戏功能)选项---(按键绑定)可以让你设置你习惯的按键. 3,如果你加入了战队,队里的队友在线.队友获得的装备,成就等在刷屏怎么办?:打开战队页面,点击新闻,再点击右侧上角的“齿轮”,把物品/资讯选项的对号去掉. 4,点开S技能

你可能不知道的JavaScript代码片段和技巧(上)

JavaScript是一个绝冠全球的编程语言,可用于Web开发.移动应用开发(PhoneGap.Appcelerator).服务器端开发(Node.js和Wakanda等等.JavaScript还是很多新手踏入编程世界的第一个语言.既可以用来显示浏览器中的简单提示框,也可以通过nodebot或nodruino来控制机器人.能够编写结构清晰.性能高效的JavaScript代码的开发人员,现如今已成了招聘市场最受追捧的人. 在这篇文章里,我将分享一些JavaScript的技巧.秘诀和最佳实践,除了少