寫在前面
一直非常谷歌的控制台，因為我是做前端的，谷歌瀏覽器在我看來是解析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（探查器）、網絡。這就是開發工作的主要環境。
1、HTML是默認的選項卡，網頁的源代碼就以DOM樹的形式在其中展示。點擊最左邊的+號，可以展開/收縮該DOM元素。
2、CSS選項卡主要是列出頁面的樣式，如果當前頁面有多個外部樣式表的話，則可以從下拉選擇框中進行選擇來查看相應的樣式文件。
3、控制台選項卡主要是方便開發人員進行日志記錄或者腳本調試等（現在IE9也支持console.log 不信你在下方的文本框里面輸入試試），當然你也可以在里面輸入多行腳本然后點擊右側的小綠色按鈕（綠色按鈕叫運行腳本）
4、腳本選項卡就不多說了，主要是方便開發人員進行腳本調試。（在下文中將會介紹如何進行腳本調試）
5、探查器選項卡主要用來進行腳本調優和腳本統計等功能，它列出Javascript腳本中每一個函數、每一個命令運行的次數和所花費的時間，很有助於找出網頁代碼的性能瓶頸。
6、網絡選項卡一般用來查看資源的加載信息
其它話
大家可能都知道，外部樣式會被頁面上寫的同種樣式復寫而導致外部樣式不生效，在FireBug里面，樣式選項卡里面是不會顯示出不生效的樣式，這一點我認為IE是做的比較好的，它會將所有樣式都顯示出來但是對於失效的樣式會使用刪除線的形式，列出被其他CSS命令取代的樣式設置，可以很方便地看出樣式之間的繼承關系。
另外小技巧就是顏色取色器，做前端可能大家都會時不時的想要變換樣式，想要改變顏色，在IE開發人員工具里面，點擊 工具-->顯示顏色取色器 這樣就打開了一個顏色取色工具，如下圖所示，點擊那個取色圖標的按鈕就可以進行取色了（不過你可不要想着到處取色哦，你能取色的范圍只能是在當前IE瀏覽器里面哦 你可別想着在桌面或者其它瀏覽器里面進行取色哦 它還沒有強大到跳出當前運行環境去......）
修改網頁中的文字
我們如果想要修改網頁中的文字之前必須得選擇您要修改的文字，可以使用兩種方式進行選擇
1、開發人員工具HTML選項卡第一個圖標 也就是那個鼠標箭頭按鈕，當然你也可以使用它的快捷鍵ctrl+b
2、直接在開發人員工具HTML選項卡右側的搜索框中輸入您要選擇的文字，單擊探索按鈕或者按回車鍵即可
選擇好之后，這時它所在的區域會顯示藍色邊框，同時在開發人員工具里面選中的部分會以高亮顯示，點擊之后將會變成可編輯狀態，修改成您想要修改的文字，按下回車后，網頁就會自動更新。
修改元素的屬性
運用上面的選中您要修改的元素，右擊-->添加屬性 然后輸入您想增加的屬性 比如說您想讓其布局居中，輸入align=center(注意這里面輸入的是align=center而不是align="center"這點跟Chrome控制台還是有差異的)
當然上述方法只能在你選擇的元素上面生效。比如說你剛剛修改的元素是td，而你想讓當前表格的所有td都運用居中布局的話，應該怎么做呢，選擇好td元素后，切換到右面的屬性選項卡，添加一個屬性，名稱為"align"，值為"center"。點擊添加按鈕。
添加完成后，會有一個"將屬性應用於"的提示，選擇好點擊確定即可。
樣式相關操作
如果您要修改元素相關的樣式的話，可以選中元素后，在其右側的樣式面板中進行操作。（這個操作跟Chrome控制台一樣的）
如果要為網頁添加一個新的樣式呢，
1、在CSS選項卡中，隨便選擇一個規則，打開右鍵菜單，在"之前添加規則"和"之后添加規則"中任選一個點擊
2、鍵入樣式名，比如說.price（注意這里僅僅只是輸入.price 不需要再輸入后面的{}），然后打開右鍵菜單，選擇"添加屬性"。
3、添加規則，比如說border:1px solid red;如果要重復添加規則的話，還是同樣 右鍵菜單，選擇"添加屬性"......
調試JavaScript
打開腳本選項卡，”啟動調試“按鈕旁邊有一個下拉列表框，里面加載了你當前頁面所需要用到的樣式，在此切換到你需要調試的腳本上。
在需要調試的腳本行上設置斷點（設置斷點事實上就是點擊一下行首），
點擊”啟動調試“按鈕，當你點擊頁面上的元素觸發了你設置斷點的腳本時，這時會自動跳到斷點處，然后，你還可以在右面"控制台"底部的輸入腳本，比如說你設置腳本的函數參數中有一個參數名為color,如果你在右面"控制台"底部的輸入"color="#bee7ed""，再點擊"運行腳本"，這時候函數參數color的值就為你剛剛輸入的"#bee7ed" (私下覺得這個功能真好)
探查器面板的使用
1、選擇"探查器"選項卡，點擊"開始采樣"。
2、在頁面上點擊你想要采樣的元素
3、點擊"停止采樣"，這時就會顯示出所有的代碼運行信息。一共有兩種查看方式，一種是"函數"，另一種是"調用樹"。
在"函數"查看方式中，可以看到所有被調用的函數信息，包括調用數量、函數執行所需時長、函數被調用的url、甚至包括具體的文件行號
在"調用樹"查看方式中，可以看到函數被調用的順序。
本博文的參考文獻為阮大師的 IE8開發人員工具教程 ,這些天看他的博文真心受益不少，才發現人與人之前的差距不是一般的小。對自己說加油。