4/06/2007

IE Developer Toolbar 介紹

Beta 3 免費下載網址:
http://www.microsoft.com/downloads/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en

微軟有個好用的開發工具” Internet Explorer Developer Toolbar”, 目前是Beta 3版提供免費下載(565KB). 這Toolbar下載安裝之後, 會掛在IE瀏覽器工具列中(如下圖所示). 系統需求為Windows 2000; Windows Server 2003; Windows Vista; Windows XP, 和IE6以上版本. 安裝過舊版本的要先移除舊版再安裝新版.


這個Developer Toolbar的主要功能是幫助開發人員快速檢視Html網頁結構; 顯示表格, 圖檔, Tag名稱; 顯示Div / Id / Class / 快速鍵 / Tab鍵設定名稱及位置; 顯示有效無效連結的路徑; 尋找特定元素; 關閉Script, Css和圖檔的功能選項; 設定800/1024/1280的螢幕寬度檢視(大螢幕才有作用); 還有提供該頁面的Html, Css和國外版無障礙檢測連結服務.

以往當設計師拿別人製作的網頁修改時, 因為習慣不同, 網頁的寫法和設定也會不同, 通常會藉由Dreamweaver檢視Html結構及Css設定的Div或Cass/Id名稱, 但功能仍然有限. 對程式人員來說, 如果設計師的Css寫的很複雜, 註解又標示不清楚時, 要辨識就更困難了. 這工具就提供一個方便之門, 不需Dreamweaver就能直接在IE上面檢視所有的網頁設定.

以下是幾個應用的範例說明:

這是選擇特定元素, 勾選這個項目之後, 在網頁上點選的任何元素的結構, 連結路徑和Css屬性質都能顯示出來.

這是選擇顯示網頁上所有Class和Id設定名稱和位置.


這是連到W3C提供的Xtml驗證服務, 這項驗證會根據網頁宣告的種類 (如Html 4.01或Xhtml 1.0等) 驗證網頁結構的寫法是否符合標準. 驗證頁面上方會顯示驗證是否有誤, 檔名, 編碼和宣告種類, 如果有誤, 會一一條列在網頁下方. 這個範例表示有4個錯誤, 分別是3個連結項目的Tag包覆錯誤 (Span裡面不能包覆Div); 另一個是Form應該要有Action設定.


這是連到W3C提供的Css驗證服務, 是驗證Css寫法是否正確, 數值設定是否有效, 字體顏色和背景色設定反差是否夠大, 容易辨識等. 這項服務如果是中文網頁, 會有簡體中文顯示驗證結果.



這是外國版的無障礙檢測. WAI (Web Accessibility Initiative)是W3C的檢測標準, 分3級, 台灣版的政府無障礙檢測應該是源自於這裡; Section 508是美國聯邦政府的檢測標準, 不管選WAI或Section 508, 都會連到同一個網頁作檢測, 然後在該網頁選擇想要檢測的項目.


但是這些檢測項目是有必要的嗎? 是否必要是政策問題 (政府的政策或公司的政策), 不過, 身為網頁設計人員是應該了解有這些檢測項目, 並且能試著使用看看, 或者試著開始從Web標準 (Web Standard) 的方向設計網頁. Web標準是W3C一直在推動的, 目的是希望透過標準制定, 讓所有除了電腦的平台都能正常瀏覽網頁, 例如: 數位電視, PDA, 手機等. 坊間有Css書籍會標示Web標準設計, 其實Web標準不單是Css, 而是標準的網頁結構(如Xhtml)加上可以從結構中抽離的Css設定. 關於Web標準會在往後的文章再詳細介紹. 今天就先將這個好用的工具介紹給大家!

2 則留言:

randylien 提到...

哇~看到你的介紹,驚為天人,雖然FireFox的FireBug已經很方便了,但是如果IE也有這種觀察DOM跟CSS的工具就真的太棒了!!!
馬上裝來用看看,最近因為工作+興趣開始在弄CSS排版跟UI的東西,真的是如獲至寶呀!

Jane 提到...

IE Developer Toolbar 似乎只用來檢視網頁結構和加進各項驗證工具, 少了FireBug 的"除錯"功能, 但是以設計的觀點看, IE 的比較好用!