How to see div (etc) rectangles in some browser [closed]

StackOverflow https://stackoverflow.com/questions/19352461

Question

In order to better program and develop my Javascript and HTML5 skills, I would like to visualize the actual bounding box of various HTML commodities. This also would help in debugging and the eventual development of best practices.

Android devices have a handy feature wherein via developer settings one can turn on and off the explicit drawing of bounding rectangles for various layouts and widgets.

Apart from hacking away at Firefox source, does SO know of how I might achieve a similar result for the web? Any browser really will be fine.

enter image description here

Was it helpful?

Solution

On Firefox 24, you can do something similar per-page with Firebug. In Firebug's CSS pane, right-click and select New Rule. The rule is:

html * { border: 1px solid #00f !important }

"html *" selects all elements in the document, and "!important" overrides other stylesheet settings. You could apply this to all pages using a Greasemonkey script; example here

edit This shows you the border and the padding for any particular element but doesn't show that element's margins in the CSS box model. However, the outline on a parent element will include the margins of child elements. For example, on the html

<html><body><div style="width: 200px">
  <p style="margin: 50px;">Lorem ipsum</p></div>
</body></html>

the Firebug technique shows (annotations in purple):

screenshot of results

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top