2009年3月，微軟公司釋出了Internet Explorer 8.0版。
目前，在所有瀏覽器中，IE家族的份額佔到2/3，而且，IE 8會捆綁在Windows Vista和Windows 7之中。可以預料，這個軟體將成為使用量最大的軟體之一。
但是，在網頁設計師心目中，IE的名聲一向不好。IE6簡直是網頁設計師的災難，IE7也沒有多少改善。所以，在業界，大家對IE8的釋出並沒有特別的關心。
不過，在使用了幾個星期之後，我要說IE8真是出人意料，它的表現堪稱優秀。我不想比較它與其他瀏覽器誰優誰劣，我只想說IE6一向被詬病的幾個最大的缺陷，IE8都做出了很大的改善，比如對標準的支援、對記憶體的管理、經常崩潰的問題等等。
在所有的改進之中，我最欣賞的莫過於IE8的新附件----開發人員工具（Developer Tools）。它徹底改變了網頁設計師的生活，可以毫不誇大地說，有了這個強大的工具，使得為IE開發網站再也不是一件苦差了。
本文就是根據我自己的學習過程，整理出的一份教程，主要參考了微軟公司的官方文件。目標是隻用幾個最簡單的例子，就幫助你快速掌握它的使用。
開發人員工具的簡介
IE8中附帶了"開發人員工具"，不需要任何安裝。只要IE8能使用，它就能使用。如果你還沒安裝IE8，可以去官方網址下載中文版。這是閱讀這篇教程所必需的。
"開發人員工具"預設是關閉的，必須手動開啟。方法是點選"工具"選單中的"開發人員工具"，或者直接按F12鍵。
開啟以後，就是下面這樣的介面。
可以看到，在主工作區（Primary Content Pane）中有四個選項卡----HTML、CSS、Javascript（指令碼）、Profiler（探查器）。這就是開發工作的主要環境。
HTML是預設的選項卡，每當新開啟一個網頁，網頁的原始碼就以DOM樹的形式在其中展示。點選最左邊的+號，可以展開/收縮該DOM元素。
同Firebug的比較
Firebug是Firefox瀏覽器中使用最廣的開發工具。我的感覺是，對於一些最常見的任務，IE8的"開發人員工具"和Firebug都可以完成，比如網頁元素的樣式分析和Javascript程式碼的除錯。除此之外，兩者各有特點。（關於Firebug，可以參見我翻譯的《Firebug入門指南》。）
根據我的觀察，IE8的"開發人員工具"有三個功能，是Firebug不具備的。
第一，列出失效樣式。
"開發人員工具"會以刪除線的形式，列出被其他CSS命令取代的樣式設定，可以很方便地看出樣式之間的繼承關係。
第二，顏色選取器。
開啟"工具"選單，選擇"顯示顏色選取器"。
原始網頁上，就會顯示一個小的吸管，可以用來檢視每一個畫素點的顏色。
第三，效能除錯的"探查器"（Profiler）功能。
這個功能會列出Javascript指令碼中每一個函式、每一個命令執行的次數和所花費的時間，很有助於找出網頁程式碼的效能瓶頸。
另一方面，Firebug也有一些功能是IE8的"開發人員工具"所不具備的。最重要的就是，"開發人員工具"無法顯示關於HTTP請求的資訊，所以它幾乎無法用來除錯Ajax網頁程式。
當然，IE8的"開發人員工具"和Firebug並不是互相替代的關係，因為兩者都無法安裝在對方的瀏覽器上，所以網頁設計師還是需要同時學會這兩個工具。
範例網頁
以下的內容都需要動手操作。
使用的範例網頁地址為http://www.ruanyifeng.com/webapp/ie8/，請用IE8開啟這個網址。注意，一定要用IE8開啟，其他版本和型號的瀏覽器無效。
範例網頁是一個假想的遊戲軟體銷售列表。使用者勾選單選框，底下的"總價"欄就會自動顯示總金額。我們就用這個網頁，來說明如何使用"開發人員工具"。
例項一：修改網頁中的文字
操作的目標是將"產品"改成"產品描述"。
操作步驟：
1. 開啟"查詢"選單，選擇"單擊選擇元素"。
2. 用滑鼠點選原始網頁上的"產品"兩個字，這時它所在的區域會顯示藍色邊框。
3. 再回到"開發人員工具"，這時"產品"所在的"TH"部分已經高亮顯示了。
4. 將其展開後，可以看到有一行淺色的"文字 - 產品"。
5. 點選"產品"兩個字，就會變成可編輯狀態，將其改為"產品描述"。
6. 按下回車後，網頁就會自動更新，出現"產品描述"。
除了"單擊選擇元素"，另一個選擇元素的方法是使用搜尋。在左上角的搜尋欄中，鍵入"產品"，按回車後，就能直接找到需要修改的文字。
（未完待續）