时间戳

首页 > 解决方案 > 如何使用 Chrome 浏览器扩展来监控和解析 devtools 控制台中的输出？

google-chrome - 如何使用 Chrome 浏览器扩展来监控和解析 devtools 控制台中的输出？

问题描述

我正在构建一个 chrome 扩展，它应该有助于调试在网站上运行的软件。该软件可以启用调试模式，这将导致使用console.log.

我想使用我的 chrome 扩展来解析控制台消息并在 UI 中显示重要事件以便更快地调试。但是，我没有看到简单地使用API执行此操作的方法。有什么我想念的吗？我应该覆盖该console.log功能吗？我该怎么做呢？

标签： google-chromegoogle-chrome-extensionbrowser-extension

解决方案

有两种方法。

  • 在页面上下文中覆盖 console.log、console.warn 等（这很重要！）。有很多例子（这里是随机的）。在您的情况下，它会更简单，因为您只需调用原始方法并通过 CustomEvent 将参数传输到您的内容脚本（example），这将累积它们。
  • 将chrome.debugger API 与Console.messageAdded或Runtime.consoleAPICalled事件一起使用。这将在整个浏览器中显示一个关于调试器处于活动状态的消息栏，除非您通过使用--silent-debugger-extension-api命令行运行 chrome 将其全局隐藏，但如果您不小心安装了使用 chrome.debugger API 的恶意扩展，这会有些危险。

推荐阅读