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
// Restify server config here | |
var server = restify.createServer({ | |
name: 'restify-test', | |
version: '1.0.0', | |
}); | |
// ... | |
// Connect config here | |
var connectApp = connect() |
<NotepadPlus> | |
<UserLang name="LESS" ext="less" udlVersion="2.0"> | |
<Settings> | |
<Global caseIgnored="yes" allowFoldOfComments="no" forceLineCommentsAtBOL="no" foldCompact="no" /> | |
<Prefix Keywords1="no" Keywords2="no" Keywords3="yes" Keywords4="yes" Keywords5="yes" Keywords6="no" Keywords7="no" Keywords8="no" /> | |
</Settings> | |
<KeywordLists> | |
<Keywords name="Comments" id="0">00// 01 02 03/* 04*/</Keywords> | |
<Keywords name="Numbers, additional" id="1"></Keywords> | |
<Keywords name="Numbers, prefixes" id="2"># , rgb, px, em</Keywords> |
By: @BTroncone
Also check out my lesson @ngrx/store in 10 minutes on egghead.io!
Update: Non-middleware examples have been updated to ngrx/store v2. More coming soon!
Table of Contents
/* | |
Usage: | |
* Paste this into your dev tools console (or even better as a snippet) | |
* It will parse the page and find all the things that create a new stacking context | |
and dump some info about them to the console. It will also outline them on the page. | |
* This is pretty rough and probably misses heaps of bugs and edge cases. | |
*/ | |
function highlight(el) { |