What can I use to outline HTML elements with visible padding, margin, and borders?

Question

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?

Answer 1

To outline all elements:

* {
  outline: 1px red solid;
}