检查Firefox的网络检查员

Question

是否可以检查Firefox的网络检查员？我知道这是可以在chrome 中这样做。我需要在Firefox中这样做，以便可以获取其框模型工具的边框，边框，填充和内容部分的RGBA值（请参阅ScreenShot）。

Answer 1

此答案概述了如何使用其浏览器工具箱功能。

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

: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);
}