将自定义点击事件绑定到 chrome 控制台

Question

Chrome 控制台很棒，我希望将它用作我的应用程序的开发环境。

我想针对我的特定用例进一步自定义它。例如，当在控制台中单击 DOM 元素的 javascript 对象版本时，自动检查 DOM 元素的方式相同，我想在 main 中触发自定义函数页。

这可以吗？

谢谢。

Answer 1

根据我的理解，Chrome DevTools API 不会公开任何允许您在扩展中修改控制台模块行为的内容。

如果您需要一个特定的行为只为您自己，您可以分叉存储库并使用代码。

作为学习任务，我花了一点时间调查。我通过在未停靠模式下打开 DevTools，然后打开另一个实例来检查 DevTools 代码。我在代码中找到了处理控制台模块 click 事件的区域。

1. 在当前页面中，我创建了一个包含两个 DOM 元素的对象，因此您可以看到悬停将检查这些元素，单击实际上会在“元素”选项卡中选择它们。

2. 控制台模块中的 _messageClicked 函数在 click 事件后的某个阶段被调用。我在那里放置了一个断点，因为我在代码中发现 click - 我最好的猜测，因为我根本不知道代码库。

3. 跳出这个函数后，我们发现 mouseClicked 也在 Inspector 模块中处理它，被调用的 reveal 函数应该是它实际执行检查逻辑的地方。

您可以可能在此函数调用之前添加您自己的逻辑以调用检查的window中的函数。 Inspector 模块引用了 chrome.devtools.inspectedWindow.

如果你能在这里得到一些东西，缺点是你不会有任何 Chrome DevTools 的新功能或更新，所以它实际上只是 DevTools 的本地修改。如果您能够添加一个不特定于您自己的代码的更通用的功能，您可以尝试在 Chromium Projects 网站上提出建议，并可能提出拉取请求。

似乎无论哪种方式都会涉及一些工作。