Firefox has a new grid inspector in the latest version. It is triggered under the "Layout" section of their Elements panel. This panel area provides a few benefits to users:
1. Static enable of overlay. Not requiring a hover on a node
2. Ability to change the overlay color to allow for better contrast
3. Toggle view where lines extend to the end of the viewport to help understand where things can go on the grid.
4. Capability to overlay the grid areas names for seeing where things lay as rendered
It also has a toggle to show line numbers. But I'm not too sure how useful this really can be in development.
I think there are benefits to the static overlay for not only debugging but also to help build instructional aids. Please investigate Firefox's model and emulate it where we can to provide a more robust experience to Chrome's users.
cc Pavel since I recall you having an interest in the cross-browser consistency stuff before.
Comment 1 by jonathan...@gmail.com
, Oct 18 201748.5 KB
48.5 KB View Download