4

In Firefox when you hover over a DOM element using the inspector it's marked by a transparent box with a dashed border.

Firefox DOM inspector

In chrome and firebug the DOM element is highlighted, showing the content area, padding, border, and margin all in different translucent colors (Firebug also does this).

Chrome DOM inspector

Is there a userChrome.css tweak to add this behavior to the default Firefox DOM inspector? Or perhaps a lightweight addon that extends the inspector?

Update:

I see there is currently an open issue for this that is already assigned and being worked on. There's even a preliminary screen shot!

Screenshot

1

It looks as if this feature only comes with Firefox 30.

https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector#Selecting_elements

| improve this answer | |
  • Yep! I've been following the issue for a little over a half a year now, it was just marked as fixed a month or two ago! :D – Evan Purkhiser Apr 29 '14 at 17:08
0

Use this add on, it will let you colorize the DOM firefox , customize ,add many other effects

Download it here: https://addons.mozilla.org/en-US/firefox/addon/stylish/

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url("chrome://browser/content/devtools/markup-view.xhtml") {

    body { background: white !important }

}

The above is a sample for the background only. Another css example is one below.


/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

* {
  padding: 0;
  margin: 0;
}

body {
  color: hsl(0,0%,50%);
  background: black !important;
}

.text {
  color: white !important;
}

.newattr {
  cursor: pointer;
}

.selected {
  background-color: hsl(0,0%,90%);
}

/* Give some padding to focusable elements to match the editor input
 * that will replace them. */
span[tabindex] {
  display: inline-block;
  padding: 1px 0;
}

li.container {
  position: relative;
  padding: 2px 0 0 2px;
}

.codebox {
  padding-left: 14px;
}

.expander {
  position: absolute;
  -moz-appearance: treetwisty;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
}

.expander[expanded] {
  -moz-appearance: treetwistyopen;
}

.more-nodes {
  padding-left: 16px;
}

.styleinspector-propertyeditor {
  border: 1px solid #CCC;
}


}

| improve this answer | |
  • I'm actually talking about the 'element inspector' that shows you the outline of the selected element in the actual webpage. – Evan Purkhiser Sep 26 '13 at 8:36
  • Please read our formatting help and familiarize yourself with formatting code. There's a preview below the editor that allows you to check how the post will look like. – slhck Sep 26 '13 at 8:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.