CODEWITHSUNDEEP
google-chromegoogle-chrome-devtoolschromium
Vitaly Zdanevich
Vitaly Zdanevich

Reputation: 14852

Chrome Devtools: can I make the whole panel transparent?

I not found any solution for that. Maybe this feature not exist - but I think I may be useful. Maybe I can write some css for Devtools?

UPDATE: I tried to add to the body of Devtools opacity: .5 but looks like it is not a solution: Chromium Devtools opacity dark theme

Upvotes: 1

Views: 2773

Answers (2)

Garbee
Garbee

Reputation: 10991

This isn't possible. The panel is essentially its own viewport space. There is no "page underneath" the DevTools. Think of it like when the DevTools is open, whatever space it takes is not given to the page. This is why it triggers media queries when you resize the DevTools.

Changing the DevTools opacity will only give you a white background, not your page.

Upvotes: 1

Gideon Pyzer
Gideon Pyzer

Reputation: 24068

You should be able to customise the panels to be transparent using CSS via a Chrome Extension, using the applyStyleSheet API call. This is done within a JS file embedded in the referenced devtools_page page specified in your manifest file. See Extending DevTools for more information.

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

To find the relevant CSS selectors for the panels, you can inspect Developer Tools by opening it in un-docked mode and doing Cmd + Opt + I (Mac) / F12 (Windows) again.

Take a look at ZeroDarkMatrix Theme for Chrome as a full example theme. You will need to enable experimental features in the browser for this to work. As per the link above:

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

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

Upvotes: 1

Related Questions