上次介紹了Firefox的好用plugin Firebug，可以即時預覽HTML/CSS套用後的結果，可是在做網頁設計的時候，不能只顧慮到Firefox，還有為數不少的人在使用IE，用Firebug編輯CSS，想要看IE上的效果如何，還是需要修改完之後，上傳到伺服器上，套用後，才能用IE看到效果，如果IE也有一個可以即時預覽的工具，這樣就方便得多了，在IE7以前是要裝一個微軟的IE Developer Toolbar，或者用其他的Tool Bar(ex：Debug bar)，才能達到，現在IE8就內建了開發者工具了，只要在要看的網頁按下F12，就會跳出一個新視窗，那就是開發者工具了，按一下下圖框起來的地方或按CTRL+P，就可以把開發者工具縮到IE8視窗裡面，變成跟Firebug相似的操作畫面，這樣就可以一邊改屬性一邊看畫面，不用切換來切換去了。

 

 

　　點一下左下角的箭頭，然後再點選要觀察的元素，點選後畫面會用框線把選到的東西框起來，下面的畫面，左分頁是HTML結構，右邊則是套用到的CSS。

 

 

　　左邊的部分是HTML的部分，HTML的部分都是階層化的，可以點選左邊的加號自由的收起或展開，而且都有用顏色區分開來，是標籤還是參數都一目瞭然，如果有要修改的地方，用滑鼠點一下左鍵，就可以修改，網頁上就會即時顯示做了修改的樣子，但是這邊要提醒一點，在這邊做的修改，並沒有真的儲存到伺服器上面去，只是讓你方便預覽修改後的結果，確定好後還是要把修改好的檔案，上傳到伺服器上面，這樣別人才能看到你做的變動。

　　如果有套用CSS樣式的元件，在右邊的分頁會顯示他套用的樣式，並且在重覆套用的CSS樣式上會有刪除線，表示這個屬性修改不會對畫面造成影響，點選要修改的樣示，修改完屬性後，上面的頁面會即時的顯示出修改後的效果，就像下面兩張圖，改了顏色代碼，上面畫面的顏色就馬上跟著改變了，如果想先暫時停用這個樣式，在那行的左邊按一下，把勾勾取消，就可以停止套用這個樣式，當然也是即時可以看到改變。

 

 

 

　　美中不足的地方是如果需要增加新的屬性，得要點選CSS頁籤，切換到CSS分頁後，選擇要修改哪個CSS檔，找到那個類別後，在那邊按右鍵選新增屬性，之後才輸入要增加的屬性，新類別也是如此，在開發者工具中CSS的類別叫作規則。

 

 

　　其他還有很多功能，例如清除快取、驗證你的網頁的內容是不是符合W3C的規範，還有色彩選擇器及尺規，另外還可以暫時停用CSS、JAVA script或是開啟停用快顯封鎖程式，來測試當使用者的瀏覽器，要是無法正常使用CSS、JAVA script等時，網頁是否還能正確的傳達資訊，也可以有JAVA script的偵錯等功能，就請大家在自己摸索囉。

　　最後提醒一下，當修改完後，因為只是讓你檢視效果如何，因此你覺得這樣滿意後，還是要把在伺服器上的CSS樣式表修改完成，才會真的套用到網頁上，可別改完然後很高興的按F5重新整哩，然後就欲哭無淚了，整體而言還是Firebug使用上我比較順手，不過要是要設計以IE為主的網頁的話，這是個很方便的工具，可以減少很多修改上傳的時間。