DevTools 技巧合集二

查找具有特定样式的所有元素

假设你想列出页面上所有绝对定位的元素。或者你想找到所有使用了CSS网格的元素。你会怎么做呢？

一种方法是在控制台工具中运行几行 JavaScript 代码，迭代所有元素并检查它们的计算样式。下面是具体步骤：

• 1. 打开控制台工具。
• 2. 复制下面的代码片段，粘贴到控制台中。根据你的需求修改 whatToFind 对象。

var whatToFind = {
  property: "position",
  values: ["absolute"]
};

var walker = document.createTreeWalker(
  document.documentElement,
  NodeFilter.SHOW_ELEMENT,
  el => {
    const style = getComputedStyle(el)[whatToFind.property];
    return whatToFind.values.includes(style)
      ? NodeFilter.FILTER_ACCEPT
      : NodeFilter.FILTER_SKIP;
  }
);

while (walker.nextNode()) {
  console.log(walker.currentNode); 
}

• 3. 按 Enter 键，完成！在屏幕截图中，页面上所有绝对定位的元素都会被列出。
     

如果你想找到所有使用 CSS 网格的元素，你需要将 whatToFind 对象修改为：

var whatToFind = {
  property: "display",
  values: ["grid", "inline-grid"]
};

为了避免每次都复制或输入此代码，你还可以使用 Chromium 内核浏览器中的片段工具.。

在 iPhone 上查看来自非 Safari 浏览器的控制台日志

使用 about:inspect 特殊页面，您可以在iPhone上运行的Chrome或 Edge 中查看您网站的日志！

这很重要，因为在iPhone上运行Safari的网页调试并不困难，但在 iPhone 上运行 Chrome 或Edge的同一网页却是不可能的，有时页面可能在Safari中运行正常，但在 Chrome 或 Edge 中却不行。

前者需要通过 USB 将 iPhone 连接到 Mac，启用 Mac 上的 WebInspector 工具，并从 Safari 桌面连接到 Safari 移动版。

然而，后者是不可能的。即使 Chrome 和 Edge 在iPhone上使用了 webkit webview，苹果也不允许您从 Mac 连接到这些 webview。由于 webkit 的 webview 版本与驱动 Safari 的 webkit 版本略有不同，您的网页在 Safari 中工作但在Chrome或 Edge 中不工作，即使是在同一台 iPhone 上，也是可能的。

幸运的是，这里有一种方法至少可以查看这些浏览器的控制台日志，这总比没有好：

• 在 iPhone 上的 Chrome 或Edge中，打开一个新标签页并转到 about:inspect。
• 点击开始记录日志。
• 保持此标签页打开并打开一个新标签页。
• 在新标签页中，转到您需要测试的站点，并运行会触发您需要查看的控制台日志的用户场景。
• 返回到之前的标签页。您的日志现在显示在 about:inspect 页面上。
  

  在控制台中快速引用 React 组件

  如果你正在使用 React 并且已经安装了 React DevTools 扩展程序。
  你可以在控制台工具中使用 $r 来引用 React DevTools 中当前选中的元素。这是快速检查组件属性和状态的好方法。