关于浏览器调试的30个奇淫技巧
这篇文章为大家介绍一下浏览器的调试技巧,可帮助你充分利用浏览器的调试器。
console.log
这个是日常开发中最常用的了如果不知道这个就不是程序员了,这里不多描述了
console.count
计算代码执行的次数他会自动累加
// 例如我代码执行了三次
console.count() // 1 2 3
console.count('执行:') // 执行:1 执行:2 执行:3
console.table
例如,每当你的应用程序在调试器中暂停时,要将 localStorage
的数据转储出来,你可以创建一个 console.table(localStorage)
观察器:
关于 console.table
的就暂时介绍到这里,下边有一篇详细介绍 console
其他用法的有兴趣的童靴可以去看看。
DOM 元素变化后执行表达式
要在 DOM
变化后执行表达式,需要设置一个 DOM
变化断点(在元素检查器中):
然后添加你的表达式,例如记录 DOM
的快照:(window.doms = window.doms || []).push(document.documentElement.outerHTML)
。现在,每当 DOM
子树发生修改时,调试器将暂停执行,并且新的 DOM
快照将位于 window.doms
数组的末尾。(无法创建不暂停执行的 DOM
变化断点。)
跟踪调用堆栈
假设你有一个显示加载动画的函数和一个隐藏加载动画的函数,但是在你的代码中,你调用了 show
方法却没有对应的 hide
调用。你如何找到未配对的 show
调用的来源?在 show
方法中使用条件断点中的 console.trace
,运行你的代码,找到 show
方法的最后一个堆栈跟踪,并点击调用者来查看代码:
改变程序行为
通过在具有副作用的表达式上使用,我们可以在浏览器中实时改变程序行为。
例如,你可以覆盖 getPerson
函数的参数 id
。由于 id=1
会被评估为 true
,这个条件断点会暂停调试器。为了防止这种情况发生,可以在表达式末尾添加 false
:
性能分析
你不应该在性能分析中混入诸如条件断点评估时间之类的内容,但如果你想快速而精确地测量某个操作运行所需的时间,你可以在条件断点中使用控制台计时 API
。在你想要开始计时的地方设置一个带有条件 console.time('label')
的断点,在结束点设置一个带有条件 console.timeEnd('label')
的断点。每当你要测量的操作运行时,浏览器就会在控制台记录它花费了多长时间:
根据参数个数进行断点
只有当当前函数被调用时带有 3 个参数时才暂停:arguments.callee.length === 3
当你有一个具有可选参数的重载函数时,这个技巧非常有用:
当前函数调用参数数量错误时
只有当当前函数被调用时参数数量不匹配时才暂停:(arguments.callee.length) !== arguments.length
在查找函数调用站点中的错误时很有用:
跳过页面加载统计使用时间
直到页面加载后的 5 秒后才暂停:performance.now() > 5000
当你想设置一个断点,但只有在初始页面加载后才对暂停执行感兴趣时,这个技巧很有用。
跳过 N 秒
如果断点在接下来的 5 秒内触发,则不要暂停执行,但在之后的任何时候都要暂停:
window.baseline = window.baseline || Date.now(), (Date.now() - window.baseline) > 5000
随时可以从控制台重置计数器:window.baseline = Date.now()
使用 CSS
基于计算后的 CSS
值暂停执行,例如,仅当文档主体具有红色背景时才暂停执行:window.getComputedStyle(document.body).backgroundColor === "rgb(255,0,0)"
仅偶数次调用
仅在执行该行的每一次的偶数次调用时暂停:window.counter = (window.counter || 0) + 1, window.counter % 2 === 0
抽样断点
只在该行执行的随机样本上断点,例如,仅在执行该行的每十次中断点一次:Math.random() < 0.1
Never Pause Here
当你右键点击边栏并选择“Never Pause Here
”时,Chrome
创建一个条件断点,该断点的条件为 false
,永远不会满足。这样做就意味着调试器永远不会在这一行上暂停。
当你想要豁免某行不受 XHR 断点的影响,忽略正在抛出的异常等情况时,这个功能非常有用。
自动实例 ID
通过在构造函数中设置条件断点来为每个类的实例自动分配唯一 ID:(window.instances = window.instances || []).push(this)
然后通过以下方式检索唯一 ID:window.instances.indexOf(instance)
(例如,在类方法中,可以使用 window.instances.indexOf(this)
)。
Programmatically Toggle
使用全局布尔值来控制一个或多个条件断点的开关。
然后通过编程方式切换布尔值,例如:
- 在控制台手动切换布尔值
window.enableBreakpoints = true;
- 从控制台上的计时器切换全局布尔值:
setTimeout(() => (window.enableBreakpoints = true), 5000);
- 在其他断点处切换全局布尔值:
monitor() class Calls
你可以使用 Chrome
的 monitor
命令行方法来轻松跟踪对类方法的所有调用。例如,给定一个 Dog
类:
class Dog {
bark(count) {
/* ... */
}
}
如果我们想知道对 的所有实例进行的所有调用Dog
,请将其粘贴到命令行中:
var p = Dog.prototype;
Object.getOwnPropertyNames(p).forEach((k) => monitor(p[k]));
你将在控制台中得到输出:
function bark called with arguments: 2
如果您想暂停任何方法调用的执行(而不是仅仅记录到控制台),您可以使用debug
而不是monitor
特定实例
如果不知道该类但有一个实例:
var p = instance.constructor.prototype;
Object.getOwnPropertyNames(p).forEach((k) => monitor(p[k]));
当想编写一个对任何类的任何实例执行此操作的函数(而不仅仅是Dog
)时很有用
调用和调试函数
在控制台中调用要调试的函数之前,请调用debugger
. 例如给出:
function fn() {
/* ... */
}
从控制台发现:
debugger; fn(1);
然后“Step int0 next function call
”来调试fn
.
当不想手动查找定义fn
并添加断点或者fn
动态绑定到函数并且不知道源代码在哪里时很有用。
在 Chrome
中,还可以选择debug(fn)
在命令行上调用,调试器将fn
在每次调用时暂停内部执行。
URL 更改时暂停执行
在单页应用程序修改 URL 之前暂停执行(即发生某些路由事件):
const dbg = () => {
debugger;
};
history.pushState = dbg;
history.replaceState = dbg;
window.onhashchange = dbg;
window.onpopstate = dbg;
创建一个暂停执行而不中断导航的版本dbg
是留给读者的练习。
另请注意,当代码直接调用时,这不会处理window.location.replace/assign
,因为页面将在分配后立即卸载,因此无需调试。如果您仍然想查看这些重定向的来源(并调试重定向时的状态),在 Chrome 中您可以使用debug
相关方法:
debug(window.location.replace);
debug(window.location.assign);
读取属性
如果有一个对象并且想知道何时读取该对象的属性,请使用对象 getter
进行调用debugger
。例如,转换{configOption: true}
为{get configOption() { debugger; return true; }}
(在原始源代码中或使用条件断点)。
将一些配置选项传递给某些东西并且想了解它们如何使用时,这很有用。
copy()
可以使用控制台 API 将感兴趣的信息从浏览器直接复制到剪贴板,而无需进行任何字符串截断copy()
。您可能想要复制一些有趣的内容:
- 当前 DOM 的快照:
copy(document.documentElement.outerHTML)
- 有关资源的元数据(例如图像):
copy(performance.getEntriesByType("resource"))
- 一个大的 JSON blob,格式为:
copy(JSON.parse(blob))
- 本地存储的转储:
copy(localStorage)
在禁用 JS 的情况下检查 DOM
在 DOM
检查器中按 ctrl+\ (Chrome/Windows)
可随时暂停 JS
执行。这允许检查 DOM
的快照,而不必担心 JS
改变 DOM
或事件(例如鼠标悬停)导致 DOM
从下方发生变化。
检查难以捉摸的元素
假设您想要检查仅有条件出现的 DOM 元素。检查所述元素需要将鼠标移动到它,但是当你尝试这样做时,它就会消失:
要检查该元素,您可以将其粘贴到控制台中setTimeout(function() { debugger; }, 5000);
:这给了你 5 秒的时间来触发 UI,然后一旦 5 秒计时器到了,JS 执行就会暂停,并且没有任何东西会让你的元素消失。您可以自由地将鼠标移动到开发工具而不会丢失该元素:
当 JS 执行暂停时,可以检查元素、编辑其 CSS、在 JS 控制台中执行命令等。
在检查依赖于特定光标位置、焦点等的 DOM 时很有用。
记录DOM
要获取当前状态下 DOM 的副本:
copy(document.documentElement.outerHTML);
每秒记录一次 DOM 快照:
doms = [];
setInterval(() => {
const domStr = document.documentElement.outerHTML;
doms.push(domStr);
}, 1000);
或者将其转储到控制台:
setInterval(() => {
const domStr = document.documentElement.outerHTML;
console.log("snapshotting DOM: ", domStr);
}, 1000);
监控元素
(function () {
let last = document.activeElement;
setInterval(() => {
if (document.activeElement !== last) {
last = document.activeElement;
console.log("Focus changed to: ", last);
}
}, 100);
})();
寻找元素
const isBold = (e) => {
let w = window.getComputedStyle(e).fontWeight;
return w === "bold" || w === "700";
};
Array.from(document.querySelectorAll("*")).filter(isBold);
或者只是当前在检查器中选择的元素的后代:
Array.from($0.querySelectorAll("*")).filter(isBold);
获取事件监听器
在 Chrome 中,可以检查当前所选元素的事件侦听器:getEventListeners($0)
,例如:
监听元素事件
调试所选元素的所有事件:monitorEvents($0)
调试所选元素的特定事件:monitorEvents($0, ["control", "key"])
点赞收藏支持、手留余香、与有荣焉,动动你发财的小手哟,感谢各位大佬能留下您的足迹。
往期热门精彩推荐
解锁 JSON.stringify() 5 个鲜为人知的功能
面试相关热门推荐
简述 pt、rpx、px、em、rem、%、vh、vw的区别
实战开发相关推荐
Vue 虚拟 DOM 搞不懂?这篇文章帮你彻底搞定虚拟 DOM
移动端相关推荐
Git 相关推荐
更多精彩详见:个人主页
来源:juejin.cn/post/7345297230201716776