網頁開發工具: 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 即可使用.

相關資源


關於 Tsung

對新奇的事物都很有興趣, 喜歡簡單的東西, 過簡單的生活.
本篇發表於 News-Technology。將永久鏈結加入書籤。

網頁開發工具: XRAY - Bookmarklet 有 1 則回應

  1. archer 說道:

    謝啦~這個東西比 firebug 單純的多,但對我卻很好用 ^ ^

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料