雖然Web Developer Toolbar這個套件已經非常好用了，但是很多時候，能夠直接按一下就啟用的bookmarklet（書籤工具）還是稍稍方便一些，並且也兼具了跨瀏覽器的優點。

Allen Jardine製作的Design Bookmarklet一共有四種功能，如果你和我一樣，做網頁時，有非得把各種元素對齊不可的強迫症，那麼這個工具將非常實用：

1. Grid：可依需求直接輸入數據（尺寸、欄位數和列數、邊距等）在頁面中產生格線。
2. Rule：在上方和左側顯示尺規，並且可以拖曳出準線（guides）。
3. Unit：在頁面中測量任意兩點間的距離。
4. Crosshair：隨滑鼠游標出現的十字瞄準線，並提示座標。

上述的四項功能可以同時使用，介面也很美觀。這個小工具目前支援的瀏覽器有：Internet Explorer 7、Firefox 2+、Safari 2.0.4+、Opera 9.2+。至於為什麼沒有支援IE 6呢？Allen說，因為這是給開發人員和設計師用的呀。

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