Chrome Devtools：我可以让整个面板透明吗？

Question

我没有找到任何解决方案。也许这个功能不存在 - 但我想我可能会有用。也许我可以为Devtools写一些CSS？

更新：我尝试添加到Devtools body的{​​{1}}，但看起来它不是解决方案：

Answer 1

您应该可以使用{@ 1}} API调用，通过Chrome扩展程序使用CSS自定义面板。这是在嵌入在清单文件中指定的引用applyStyleSheet页面中的JS文件中完成的。 有关详细信息，请参阅Extending DevTools。

devtools_page

要查找面板的相关CSS选择器，您可以通过在非停靠模式下打开它并执行 Cmd + 选项 + 来检查开发人员工具（Mac）/ F12 （Windows）。

查看ZeroDarkMatrix Theme for Chrome作为完整示例主题。您需要在浏览器中启用实验性功能才能实现此功能。根据上面的链接：

  

打开chrome：// flags▶启用Developer Tools实验并单击   底部的“立即重新启动”。

     

打开开发人员工具设置▶   实验▶[✔]允许自定义UI主题。

Answer 2

这是不可能的。该面板基本上是它自己的视口空间。 DevTools下面没有“页面”。可以想象，当DevTools打开时，无论是什么空间都没有给予页面。这就是在调整DevTools大小时触发媒体查询的原因。

更改DevTools不透明度只会为您提供白色背景，而不是您的页面。