原文链接: https://alan.norbauer.com/articles/browser-debugging-tricks

一系列有用的、不明显的技巧，可帮助您充分利用浏览器的调试器。

高级条件断点

LogPoints

Chrome LogPoints: https://developer.chrome.com/blog/new-in-devtools-73/#logpoints

添加Logpoints入口: Logpoints表达式的格式，其实就是console.log方法的参数，如下:

改变代码的运行行为

通过使用对程序行为有副作用的表达式，我们可以在浏览器中即时更改程序行为。例如，您可以将参数重写为 getPerson 函数 id。由于 id=1 的计算结果为 true，因此该条件断点将暂停调试器。为了防止这种情况，请将 , false 附加到表达式中。

快速而肮脏的性能分析

您不应该将性能分析与条件断点评估时间之类的内容混为一谈，但如果您想要快速准确地测量某项运行所需的时间，则可以在条件断点中使用控制台计时 API。在起点处使用条件 console.time('label') 设置断点，在终点处使用条件 console.timeEnd('label') 设置断点。每次您正在测量的东西运行时，浏览器都会将其花费的时间记录到控制台。

使用css

根据计算出的 CSS 值暂停，例如仅当文档正文具有红色背景色时暂停执行： window.getCompulatedStyle(document.body).backgroundColor === "rgb(255,0,0)"

永远不要在这里暂停

当您右键单击装订线并选择“永不在此暂停”时，Chrome 会创建一个错误且永远不会通过的条件断点。这使得调试器永远不会在此行暂停。当您想要从 XHR 断点中免除一行、忽略正在抛出的异常等时很有用。

Monitor() 类调用

您可以使用 Chrome 的监视器命令行方法轻松跟踪对类方法的所有调用。例如。给定一个类别 Dog

class Dog {
  bark(count) {
    /* ... */
  }
}

/**
* 可添加以下代码
* var p = Dog.prototype;
* Object.getOwnPropertyNames(p).forEach((k) => monitor(p[k]));
* console内会出现如下内容:
* > function bark called with arguments: 2
**/

如果您想暂停任何方法调用的执行（而不是仅仅记录到控制台），您可以使用debugger而不是console.log。

调用和调试函数

在 Chrome 中，您还可以选择在命令行上调用 debug(fn)，调试器将在每次调用时暂停 fn 内的执行。

URL 更改时暂停执行

要在单页应用程序修改 URL 之前暂停执行（即发生某些路由事件）：

const dbg = () => {
  debugger;
};
history.pushState = dbg;
history.replaceState = dbg;
window.onhashchange = dbg;
window.onpopstate = dbg;

另请注意，当代码直接调用 window.location.replace/assign 时，这不会处理，因为页面将在分配后立即卸载，因此无需调试。如果您仍然想查看这些重定向的来源（并调试重定向时的状态），在 Chrome 中您可以调试相关方法：

debug(window.location.replace);
debug(window.location.assign);

调试属性读取

如果您有一个对象并且想知道何时读取该对象的属性，请使用对象 getter 和调试器调用。例如，将 {configOption: true} 转换为 {get configOption() { debugger; return true；} （在原始源代码中或使用条件断点）。当您将一些配置选项传递给某些东西并且您想了解它们如何使用时很有用。

检查难以捉摸的元素

假设您想要检查仅有条件出现的 DOM 元素。检查所述元素需要将鼠标移动到它，但是当你尝试这样做时，它就会消失：

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

当 JS 执行暂停时，您可以检查元素、编辑其 CSS、在 JS 控制台中执行命令等。在检查依赖于特定光标位置、焦点等的 DOM 时很有用。

参考当前选定的元素

控制台中的 $0 是对元素检查器中当前选定元素的自动引用。先前的元素在 Chrome 和 Edge 中，您可以使用 $1 访问上次检查的元素，使用 $2 访问之前检查的元素，等等。

获取事件监听器

在 Chrome 中，您可以检查当前所选元素的事件监听器： getEventListeners($0)，例如

监视元素的事件

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

AndreGeng / AndreGeng.github.io

浏览器不想让你知道的67个奇怪的调试技巧 #66