XRAY Bookmarklet:檢視網頁元素的Box Model資訊

XRAY Bookmarklet

XRAY是一款可安裝於Safari、Firefox、Camino和Mozilla的bookmarklet(書籤小程式,IE版本尚在開發中),使用者可以用它來檢視網頁中各項(X)HTML元素的Box Model資訊。

只要在原始網頁中,將灰色的「XRAY」連結拖曳到瀏覽器的書籤工具列,便安裝完成了。之後點一下Xray書籤即可進入檢視模式,網頁中會出現一個黑色半透明的視窗,此後只要在網頁的任意元素上面點一下,其box model資訊(元素、id、class名稱、hierarchy關係、position、margin、padding等值)便可在該視窗中一覽無遺。

雖然上次介紹過Web Developer Toolbar裡面也有這個功能,但是XRAY的顯示介面除了較精美外,還很貼心地在黑色半透明視窗的右上角作了一個「關閉」的按鈕,讓使用者不必重新整理頁面即可離開此檢視模式。缺點則是不像WDT會以紅色框線預示選取範圍,遇到較複雜的box model,常要點個幾次才能正確找到自己要看的元素。[via Zeldman.com]

相關套件:
CSSViewer
Aardvark