可以把 IE 6 給丟了 - 網頁測試工具

雖然我不喜歡 Internet Explorer，但它目前在網路世界還是有一半以上的使用率，包含 IE 5 ~ IE 9。這對一個網頁開發者來說，實在太殘忍啦，而且我只不過是個小小的工讀生，最好電腦上同時有裝那麼多版 Internet Explorer 啦...而且應該不可行吧。

不是要嫌棄 Internet Explorer，但 Firefox 的 plug-in 實在是太多太好用了，德國佬開發也都用這味。

測試工具百百種，這次用了 IETester、Firebug、FireQuery 來幫我開發、測試和 debug。

IETester
測試 IE 的好幫手，裝了他同時就可以測試 IE 5 ~ IE 9，除了讚我不能再多說什麼了。再拿 CSS3 ドラえもん Demo 來玩，十多年前的 IE5 ドラえもん 還會流口水 … XD


@IETester v0.4.6


Firebug
現在網頁 html 的結構越來越複雜，html 的原始碼也是密密麻麻。想要快速找到某個網頁上的某個元素，用它就對哩。而且也可以在控制的 panel 裡暫時改變 html 元素的屬性，如 css 的設定。有時候要調行高或是 padding，常常要調好幾次，就一直不停的存檔、預覽、又改、存檔、預覽。

拿自己的 blog 來做個簡單的例子，假設現在我想暫時把最上面 28°Cwhite 的顏色改掉。

安裝完 Firebug 的 plug-in 後， Firefox 右下方會有隻蟲，點一下 Firebug 的 panel 就會出現。接著點選下面的按鈕，就可以在網頁下選擇你想觀察的網頁元素。



隨著滑鼠在網頁上移動，下方的 Firebug 視窗也會動態跟著標示出目前滑鼠選到的網頁元素，右方則顯示目前網頁的 css 設定。



可以發現標題 28°Cwhite 這幾個字是由 <h1> 控制，在右方 css 的設定中，也可以在 h1 中找到屬性 color，目前是設成 #FFFFFF (白色)。因此只要把 #FFFFFF 的值改掉，如 #222222，網頁馬上會改變成你給定的值。



用這個小工具可以很方便的做些細微調整的測試，如顏色、間距…等。待試出滿意的顏色、間距，再直接改檔案，就不用一直改改又預覽的…


FireQuery
如果網頁有用到 jQuery 開發，FireQuery 是一定要的啦。FireQuery 擴充了 Firebug 原本既有的功能，於是在 Firebug 中，只要裝了 FireQeury 後，也可以使用 jQuery 的語法來找網頁的元素 (element)，當然也可以呼叫 jQuery 提供的方法，例如：.css()、.hide()…之類的。

首先切換到主控台，並確認主控台是 Enabled 的。



使用 jQuery 語法前，必須先點選 jQuerify，jQuery 才會被套用在目前的網頁上。若套用成功，網頁會出現下面的訊息。最下方 >>> 的地方，即可輸入 jQuery 的語法。



若沒有 jQuerify，主控台會出現 ReferenceError: jQuery is not defined 的錯誤訊息。若 jQuerify 成功後，再輸入相同的指令，即可找到網頁中所有 <h1> 的元素，滑鼠移到元素名稱上，網頁也會跟著標示出元件的位置範圍。



指令一被執行過，就會從命令列被清掉，如果覺得一直要重複輸入實在很煩，可以點開命令列右下方的紅色小三角形。右邊會出一個小視窗，使用起來方便很多。下面的例子是使用 .css() 來幫 <h1> 加上底線。



FireQuery 用來 debug 是很好用的！