4

I normally get by quite well using the Chrome Web Developer extension to outline elements, to debug my CSS etc. and when that isn't up to the task, I use the Firefox version (the original, superior version), but what I would really like is a tool that can outline the 'footprint' of an element showing the 'core' element, its padding, its border at real width, and its margins.

Is there such a tool for Chrome, or for Firefox for that matter?

tdammers
  • 20,353
  • 1
  • 39
  • 56
ProfK
  • 49,207
  • 121
  • 399
  • 775

3 Answers3

5

To outline all elements:

* {
  outline: 1px red solid;
}
Dorian
  • 22,759
  • 8
  • 120
  • 116
2

Chrome dev tools have it all:

enter image description here

You can see the actual size in yellow, margins in the darkest blue, paddings in lighter blue, and actual element in the lightest blue. You can then open console and switch to "Metrics" section to see something similar to "Layout" in firebug.

PS. As ex firebug fanboy for many years I can assure you that Chrome dev tools are actually more powerful than firebug right now, you just need to discover all the features.

serg
  • 109,619
  • 77
  • 317
  • 330
  • @smerg, yes, the Chrome tools are really something once you find where asll your needed functions are. They could make the difference between the element blue and the padding blue a bit stronger though. – ProfK Aug 04 '11 at 07:49
  • While I generally like the chrome tools, this is one specific feature which I'm yet to see chrome deliver as well the FF version. Chrome will tell you the area of the element in pixels and show you coloured areas for padding etc ... but I cannot find a way to easily digest the actual values for the various paddings, margins, borders etc. Whereas FF gives you a visual breakdown of the precise value of each of these... which can be invaluable sometimes. – Chris Rogers Mar 18 '13 at 00:26
1

Ironically, IE of all browsers has that built in to the dev tools ('layout' when on the HTML tab).

For Firefox, the excellent Firebug has a similar tool (again, HTML tab, 'layout' on the right-hand side).

Widor
  • 13,003
  • 7
  • 42
  • 64
  • Sorry, I have just got home from a long day, but what is this "HTML tab" you speak of, and how do I find it in Chrome? – ProfK Aug 03 '11 at 16:33
  • Sadly, the Chrome version of Firebug doesn't include the [Layout Panel](http://getfirebug.com/wiki/index.php/HTML_Panel#Layout) but I highly recommend using the FireFox version. – Widor Aug 03 '11 at 17:27