[工具] 網頁Xray !!! 小心你的眼睛!!!

Xray 是一個網頁設計的小工具，放心~他不會傷了你的眼! 它可以讓你檢視網頁中每個元素的CSS設定，甚麼?! 你說像Firebug? 其實他沒有FireBug那麼樣的功能強大，但是就檢視層面來看，他卻比FireBug還要來的直覺，不多說，先來看看怎麼用比較重要。

首先請各位隨便把一個網加入我的最愛，然後到我的最愛中找到剛剛那個網站，並在該網站上面點選滑鼠右鍵，在快顯選單中選取[內容]，然後在跳出的視窗中把下面連結複製起來貼到該URL欄位中

javascript:function%20loadScript(scriptURL)%20{%20var%20scriptElem%20=%20document.createElement('SCRIPT');%20scriptElem.setAttribute('language',%20'JavaScript');%20scriptElem.setAttribute('src',%20scriptURL);%20document.body.appendChild(scriptElem);}loadScript('http://westciv.com/xray/thexray.js');

 

接著，請切換到[一般]標籤頁，再把你的標題換成[Xray]就完成啦。

 

 

以後要使用的時候，先在你想檢視的網頁中，點及這個[Xray]捷徑，畫面會出現一塊半透明黑色的資訊區塊，你可以隨意的拖動他(這不是重點)

 

接著用滑鼠點到你想看的網頁區域，這範例我是點到那個小人頭(紅箭頭處)

然後畫面就可以看到有他這個區塊的周圍資訊(距離)

 

接著我們再看左手邊這個一開始就出現的半透明黑色區塊，他分為三列，第一列是你點選區塊的ID名稱及類別名稱，第二列是HTML的層次，第三列則是所有CSS的設定資訊。

 

 

 

 

 

講完了~就那麼簡單~還不快去用!!