Chrome developer tool介紹（javascript除錯）
1 Developer tool功能結構
Developer tool的功能欄有8個，分別是標籤、資源、網路、原始碼、時間軸、效能、監察和顯示（命令列）。
2 Element panel
2.1 Element控制面板基本功能
Element控制面板能夠讓你檢視所有的DOM tree中的內容，可以根據html內容找到頁面中的元素或者根據頁面中的定位標籤，同時可以改變DOM的內容。由javascript程式碼產生的標籤，也只能通過這種方式查看了（在你的IDE中無法看到）。
Element控制面板
如上圖所示，我選中<div id=”fm”>標籤之後，在頁面中顯示的對應的元素就會選中。如果，我現在要定位百度一下這個按鈕，我可以通過左下角的放大鏡，在頁面中選中百度一下，DOM中也會把對應的標籤給你找出來。這個功能在除錯時絕對是利器。最下面顯示的是現在選中標籤在DOM中的層次關係。
選元素找標籤功能
我們也可以對裡面的內容進行臨時性修改，如剛才找到的百度一下標籤中的value改成“除錯一下”後馬上在頁面中相應顯示。
臨時修改內容
2.2 右側功能欄
2.2.1 style檢視
使用css時，存在著樣式覆蓋等問題，有的時候顯示的樣式可能出乎你的意料，或者對元素的大小位置（特別是視窗）的檢視。同時，我們也可以在這裡進行臨時修改，在頁面中反應（真正的所見即所得，不是別的IDE所能替代的）。
修改樣式或大小
2.2.2 標籤註冊事件檢視
如果你想知道“百度一下”這個按鈕註冊了哪些功能，或者滑鼠點選時執行了哪個javascript函式，就可以通過這個功能實現了。
選中百度一下標籤，定位keydown事件，找到對應的執行函式
2.2.3 查詢功能
Ctrl+F可以調出查詢，查詢你想要的內容，非常實用。
3 資源控制面板
資源控制面板包括了這個頁面中下載下來的所有的資源，同時也包括本地的cookie，還有html5中local storage等高階功能。
資源檢視面板
4 網路控制面板
網路控制面板在兩個方面還是非常還用的，一個是發現圖片（css、js等）載入不了，可以通過network檢視它請求的位置。第二個，是除錯ajax時，可以檢視它的請求和獲取。如百度輸入框中，輸入關鍵字後會自動顯示熱門內容，這顯然是一個ajax的使用。
網路載入顯示
檢視http請求和獲得的內容
5 原始碼控制面板（js除錯）
Javascript的除錯，基本上是通過原始碼控制面板和命令列配合進行的。
5.1 Beautiful javascript
網上的js一般是壓縮過的，閱讀壓縮過的javascript肯定是不是人能進行的，更別說新增斷點了。在 Scripts 面板下面有個 Pretty print 按鈕(這種符號 {}), 點選會將壓縮 js 檔案格式化縮排規整的檔案, 這時候在設定斷點可讀性就大大提高了。
調整前
調整後
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 斷點中斷
可以通過單擊左側側新增斷點，並在右側顯示。也可以通過watch expression新增檢視的變數。
我們添加了一個斷點，如果在頁面上的操作執行到斷點處，就會在斷點處終止。然後，我們可以通過右側最上面的按鈕除錯，與VS等IDE的除錯非常相近。Call stack是顯示函式的呼叫棧，在除錯大規模的javascript程式是非常有用。
單步除錯
5.3.2 頁面中斷除錯
除了給設定常規斷點外, 還可以在某一特定事件發生時中斷(不針對元素) , 在 Scripts 面板右側, 有個 Event Listener Breakpoints, 這裡列出了支援的所有事件, 不僅 click, keyup 等事件, 還支援 Timer(在 setTimeout setInterval 處理函式開始執行時中斷), onload, scroll 等事件。
6 顯示行（命令列）
命令列對於我們這種菜鳥有一個非常有用的地方，對於javascript提供的API或者API的功能不是非常熟悉。這個時候命令列就成為我們試驗最好的地方。如，我們想檢視document下面有哪些函式，我們就可以在命令列中輸入，然後選中並嘗試。對於jquery等開源框架的學習，這種方式也非常高效，學程式碼還是得跑起來才行。
我們可以在命令列裡面直接改變記憶體中的內容，對於小函式我就可以用這樣的方式直接替換。
我們按enter是對輸入的內容執行，如果要換行需要按shift+enter。在這裡面，我們直接在命令列裡面裡面講calSum函式覆蓋掉，a+b換成了a*b。執行結果如下所示。
命令列使用
執行結果
7 效能檢視控制面板（profiles）
這個控制面板允許我們檢視函式執行時CPU佔有率，還有記憶體佔有率。這能夠幫助我們優化程式碼，檢視程式碼效能（記憶體還能檢視閉包洩露等）。
按start可以分析，現在的記憶體佔有率。進行操作後，再得到第二份記憶體分析報告，這樣我們就能通過記憶體變化來進行分析了。在底欄，還有對比、總結等選項。
第一份記憶體分析報告
第二份記憶體分析報告
8 其他
在除錯過程中，可能還會受別的因數影響，如迅雷下載外掛xl.js等，在開發時把這些東西禁用掉。Firefox瀏覽器的除錯也非常強大，在以前開發工程中通常通過兩個瀏覽器偵錯程式的配合使用進行。當然，如果工程要求比較高，肯定要在不同瀏覽器下分別除錯。