很多Web前臺開發(fā)者都喜歡這種瀏覽器自帶的開發(fā)者工具，這對前臺設計、代碼調(diào)試很大幫助的。
Chrome瀏覽器得益于其優(yōu)秀的V8解釋器，javascript執(zhí)行速度和內(nèi)存占有率表現(xiàn)非常優(yōu)秀。對于html+css+javascript前臺技術的學習或者開發(fā)，瀏覽器developer tool的使用時必不可少的，也能極大的提高學習或者開發(fā)效率。本文根據(jù)版本 23.0.1271.10。在window下，開啟developer tool的快捷鍵為F12。
1 Developer tool功能結構
Developer tool的功能欄有8個，分別是標簽、資源、網(wǎng)絡、源碼、時間軸、性能、監(jiān)察和顯示（命令行）。
2 Element panel
2.1 Element控制面板基本功能
Element控制面板能夠讓你查看所有的DOM tree中的內(nèi)容，可以根據(jù)html內(nèi)容找到頁面中的元素或者根據(jù)頁面中的定位標簽，同時可以改變DOM的內(nèi)容。由javascript代碼產(chǎn)生的標簽，也只能通過這種方式查看了（在你的IDE中無法看到）。
Element控制面板
如上圖所示，我選中
選元素找標簽功能
我們也可以對里面的內(nèi)容進行臨時性修改，如剛才找到的百度一下標簽中的value改成“調(diào)試一下”后馬上在頁面中相應顯示。
臨時修改內(nèi)容
2.2 右側(cè)功能欄
2.2.1 style查看
使用css時，存在著樣式覆蓋等問題，有的時候顯示的樣式可能出乎你的意料，或者對元素的大小位置（特別是窗口）的查看。同時，我們也可以在這里進行臨時修改，在頁面中反應（真正的所見即所得，不是別的IDE所能替代的）。
修改樣式或大小
2.2.2 標簽注冊事件查看
如果你想知道“百度一下”這個按鈕注冊了哪些功能，或者鼠標點擊時執(zhí)行了哪個javascript函數(shù)，就可以通過這個功能實現(xiàn)了。
選中百度一下標簽，定位keydown事件，找到對應的執(zhí)行函數(shù)
2.2.3 查找功能
Ctrl+F可以調(diào)出查找，查找你想要的內(nèi)容，非常實用。
3 資源控制面板
資源控制面板包括了這個頁面中下載下來的所有的資源，同時也包括本地的cookie，還有html5中l(wèi)ocal storage等高級功能。
資源查看面板
4 網(wǎng)絡控制面板
網(wǎng)絡控制面板在兩個方面還是非常還用的，一個是發(fā)現(xiàn)圖片（css、js等）加載不了，可以通過network查看它請求的位置。第二個，是調(diào)試ajax時，可以查看它的請求和獲取。如百度輸入框中，輸入關鍵字后會自動顯示熱門內(nèi)容，這顯然是一個ajax的使用。
網(wǎng)絡加載顯示
查看http請求和獲得的內(nèi)容
5 源碼控制面板（js調(diào)試）
Javascript的調(diào)試，基本上是通過源碼控制面板和命令行配合進行的。
5.1 Beautiful javascript
網(wǎng)上的js一般是壓縮過的，閱讀壓縮過的javascript肯定是不是人能進行的，更別說添加斷點了。在 Scripts 面板下面有個 Pretty print 按鈕(這種符號 {}), 點擊會將壓縮 js 文件格式化縮進規(guī)整的文件, 這時候在設定斷點可讀性就大大提高了。
調(diào)整前
調(diào)整后
5.2 代碼出錯定位
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 5 <head> 6 7 <title>javascript add</title> 8 9 <script type="text/javascript">10 11 var div=document.getElementByd("a");12 13 function calSum(){14 15 var a=parseInt(document.getElementById("num1").value);16 17 var b=parseInt(document.getElementById("num2").value);18 19 document.getElementById("num3").value=(a+b);20 21 }22 23 </script>24 25 </head>26 27 <body>28 29 <input type="text" id="num1"/>add<input type="text" id="num2"/>30 31 <input type="button" id="btnCal" onclick="calum()" value="equal"/><input type="text" id="num3"/>32 33 </body>34 35 </html>
上面的代碼中，紅色標記部分顯然是錯誤的，在IDE中有些錯誤是檢查不出來的（特別是跟瀏覽器有關的部分）。加載該頁面后，可以在顯示欄看到報錯信息，然后直接定位至出錯點。
Javascript錯誤位置定位
5.3 添加斷點及單步
5.3.1 斷點中斷
可以通過單擊左側(cè)側(cè)添加斷點，并在右側(cè)顯示。也可以通過watch expression添加查看的變量。
我們添加了一個斷點，如果在頁面上的操作執(zhí)行到斷點處，就會在斷點處終止。然后，我們可以通過右側(cè)最上面的按鈕調(diào)試，與VS等IDE的調(diào)試非常相近。Call stack是顯示函數(shù)的調(diào)用棧，在調(diào)試大規(guī)模的javascript程序是非常有用。
單步調(diào)試
5.3.2 頁面中斷調(diào)試
除了給設定常規(guī)斷點外, 還可以在某一特定事件發(fā)生時中斷(不針對元素) , 在 Scripts 面板右側(cè), 有個 Event Listener Breakpoints, 這里列出了支持的所有事件, 不僅 click, keyup 等事件, 還支持 Timer(在 setTimeout setInterval 處理函數(shù)開始執(zhí)行時中斷), onload, scroll 等事件。
6 顯示行（命令行）
命令行對于我們這種菜鳥有一個非常有用的地方，對于javascript提供的API或者API的功能不是非常熟悉。這個時候命令行就成為我們試驗最好的地方。如，我們想查看document下面有哪些函數(shù)，我們就可以在命令行中輸入，然后選中并嘗試。對于jquery等開源框架的學習，這種方式也非常高效，學代碼還是得跑起來才行。
我們可以在命令行里面直接改變內(nèi)存中的內(nèi)容，對于小函數(shù)我就可以用這樣的方式直接替換。
我們按enter是對輸入的內(nèi)容運行，如果要換行需要按shift+enter。在這里面，我們直接在命令行里面里面講calSum函數(shù)覆蓋掉，a+b換成了a*b。運行結果如下所示。
命令行使用
運行結果
7 性能查看控制面板（profiles）
這個控制面板允許我們查看函數(shù)運行時CPU占有率，還有內(nèi)存占有率。這能夠幫助我們優(yōu)化代碼，查看代碼性能（內(nèi)存還能查看閉包泄露等）。
按start可以分析，現(xiàn)在的內(nèi)存占有率。進行操作后，再得到第二份內(nèi)存分析報告，這樣我們就能通過內(nèi)存變化來進行分析了。在底欄，還有對比、總結等選項。
第一份內(nèi)存分析報告
第二份內(nèi)存分析報告
8 其他
在調(diào)試過程中，可能還會受別的因數(shù)影響，如迅雷下載插件xl.js等，在開發(fā)時把這些東西禁用掉。Firefox瀏覽器的調(diào)試也非常強大，在以前開發(fā)工程中通常通過兩個瀏覽器調(diào)試器的配合使用進行。當然，如果工程要求比較高，肯定要在不同瀏覽器下分別調(diào)試。
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
喜歡 
頂
難過
囧
圍觀
無聊
