英文:
How can I change the highlighting Firefox Dev Tools uses to show spacing around an element?
问题
Firefox开发者工具在网页上显示间距（例如内边距/外边距）为彩色轮廓。我发现这样很难看清楚，想知道是否可能恢复到Firefox开发者工具以前使用的“块状样式”？
我知道Chrome使用这种“块状样式”，但我更愿意继续在Firefox中开发。
Firefox开发者工具：
Chrome开发者工具：
英文:
Firefox developer tools shows spacing on a web page (e.g. padding/margin) to be a coloured outline. I find this really hard to actually see and wonder if it is possible to revert to the "block style" that Firefox developer tools used to use?
I know Chrome uses this "block style" but I would prefer to continue developing in Firefox.
Firefox developer tools:
Chrome developer tools:
答案1
得分: 2
"block style" aka the box model highlighter is controlled via the prefers-reduced-motion media query since Firefox 111.
That means, if you have your OS settings set to reduce or avoid motions, the highlighter is only shown as an outline around the element.
E.g. in Windows 11, you can change that setting by going to Settings > Accessibility > Visual effects and toggle the setting Animation effects.
Further note, that in Firefox 113 the normal box model highlighters were brought back and an option "Use simpler highlighters with prefers-reduced-motion" was introduced in the Settings panel (accessible via <kbd>F1</kbd> or the DevTools main menu > Settings) to toggle between the two highlighter versions.
英文:
The display of the "block style" aka the box model highlighter is controlled via the prefers-reduced-motion media query since Firefox 111.
That means, if you have your OS settings set to reduce or avoid motions, the highlighter is only shown as an outline around the element.
E.g. in Windows 11, you can change that setting by going to Settings > Accessibility > Visual effects and toggle the setting Animation effects.
Further note, that in Firefox 113 the normal box model highlighters were brought back and an option "Use simpler highlighters with prefers-reduced-motion" was introduced in the Settings panel (accessible via <kbd>F1</kbd> or the DevTools main menu > Settings) to toggle between the two highlighter versions.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论