注册
web

关于浏览器调试的30个奇淫技巧

这篇文章为大家介绍一下浏览器的调试技巧,可帮助你充分利用浏览器的调试器。


console.log


这个是日常开发中最常用的了如果不知道这个就不是程序员了,这里不多描述了


console.count


计算代码执行的次数他会自动累加


// 例如我代码执行了三次
console.count() // 1 2 3
console.count('执行:') // 执行:1 执行:2 执行:3

console.table


例如,每当你的应用程序在调试器中暂停时,要将 localStorage 的数据转储出来,你可以创建一个 console.table(localStorage) 观察器:


image.png


关于 console.table 的就暂时介绍到这里,下边有一篇详细介绍 console 其他用法的有兴趣的童靴可以去看看。


# 如何优雅的在控制台中使用 console.log


DOM 元素变化后执行表达式


要在 DOM 变化后执行表达式,需要设置一个 DOM 变化断点(在元素检查器中):


image.png


然后添加你的表达式,例如记录 DOM 的快照:(window.doms = window.doms || []).push(document.documentElement.outerHTML)。现在,每当 DOM 子树发生修改时,调试器将暂停执行,并且新的 DOM 快照将位于 window.doms 数组的末尾。(无法创建不暂停执行的 DOM 变化断点。)


跟踪调用堆栈


假设你有一个显示加载动画的函数和一个隐藏加载动画的函数,但是在你的代码中,你调用了 show 方法却没有对应的 hide 调用。你如何找到未配对的 show 调用的来源?在 show 方法中使用条件断点中的 console.trace,运行你的代码,找到 show 方法的最后一个堆栈跟踪,并点击调用者来查看代码:


log1.gif


改变程序行为


通过在具有副作用的表达式上使用,我们可以在浏览器中实时改变程序行为。


例如,你可以覆盖 getPerson 函数的参数 id。由于 id=1 会被评估为 true,这个条件断点会暂停调试器。为了防止这种情况发生,可以在表达式末尾添加 false:


log2.gif


性能分析


你不应该在性能分析中混入诸如条件断点评估时间之类的内容,但如果你想快速而精确地测量某个操作运行所需的时间,你可以在条件断点中使用控制台计时 API。在你想要开始计时的地方设置一个带有条件 console.time('label') 的断点,在结束点设置一个带有条件 console.timeEnd('label') 的断点。每当你要测量的操作运行时,浏览器就会在控制台记录它花费了多长时间:


log3.gif


根据参数个数进行断点


只有当当前函数被调用时带有 3 个参数时才暂停:arguments.callee.length === 3


当你有一个具有可选参数的重载函数时,这个技巧非常有用:


log4.gif


当前函数调用参数数量错误时


只有当当前函数被调用时参数数量不匹配时才暂停:(arguments.callee.length) !== arguments.length在查找函数调用站点中的错误时很有用:


log5.gif


跳过页面加载统计使用时间


直到页面加载后的 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,永远不会满足。这样做就意味着调试器永远不会在这一行上暂停。


image.png


image.png


当你想要豁免某行不受 XHR 断点的影响,忽略正在抛出的异常等情况时,这个功能非常有用。


自动实例 ID


通过在构造函数中设置条件断点来为每个类的实例自动分配唯一 ID:(window.instances = window.instances || []).push(this)


然后通过以下方式检索唯一 ID:window.instances.indexOf(instance)(例如,在类方法中,可以使用 window.instances.indexOf(this))。


Programmatically Toggle


使用全局布尔值来控制一个或多个条件断点的开关。


image.png


然后通过编程方式切换布尔值,例如:



  • 在控制台手动切换布尔值

window.enableBreakpoints = true;


  • 从控制台上的计时器切换全局布尔值:

setTimeout(() => (window.enableBreakpoints = true), 5000);


  • 在其他断点处切换全局布尔值:

image.png


monitor() class Calls


你可以使用 Chromemonitor 命令行方法来轻松跟踪对类方法的所有调用。例如,给定一个 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 元素。检查所述元素需要将鼠标移动到它,但是当你尝试这样做时,它就会消失:


log6.gif
要检查该元素,您可以将其粘贴到控制台中setTimeout(function() { debugger; }, 5000);:这给了你 5 秒的时间来触发 UI,然后一旦 5 秒计时器到了,JS 执行就会暂停,并且没有任何东西会让你的元素消失。您可以自由地将鼠标移动到开发工具而不会丢失该元素:


log7.gif


当 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);
})();

log8.gif


寻找元素


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),例如:


image.png


监听元素事件


调试所选元素的所有事件:monitorEvents($0)


调试所选元素的特定事件:monitorEvents($0, ["control", "key"])


log9.gif



点赞收藏支持、手留余香、与有荣焉,动动你发财的小手哟,感谢各位大佬能留下您的足迹。



11.png


往期热门精彩推荐



# 2024最新程序员接活儿搞钱平台盘点


解锁 JSON.stringify() 5 个鲜为人知的功能


解锁 JSON.stringify() 7 个鲜为人知的坑


如何去实现浏览器多窗口互动



面试相关热门推荐



前端万字面经——基础篇


前端万字面积——进阶篇


简述 pt、rpx、px、em、rem、%、vh、vw的区别



实战开发相关推荐



前端常用的几种加密方法


探索Web Worker在Web开发中的应用


不懂 seo 优化?一篇文章帮你了解如何去做 seo 优化


【实战篇】微信小程序开发指南和优化实践


前端性能优化实战


聊聊让人头疼的正则表达式


获取文件blob流地址实现下载功能


Vue 虚拟 DOM 搞不懂?这篇文章帮你彻底搞定虚拟 DOM



移动端相关推荐



移动端横竖屏适配与刘海适配


移动端常见问题汇总


聊一聊移动端适配



Git 相关推荐



通俗易懂的 Git 入门


git 实现自动推送



更多精彩详见:个人主页


作者:StriveToY
来源:juejin.cn/post/7345297230201716776

0 个评论

要回复文章请先登录注册