IE開發人員工具教程

寫在前面

一直很是谷歌的控制檯，由於我是作前端的，谷歌瀏覽器在我看來是解析JS最快的瀏覽器，所謂的熟能生巧，用熟悉了谷歌瀏覽器以後就特別喜歡用谷歌的控制檯調試腳本、改變樣式、查看HTML、查看資源加載等信息。

在這兒推薦兩篇關於谷歌控制檯怎麼使用的三篇博文（在我看來這三篇博文是我看過介紹谷歌控制檯最佳最全的使用手冊啦）

Chrome 控制檯不徹底指南   http://www.cnblogs.com/Wayou/p/chrome-console-tips-and-tricks.html

Chrome 控制檯console的用法（學了以後對於調試js但是大大有用的哦）  http://www.cnblogs.com/ctriphire/p/4116207.html

 

Chrome控制檯如何調試JavaScript   http://www.cnblogs.com/ctriphire/p/4117370.html

 

進入正題

我這篇文章可不是想介紹Chrome控制檯，作前端最重要的就是要保持各個瀏覽器兼容，即便Chrome控制檯很強大，但你能保證你的全部用戶都能像你同樣是Chrome的忠實粉絲嗎？何況IE瀏覽器在中國市場上的佔據份額那也是至關大的一部分的。

在此介紹一下IE開發人員工具（在沒熟悉使用IE開發人員工具以前，我是打心底裏特別討厭IE的，熟悉使用以後才發現原來IE開發人員工具也是蠻可愛的）

其實從這件事情以後獲得一個結論，不要議論任何人或者任何事很差，要怪只能怪你不懂。對萬事萬物仍是懷着一顆寬容博大的心能讓本身活得灑脫幸福些。（這是費話，你們跳過不看）

簡單介紹

像Chrome控制檯同樣，要打開IE開發人員工具也是按快捷鍵F12便可。

能夠看到，在主工做區中有六個選項卡----HTML、CSS、控制檯、Javascript（腳本）、Profiler（探查器）、網絡。這就是開發工做的主要環境。

一、HTML是默認的選項卡，網頁的源代碼就以DOM樹的形式在其中展現。點擊最左邊的+號，能夠展開/收縮該DOM元素。

二、CSS選項卡主要是列出頁面的樣式，若是當前頁面有多個外部樣式表的話，則能夠從下拉選擇框中進行選擇來查看相應的樣式文件。

三、控制檯選項卡主要是方便開發人員進行日誌記錄或者腳本調試等（如今IE9也支持console.log 不信你在下方的文本框裏面輸入試試），固然你也能夠在裏面輸入多行腳本而後點擊右側的小綠色按鈕（綠色按鈕叫運行腳本）

四、腳本選項卡就很少說了，主要是方便開發人員進行腳本調試。（在下文中將會介紹如何進行腳本調試）

五、探查器選項卡主要用來進行腳本調優和腳本統計等功能，它列出Javascript腳本中每個函數、每個命令運行的次數和所花費的時間，頗有助於找出網頁代碼的性能瓶頸。

六、網絡選項卡通常用來查看資源的加載信息

其它話

你們可能都知道，外部樣式會被頁面上寫的同種樣式複寫而致使外部樣式不生效，在FireBug裏面，樣式選項卡里面是不會顯示出不生效的樣式，這一點我認爲IE是作的比較好的，它會將全部樣式都顯示出來可是對於失效的樣式會使用刪除線的形式，列出被其餘CSS命令取代的樣式設置，能夠很方便地看出樣式之間的繼承關係。

另外小技巧就是顏色取色器，作前端可能你們都會時不時的想要變換樣式，想要改變顏色，在IE開發人員工具裏面，點擊   工具-->顯示顏色取色器   這樣就打開了一個顏色取色工具，以下圖所示，點擊那個取色圖標的按鈕就能夠進行取色了（不過你可不要想着處處取色哦，你能取色的範圍只能是在當前IE瀏覽器裏面哦   你可別想着在桌面或者其它瀏覽器裏面進行取色哦  它尚未強大到跳出當前運行環境去......）

修改網頁中的文字

咱們若是想要修改網頁中的文字以前必須得選擇您要修改的文字，可使用兩種方式進行選擇

一、開發人員工具HTML選項卡第一個圖標 也就是那個鼠標箭頭按鈕，固然你也可使用它的快捷鍵ctrl+b

二、直接在開發人員工具HTML選項卡右側的搜索框中輸入您要選擇的文字，單擊探索按鈕或者按回車鍵便可

選擇好以後，這時它所在的區域會顯示藍色邊框，同時在開發人員工具裏面選中的部分會以高亮顯示，點擊以後將會變成可編輯狀態，修改爲您想要修改的文字，按下回車後，網頁就會自動更新。

修改元素的屬性

運用上面的選中您要修改的元素，右擊-->添加屬性  而後輸入您想增長的屬性 好比說您想讓其佈局居中，輸入align=center(注意這裏面輸入的是align=center而不是align="center"這點跟Chrome控制檯仍是有差別的)

固然上述方法只能在你選擇的元素上面生效。好比說你剛剛修改的元素是td，而你想讓當前表格的全部td都運用居中佈局的話，應該怎麼作呢，選擇好td元素後，切換到右面的屬性選項卡，添加一個屬性，名稱爲"align"，值爲"center"。點擊添加按鈕。

添加完成後，會有一個"將屬性應用於"的提示，選擇好點擊肯定便可。

 

樣式相關操做

若是您要修改元素相關的樣式的話，能夠選中元素後，在其右側的樣式面板中進行操做。（這個操做跟Chrome控制檯同樣的）

若是要爲網頁添加一個新的樣式呢，

一、在CSS選項卡中，隨便選擇一個規則，打開右鍵菜單，在"以前添加規則"和"以後添加規則"中任選一個點擊

二、鍵入樣式名，好比說.price（注意這裏僅僅只是輸入.price  不須要再輸入後面的{}），而後打開右鍵菜單，選擇"添加屬性"。

三、添加規則，好比說border:1px solid red;若是要重複添加規則的話，仍是一樣 右鍵菜單，選擇"添加屬性"......

調試JavaScript

打開腳本選項卡，」啓動調試「按鈕旁邊有一個下拉列表框，裏面加載了你當前頁面所須要用到的樣式，在此切換到你須要調試的腳本上。

在須要調試的腳本行上設置斷點（設置斷點事實上就是點擊一下行首），

點擊」啓動調試「按鈕，當你點擊頁面上的元素觸發了你設置斷點的腳本時，這時會自動跳到斷點處，而後，你還能夠在右面"控制檯"底部的輸入腳本，好比說你設置腳本的函數參數中有一個參數名爲color,若是你在右面"控制檯"底部的輸入"color="#bee7ed""，再點擊"運行腳本"，這時候函數參數color的值就爲你剛剛輸入的"#bee7ed"  (私下以爲這個功能真好)

 

探查器面板的使用

一、選擇"探查器"選項卡，點擊"開始採樣"。

二、在頁面上點擊你想要採樣的元素

三、點擊"中止採樣"，這時就會顯示出全部的代碼運行信息。一共有兩種查看方式，一種是"函數"，另外一種是"調用樹"。

在"函數"查看方式中，能夠看到全部被調用的函數信息，包括調用數量、函數執行所需時長、函數被調用的url、甚至包括具體的文件行號

在"調用樹"查看方式中，能夠看到函數被調用的順序。

 

本博文的參考文獻爲阮大師的  IE8開發人員工具教程   ,這些天看他的博文真心受益很多，才發現人與人以前的差距不是通常的小。對本身說加油。