網頁開發工具: XRAY - Bookmarklet

瀏覽網頁時, 常常會想看這些東西是怎麼做的, 或者 平常 開發、Debug 時, 都會需要知道 id、class、CSS 屬性、長寬(px、em) 等等, 都很習慣的 Firebug 開下去看, 這個工具提供另外一種選擇~

此工具是 Bookmarklet, 可以在各個瀏覽器上使用, 需要的資訊都很清楚的標示出來.(寬度 和 高度 的顯示, 比 Firebug 清楚)

XRAY 說明

• 官方網頁: XRAY :: for web developers
• 可直接於官方網頁, 點選 XRAY 的那個連結, 再於那頁到處點點看, 就可以知道效果如何, 資訊都非常清楚~ 🙂
• 註: 此 Bookmarklet 的寫法蠻有趣的, 使用: loadScript('http://westciv.com/xray/thexray.js'); 的方式, 所以若有新版都會自動更新.

使用方式

在此轉載它的 Bookmarklet, 安裝、使用方式如下:

1. 直接將此 XRAY 往瀏覽器拖拉到書籤工具列
2. 瀏覽其它網頁時點選此 Bookmarklet 即可使用.

相關資源

• MRI :: for web developers - MRI (此連結是 Bookmarklet, 一樣拖上去即可使用.) - 可看到 XPath 的結構

作者: Tsung

對新奇的事物都很有興趣, 喜歡簡單的東西, 過簡單的生活. 檢視「Tsung」的全部文章