網頁設計

關於網頁設計的技術或相關資訊分享

即時HTML/CSS預覽工具─IE開發者工具

  上次介紹了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相似的操作畫面,這樣就可以一邊改屬性一邊看畫面,不用切換來切換去了。

 

IE Developer Tools overview

 

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

 

IE Developer Tools function buttons

 

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

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

 

IE Developer Tools - css preview

 

IE Developer Tools - css live preview demo

 

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

 

IE Developer Tools - Css realtime editor

 

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

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

Please enable the javascript to submit this form