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

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

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

1. 打开控制台工具。
1. 复制下面的代码片段，粘贴到控制台中。根据你的需求修改 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); 
}

1. 按 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 上，也是可能的。