Chrome瀏覽器得益於其優秀的V8解釋器，javascript執行速度和內存占有率表現非常優秀。
掌握了Chrome工具可提高學習效率和開發效率。
有如下功能面板，可以使用Ctrl+[和Ctrl+]快捷鍵在面板之間切換。
簡單常用的就一筆帶過
一、標簽頁
- 查看DOM tree內容
- 根據標簽頁的html內容找到對應元素
- 根據頁面元素找到標簽頁的html
- 改變DOM內容
- 查看js動態生成的DOM
- 在標簽頁右側查看style
- 查找
應用：
支持ctrl+z恢復操作。
可以為dom節點添加斷點。當dom節點發生變化 的時候，代碼會停在修改這個dom節點的js代碼的位置。
也可以看到dom節點上邊綁定了哪些事件。
二、控制台
1、 控制台非常有用， 對於javascript提供的API或者API的功能不是非常熟悉。這個時候命令行就 成為我們試驗最好的地方。如，我們想查看document下面有哪些函數，我們就可以在命令行中輸入，然后選中並嘗試。對於jquery等開源框架的學 習，這種方式也非常高效，學代碼還是得跑起來才行。
2、Chrome console換行輸入
我們按enter是對輸入的內容運行，如果要換行需要按shift+enter。在這里面，我們直接在命令行里面里面講calSum函數覆蓋掉，a+b換成了a*b。運行結果如下所示。
三、源碼
sources，意思是“來源”，這個面板按照資源的來源分類。
1、快速找到資源文件ctrl+p（模糊搜索）
初學者找文件，經常是打開控制台Source，在里面一級一級目錄的找，比較低效。快捷鍵ctrl+p可用打開搜索面板，輸入關鍵詞就可以找到相關文件。
2、 在全部文件中查找ctrl+shift+f
在某個文件中查找，只需要ctrl+f就可以。這種方法需要2步，打開文件，ctrl+f。ctrl+shift+f可以一步到位，不需要打開文件，就能查找。
注意：不要打開文件，直接ctrl+shift+f查找。
3、快速調到指定行ctrl+g
當一個文件很長時，在文件尾部想要回到開頭,可以拖着滾動條到開頭，效率很低。可以用ctrl+G快捷鍵呼出輸入框，輸入行號，快速跳到指定行。
4、高亮下一個匹配項ctrl+d（多選）
選中一個單詞，按ctrl+d，下一個匹配的單詞也會被選中。
5、斷點
除 了給設定常規斷點外, 還可以在某一特定事件發生時中斷(不針對元素) , 在 Scripts 面板右側, 有個 Event Listener Breakpoints, 這里列出了支持的所有事件, 不僅 click, keyup 等事件, 還支持 Timer(在 setTimeout setInterval 處理函數開始執行時中斷), onload, scroll 等事件。
6、代碼出錯定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>javascript add</title> <script type="text/javascript"> var div = document.getElementByd("a"); function calSum() { var a = parseInt(document.getElementById("num1").value); var b = parseInt(document.getElementById("num2").value); document.getElementById("num3").value = (a + b); } </script> </head> <body> <input type="text" id="num1" />add <input type="text" id="num2" /> <input type="button" id="btnCal" onclick="calSum()" value="equal" /> <input type="text" id="num3" /> </body> </html>
上面的代碼中， document.getElementByd("a")顯示是錯誤的，在IDE中有些錯誤是檢查不出來的（特別是跟瀏覽器有關的部分）。加載該頁面后，可以在控制台看到報錯信息，然后直接定位至出錯點，也可以在Sources中看到報錯信息。
7、調用棧
調用棧。Call Stack
可以看到一個函數是在哪里調用的。
工作中常常需要去看其他同事寫的代碼的，你知道它一定會調用了某個方法，但是你不知道是哪里調用的，就可以給它打個斷點。然后觀察它的調用棧。很容易就理清了某個功能的實現脈絡。
斷點停下來的時候。在console控制台可以console出當前位置的活動環境的作用域中的值，比如可以看到當前函數的活動環境下的this的值。可以很方便的看到某個功能模塊對象中的各個值是否跟設想的一樣。從而發現問題，糾正自己的思路，一步步地完善代碼。
在斷點調試的過程中，如果你的js是寫在單獨的文件中。就可以直接修改代碼，然后ctrl+s保存，再運行的時候就可以運行你修改后的代碼。這樣可以直接在瀏覽器中邊修改邊調試。效率能提高不少
在js代碼中寫 debugger;會自動斷點到該位置。
四、網絡
可以查看頁面所有資源的響應情況，包括響應時間，瀏覽器等待時間，狀態碼，資源大小等。是一個很重要也比較復雜的面板。因此我單獨寫了篇文章來介紹，詳情可參考：Chrome Developer Tools：Network Panel說明
五、時間線
Timeline工具欄可以詳細檢測出Web應用在加載過程中，時間花費情況的概覽。這些應用包括下載資源，處理DOM事件, 頁面布局渲染或者向屏幕繪制元素。也是一個很重要且比較復雜的面板。因此我單獨寫了篇文章來介紹，詳情可參考：Chrome Developer Tools：Timeline Panel說明
六、性能
這個控制面板允許我們查看函數運行時CPU占用程度，還有堆棧申請的內存占有率。這能夠幫助我們優化代碼，查看代碼性能（內存還能查看閉包泄露等）。
按start可以分析，現在的內存占有率。進行操作后，再得到第二份內存分析報告，這樣我們就能通過內存變化來進行分析了。在底欄，還有對比、總結等選項。
七、資源
Resources工具顯示全部資源，跟Sources不同的是，Resources中資源是按文檔類型分類的。並且在Resources中可用查看，增加，刪除，修改頁面的html5 local storage，session storage,cookie等。
八、安全
九、監察
參考：
http://www.cnblogs.com/wukenaihe/archive/2013/01/27/javascript%E8%B0%83%E8%AF%95.html
http://www.cnblogs.com/mqfblog/p/5397282.html
【水一篇，留坑，以后填，有些內容待補全。。。】
本文作者starof,因知識本身在變化，作者也在不斷學習成長，文章內容也不定時更新，為避免誤導讀者，方便追根溯源，請諸位轉載注明出處：http://www.cnblogs.com/starof/p/5443445.html有問題歡迎與我討論，共同進步。