Highlight HTML elements, especially to see the magic paddings

JoseFR · January 16, 2017, 10:14am

Hello,

A highlight of all HTML elements would be good
Especially to see the magic paddings!
And to see the overlap of HTML elements!

Example of the Chrome Inspector:

Example of development tools:

gist.github.com

https://gist.github.com/addyosmani/fd3999ea7fce242756b1

README.md

CSS Layout Debugger
=====================

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

**One-line version to paste in your DevTools**

Use `$$` if your browser aliases it:

~ 108 byte version

This file has been truncated. show original

annotated.js

function(a){                             // Supply a valid selector (e.g '*' for wildcard)
  [].forEach.call(                       // Treat Nodelist as an Array (fewer bytes than Array.prototype.forEach.call(...);)
                                         // Gets the prototype of Array & uses call to execute the function on the NodeList.
    document.querySelectorAll(a),        // Query DOM for elements matching the supplied selector 
                                         // (For 108 bytes, use $$() as Chrome, Safari & FF expose it in DevTools)
    function(b){                  
      b.style.outline = "1px solid #" +  // Set the selector outline 
      (~~(Math.random()*(1<<24)))        // Pick a valid random CSS hex color
      .toString(16)})                    // Convert to a base 16 number. BOOM.
}

index.js

function(a){return [].forEach.call(document.querySelectorAll(a),function(b){b.style.outline = "1px solid #" +(~~(Math.random()*(1<<24))).toString(16)});}

There are more than three files. show original

thank you

Topic		Replies	Views
HTML Tidy and Interactive Cheatsheets! Beginners	0	692	January 7, 2019
How to view active CSS of current element? Styling (CSS)	9	1662	March 17, 2017
CSS-Grid implementation Feature Request feature-request	5	1735	October 7, 2018
Tutorial - Discovering the Pinegrow Web Editor Tutorials	3	409	June 3, 2020
Inspect css feature in Pinegrow? Beginners	1	390	May 11, 2019

Highlight HTML elements, especially to see the magic paddings

Related topics