检查 Firefox 的 Web Inspector

Question

Is it possible to inspect Firefox's Web Inspector? I know it's possible to do so in Chrome . I need to do so in Firefox so that I can obtain the RGBA values for their Margin, Border, Padding and Content sections of their Box Model Tool (see screenshot).

Answer 1

This answer outlined how to inspect Firefox's Web Inspector with their Browser Toolbox feature.

I also collated the relevant CSS that informs Firefox's Box Model if anyone else is interested:

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