What is NodeRectViewer?

[5] NodeRectViewer displays boxes (e.g. padding box, border box, and so on) displayed within your browser. Execute the bookmarklet below and see what occurs.

NodeRectViewer bookmarklets

[2] Non-debug mode (scripts are cached)

javascript:%0A%0Aif%20%28!window.NodeRectViewer%29%20window.NodeRectViewer%20%3D%20%7B%7D%3B%0A%0ANodeRectViewer.DEBUG%20%3D%20false%3B%0A%0Avar%20s%20%3D%20document.createElement%20%28%27script%27%29%3B%0As.src%20%3D%20%22http%3A%2F%2Fsuika.fam.cx%2Fwww%2Fcss%2Fnoderect%2FNodeRectViewer.js%22%3B%0Adocument.body.appendChild%20%28s%29%3B%0A%0Avoid%20%280%29%3B%0A%0A%2F*%0A%0AAuthor%3A%20Wakaba%20%3Cw%40suika.fam.cx%3E%0ALicense%3A%20Public%20Domain.%0A%0A*%2F%0A

[1] Debug mode (scripts are not cached)

javascript:%0A%0Aif%20%28!window.NodeRectViewer%29%20window.NodeRectViewer%20%3D%20%7B%7D%3B%0A%0ANodeRectViewer.DEBUG%20%3D%20true%3B%0A%0Avar%20s%20%3D%20document.createElement%20%28%27script%27%29%3B%0As.src%20%3D%20%22http%3A%2F%2Fsuika.fam.cx%2Fwww%2Fcss%2Fnoderect%2FNodeRectViewer.js%3F%22%0A%20%20%20%20%2B%20Math.random%20%28%29%3B%0Adocument.body.appendChild%20%28s%29%3B%0A%0Avoid%20%280%29%3B%0A%0A%2F*%0A%0AAuthor%3A%20Wakaba%20%3Cw%40suika.fam.cx%3E%0ALicense%3A%20Public%20Domain.%0A%0A*%2F%0A

Snapshot

[7] https://suika.suikawiki.org/www/css/noderect/nrv-snapshot-1.png

Implementation

[4] User interface part is implemented in https://suika.suikawiki.org/www/css/noderect/NodeRectViewer.js.

[3] Core part are implemented as separate JavaScript library: NR.js.

Supported browsers

[6] All of major browser engines are supported.

関連

[8] 似たようなのがあった: XRAY :: for web developers ( 版) http://westciv.com/xray/

[9] NodeRect.js ( 版) https://suika.suikawiki.org/~wakaba/wiki/sw/n/NodeRect%2Ejs