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 中当前选中的元素。这是快速检查组件属性和状态的好方法。