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
/* bling.js */ | |
window.$ = document.querySelectorAll.bind(document); | |
Node.prototype.on = window.on = function (name, fn) { | |
this.addEventListener(name, fn); | |
} | |
NodeList.prototype.__proto__ = Array.prototype; |
// once in the headers | |
defineMetaEvent('Namespace','Click'); | |
// then when you need it | |
document.body.onNamespaceClick.add(function(e) { /*...*/ }); | |
document.body.onNamespaceClick.clear(); |
{ | |
"name": "my-app", | |
"version": "1.0.0", | |
"description": "My test app", | |
"main": "src/js/index.js", | |
"scripts": { | |
"jshint:dist": "jshint src/js/*.js'", | |
"jshint": "npm run jshint:dist", | |
"jscs": "jscs src/*.js", | |
"browserify": "browserify -s Validating -o ./dist/js/build.js ./lib/index.js", |
var url = "http://example.com:3000/pathname/?search=test#hash"; | |
var _a = new URL(url); | |
_a.protocol; // => "http:" | |
_a.hostname; // => "example.com" | |
_a.port; // => "3000" | |
_a.pathname; // => "/pathname/" | |
_a.search; // => "?search=test" | |
_a.hash; // => "#hash" |