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
C:\Users\jinwei>npm install totoro | |
npm http GET https://registry.npmjs.org/totoro | |
npm http 304 https://registry.npmjs.org/totoro | |
npm http GET https://registry.npmjs.org/commander/1.2.0 | |
npm http GET https://registry.npmjs.org/express/3.1.0 | |
npm http GET https://registry.npmjs.org/colorful/2.1.0 | |
npm http GET https://registry.npmjs.org/tracer/0.5.1 | |
npm http GET https://registry.npmjs.org/request/2.21.0 | |
npm http GET https://registry.npmjs.org/socket.io-client/0.9.11 |
http://10.129.157.3:88/s/2.3/projects/profile/styles/applist.css |
function numberOfDays(year, month) { | |
var d = new Date(year, month, 0); | |
return d.getDate(); | |
} |
.flex-container { | |
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ | |
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ | |
display: -ms-flexbox; /* TWEENER - IE 10 */ | |
display: -webkit-flex; /* NEW - Chrome */ | |
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ | |
width: 100%; | |
} |
// Use Gists to store code you would like to remember later on | |
console.log(window); // log the "window" object to the console |
<script> | |
if (Math.max(document.documentElement.clientWidth, window.innerWidth || 0) > 820) { | |
document.documentElement.className += "v27" | |
} | |
</script> |
//works ok ie8+ | |
.middle { | |
width: 600px; height: 400px; | |
position: absolute; | |
left: 0; | |
top: 0; | |
right: 0; | |
bottom: 0; | |
margin: auto; | |
} |
border-color: rgba(0, 0, 0, .3); | |
background-clip: padding-box; |
<meta name="google" value="notranslate"> |