Any way to enable displaying CSS styles in inspect element? #9577
-
How can I enable inspect element to display more info such as font family, size, color, etc. just like in chrome devtools. Images below for better understanding. Zen browser - ![]() Chrome - ![]() |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
Hi @spookybytesyou! I'm Dosu and I’m helping the desktop team. Zen browser's devtools have some features disabled by default, but you can enable more advanced tools. To get more detailed CSS inspection (like font family, size, color), try enabling the Browser Toolbox: open about:config, set devtools.debugger.remote-enabled to true, then use the Developer Tools (Ctrl+Shift+Alt+I) to inspect and edit CSS in the Style Editor. This setup lets you inspect elements and see/edit their styles, though the UI and feature set may not match Chrome DevTools exactly. More info and step-by-step instructions are in the official guide. If you want to enable other devtools tabs (like the accessibility tab), you can toggle them on in the devtools settings menu as well discussion. To reply, just mention @dosu. How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other |
Beta Was this translation helpful? Give feedback.
Hi @spookybytesyou! I'm Dosu and I’m helping the desktop team.
Zen browser's devtools have some features disabled by default, but you can enable more advanced tools. To get more detailed CSS inspection (like font family, size, color), try enabling the Browser Toolbox: open about:config, set devtools.debugger.remote-enabled to true, then use the Developer Tools (Ctrl+Shift+Alt+I) to inspect and edit CSS in the Style Editor. This setup lets you inspect elements and see/edit their styles, though the UI and feature set may not match Chrome DevTools exactly. More info and step-by-step instructions are in the official guide.
If you want to enable other devtools tabs (like the accessibility tab…