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

Question

Chrome控制台非常棒，我希望将其用作我的应用的开发环境。

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

这可能吗？

感谢。

Answer 1

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

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

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

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



1. 在_messageClicked事件后的某个阶段调用Console模块中的click函数。我在那里放了一个断点，因为我在代码中找到了click - 我最好的猜测，因为我根本不知道代码库。



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

在此函数调用之前，你可以 添加自己的逻辑，以调用被检查窗口中的函数。 Inspector模块引用了chrome.devtools.inspectedWindow。



如果你能在这里工作，那么缺点是你不会拥有Chrome DevTools的任何新功能或更新，所以它实际上只是DevTools的本地修改。如果您能够添加一个不是特定于您自己的代码的更一般的功能，您可以尝试在Chromium Projects站点上建议它，并可能发出拉取请求。

看起来无论如何都会涉及到一些工作。