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

Question

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

更新：我试图添加到 Devtools body opacity: .5 但看起来这不是一个解决方案：

Answer 1

您应该能够使用 CSS 通过 Chrome 扩展，使用 applyStyleSheet API 调用将面板自定义为透明。这是在清单文件中指定的引用 devtools_page 页面中嵌入的 JS 文件中完成的。有关详细信息，请参阅 Extending DevTools。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'styles.css');
xhr.send();
chrome.devtools.panels.applyStyleSheet(xhr.responseText);

要找到面板的相关 CSS 选择器，您可以检查开发人员工具，方法是在未停靠模式下打开它并执行 Cmd + Opt + I (Mac) / F12 (Windows) 再次.

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

Open chrome://flags ▶ Enable Developer Tools experiments and click "Relaunch Now" at the bottom.

Open developer tools settings ▶ Experiments ▶ [✔] Allow custom UI themes.

Answer 2

这是不可能的。该面板本质上是它自己的视口 space。没有 "page underneath" DevTools。把它想象成当 DevTools 打开时，无论它需要什么 space 都不会提供给页面。这就是它在调整 DevTools 大小时触发媒体查询的原因。

更改 DevTools 不透明度只会给您一个白色背景，而不是您的页面。

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

Chrome Devtools: can I make the whole panel transparent?

google-chrome

google-chrome-devtools

chromium