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
| (function (win, body) { | |
| win.RTCPeerConnection = win.RTCPeerConnection || win.mozRTCPeerConnection || win.webkitRTCPeerConnection; | |
| var rtc = new win.RTCPeerConnection(); | |
| rtc.createDataChannel('localip'); | |
| rtc.onicecandidate = function (e) { | |
| if (e.candidate) { | |
| body.innerHTML += e.candidate.candidate + '<br>'; | |
| } | |
| }; | 
| //Color utils | |
| function getRandomColor() { | |
| for (var a = "0123456789ABCDEF".split(""), b = "#", c = 0; 6 > c; c++) | |
| b += a[Math.floor(16 * Math.random())]; | |
| return b | |
| } | |
| function hexToRGB(hex, alpha) { | |
| let r = parseInt(hex.slice(1, 3), 16), | 
| //Some UI and browser API helpers for different uses, part 1 | |
| //Tiny XHR | |
| function $_$(url, cb, method, post, contenttype) { | |
| var requestTimeout, xhr; | |
| try { | |
| xhr = new XMLHttpRequest(); | |
| } catch (e) { | |
| try { | 
| //Some useful JS utils, part 1 | |
| deepClone: function (obj) { | |
| return JSON.parse(JSON.stringify(obj)) | |
| }, | |
| uniqueArray: function(array) { | |
| return array.filter(function(item, pos, self) { | |
| return self.indexOf(item) == pos; | |
| }); | |
| }, | 
| //Rotate array in JS | |
| function rotateArray (array, times = 1, reverse = false){ | |
| let arr = array.slice(); | |
| for (let i = 0; i < times; i++) { | |
| if(reverse) | |
| arr.unshift(arr.pop()) | |
| else | |
| arr.push(arr.shift()) | |
| } | |
| return arr | 
| //Check if Object or Array is empty | |
| function isEmpty(obj) { | |
| if (Array.isArray(obj) && obj.length > 0) return false; | |
| if (typeof obj === 'object' && Object.keys(obj).length > 0) return false; | |
| return true; | |
| } | 
| //Recursive deep merge JS objects (unlike shallow merge of Object.assign and else) | |
| function deepMerge(target, source) { | |
| let output = Object.assign({}, target); | |
| if (this.isObject(target) && this.isObject(source)) { | |
| Object.keys(source).forEach(key => { | |
| if (this.isObject(source[key])) { | |
| if (!(key in target)) | |
| Object.assign(output, { | |
| [key]: source[key] | 
| let itemIDs = [1, 2, 3, 4, 5]; | |
| itemIDs.reduce((promise, itemID) => { | |
| return promise.then(_ => doSmth()); | |
| }, Promise.resolve()); |