瀏覽網頁時, 常常會想看這些東西是怎麼做的, 或者 平常 開發、Debug 時, 都會需要知道 id、class、CSS 屬性、長寬(px、em) 等等, 都很習慣的 Firebug 開下去看, 這個工具提供另外一種選擇~
此工具是 Bookmarklet, 可以在各個瀏覽器上使用, 需要的資訊都很清楚的標示出來.(寬度 和 高度 的顯示, 比 Firebug 清楚)
XRAY 說明
- 官方網頁: XRAY :: for web developers
- 可直接於官方網頁, 點選 XRAY 的那個連結, 再於那頁到處點點看, 就可以知道效果如何, 資訊都非常清楚~ 🙂
-
註: 此 Bookmarklet 的寫法蠻有趣的, 使用:
loadScript('http://westciv.com/xray/thexray.js');
的方式, 所以若有新版都會自動更新.
使用方式
在此轉載它的 Bookmarklet, 安裝、使用方式如下:
- 直接將此 XRAY 往瀏覽器拖拉到書籤工具列
- 瀏覽其它網頁時點選此 Bookmarklet 即可使用.
相關資源
- MRI :: for web developers - MRI (此連結是 Bookmarklet, 一樣拖上去即可使用.) - 可看到 XPath 的結構