* What is NodeRectViewer?

[5] [DFN[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

[FIG(bookmarklet)[ [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>
]FIG]

[FIG(bookmarklet)[ [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>
]FIG]

* 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] 似たようなのがあった: [CITE@en-us[XRAY :: for web developers]] ([TIME[2009-01-17 18:41:13 +09:00]] 版) <http://westciv.com/xray/>

[9] [CITE[NodeRect.js]]
([TIME[2009-01-24 16:01:56 +09:00]] 版)
<https://suika.suikawiki.org/~wakaba/wiki/sw/n/NodeRect%2Ejs>