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
var externalObj = {key: 'value'}; | |
var items = { | |
obj: { | |
'string prop': 'string val', | |
5: 10, | |
nested: [[3, [5, 2]]], | |
'function': function(){return true;}, | |
reference: externalObj | |
}, |
(function(){ | |
var log = console.log; | |
console.log = function(str) { | |
var css = 'background: linear-gradient(to right, red, yellow, lime, aqua, blue, fuchsia, red); color: white; font-weight: bold;'; | |
var args = Array.prototype.slice.call(arguments); | |
args[0] = '%c' + args[0]; | |
args.splice(1,0,css); | |
return log.apply(console, args); | |
} |
var attempts = 1; | |
function createWebSocket () { | |
var connection = new WebSocket(); | |
connection.onopen = function () { | |
// reset the tries back to 1 since we have a new connection opened. | |
attempts = 1; | |
// ...Your app's logic... |
var above = function(limit){ | |
return function(value){ | |
return value > limit; | |
}; | |
}; | |
var isAbove10 = above(10); | |
console.log(isAbove10(5)); // false | |
console.log(isAbove10(8)); // false |
var typeOf = (function(Object, RegExp){ | |
// WTFPL License - http://en.wikipedia.org/wiki/WTFPL | |
// thanks to @jdalton and @ljharb | |
var toString = Object.prototype.toString, | |
cache = (Object.create || Object)(null); | |
return function typeOf(Unknown) { | |
var asString = typeof Unknown; | |
return asString == 'object' ? ( | |
Unknown === null ? 'null' : ( | |
cache[asString = toString.call(Unknown)] || ( |
// Tested in Chrome 23, Firefox 16, and IE9 in standards mode (i.e. with <!DOCTYPE html>). | |
// Converts '#f00', 'red', 'hsl(0, 100%, 50%)' and 'rgb(255,0,0)' to {r:255,g:0,b:0}. | |
function cssColorToRGB(cssColor) { | |
var s = document.createElement('span') | |
document.body.appendChild(s) | |
s.style.backgroundColor = cssColor | |
var rgb = getComputedStyle(s).backgroundColor | |
document.body.removeChild(s) | |
var m = /^rgb\((\d+), (\d+), (\d+)\)$/.exec(rgb) |
function hang(n) { | |
var x = new XMLHttpRequest(); | |
x.open('GET', 'http://hang.nodester.com/script.js?' + n, false); | |
x.send(); | |
} | |
// usage: hang(2 * 1000); |
(function( window ){ | |
window.watchResize = function( callback ){ | |
var resizing; | |
callback.size = 0; | |
function done() | |
{ | |
var curr_size = window.innerWidth; | |
clearTimeout( resizing ); | |
resizing = null; | |
// only run on a true resize |
var mapLink = "http://maps.google.com/maps?z=12&t=m&q=loc:" + lat + "+" + lon | |
if ($.os.ios && navigator.userAgent.match(/iPhone OS 6_/)) mapLink = "Maps://?q=" + lat + "," + lon | |
if ($.os.android) mapLink = "geo:" + lat + "," + lon + "?z=12&q=" + lat + "," + lon | |
// assumes you have zepto and zepto.detect loaded | |
// also you should use target=_blank on your <a> tags |