检查 Firefox 的 Web Inspector

Question

是否可以检查 Firefox 的 Web Inspector？我知道是possible to do so in Chrome。我需要在 Firefox 中执行此操作，以便我可以获得其盒模型工具的边距、边框、填充和内容部分的 RGBA 值（参见屏幕截图）。

Answer 1

This answer 概述了如何使用他们的Browser Toolbox 功能检查 Firefox 的 Web Inspector。

如果其他人有兴趣，我还整理了通知 Firefox 盒子模型的相关 CSS：

:root {
  --grey-40: #b1b1b3;
  --grey-50: #737373;
  --grey-70: #38383d;

  --theme-sidebar-background: white;

  --marginbox-color: #fdffdf;
  --borderbox-color: var(--grey-50);
  --paddingbox-color: #e3dcff;
  --contentbox-color: #cff0fb;
  --marginbox-border-color: #d8e60a;
  --contentbox-border-color: #54a9ff;
  --position-border-color: var(--grey-50);
}

:root.theme-dark {
  --theme-sidebar-background: #18181a;

  --marginbox-color: #73764a;
  --borderbox-color: var(--grey-70);
  --paddingbox-color: #6657a6;
  --contentbox-color: #407aa4;
  --marginbox-border-color: #bdca00;
  --contentbox-border-color: #00b8ff;
  --position-border-color: var(--grey-40);
}

.boxmodel-margins {
  border-color: var(--marginbox-color);
  border-style: solid;
  border-width: 22px;
  outline: dashed 1px var(--marginbox-border-color);
}

.boxmodel-borders {
  border-color: var(--borderbox-color);
  border-style: solid;
  border-width: 5px;
}

.boxmodel-paddings {
  border-color: var(--paddingbox-color);
  border-style: solid;
  border-width: 27px;
}

.boxmodel-contents {
  height: 18px;
  outline: dashed 1px var(--contentbox-border-color);
  background-color: var(--contentbox-color);
}