DevTools 技巧合集一

利用人工智能来解释控制台错误

Edge DevTools允许我们使用Microsoft Copilot AI助手来解释控制台工具中的错误和警告。

有时候，控制台错误可能很难理解和修复。现代AI助手（如Microsoft Copilot）所使用的大型语言模型经过了大量的数据训练，它们有时能够推理错误并提供有用的解释。

Edge DevTools中的控制台现已链接到Edge中的Copilot AI助手侧边栏。要解释Edge DevTools中的错误：

• 确保在Microsoft Edge的右上角显示了Copilot图标。如果没有，请转到“设置和更多（…）”>“设置”>“侧边栏”>“Copilot”以启用它。
• 确保您已使用个人Microsoft帐户登录到Microsoft Edge。
• 在控制台工具中找到您感兴趣的错误。
• 单击错误消息旁边的“询问Copilot：“解释此错误””按钮。

Copilot侧边栏出现，您的消息发送到AI助手，并且您将收到一个响应，希望它能帮助您理解错误。

列出整个页面上的所有事件监听器

当您不了解一个代码库时，可能很难知道从哪里开始，并且哪些元素正在监听哪些事件。

在基于Chromium的浏览器中，控制台工具带有一个名为getEventListeners的好用的实用函数，它返回附加到给定元素的所有监听器。如果我们将此功能与$$实用函数结合使用，我们可以获取页面上所有元素及其监听器的列表。

以下代码片段将返回一个包含元素及其监听器的对象数组。它还过滤掉所有没有附加监听器的元素。

$$("*").map(el => {
  return { el, listeners: getEventListeners(el) };
}).filter(data => {
  return Object.keys(data.listeners).length;
});

因此，要列出页面上所有具有监听器的元素：

• 1. 打开控制台工具，Windows或Linux上按Ctrl+Shift+J，macOS上按Command+Option+J。
• 2. 在控制台中粘贴上面的代码片段，然后按Enter键。
• 3. 控制台中显示了所有具有监听器的元素列表。
     

在控制台中使用受用户手势限制的API

某些Web API 受到用户手势的限制。这意味着它们只能作为用户操作的结果调用，比如在点击事件处理程序中。

例如，你不能简单地通过在JavaScript代码中使用document.body.requestFullscreen()来将你的网站设置为全屏模式。只有在用户发起操作时才允许执行此操作。这是出于安全考虑，这是合理的。

然而，当您需要在DevTools的控制台工具中测试受到用户手势限制的API时，可能会很麻烦。

幸运的是，Chrome、Edge 和 Safari 都可以做到：

• 在 Chrome 或Edge中，默认情况下就是这样。您在控制台中运行的所有 JavaScript 代码都被视为用户操作。但是，您可以禁用此功能：
  • 前往控制台工具。
  • 单击工具右上角的控制台设置按钮。
  • 清除“将代码评估视为用户操作”设置。
• 在 Safari 中：
  • 前往控制台工具。
  • 在工具栏中勾选模拟用户手势设置。
    
    现在，您可以在控制台中使用和测试任何API，包括通常需要用户手势的那些。