你不知道的Chrome DevTools（2）：那些debug的技巧

Web前端開發過程當中必然會用到Chrome瀏覽器自帶的開發者工具Chrome DevTools，使用它做爲Web前端開發性能調試的必備工具。就連隔壁的產品小哥都知道打開F12改一下頁面元素的標籤代碼就能看到頁面效果，這年頭誰不會用Chrome開發者工具呀。

可是Chrome能作的遠不止你日常用的那麼簡單，這一個小小的開發工具集成了不少高級的功能你未必知道。我打算把一些Chrome DevTools上使用的高級技巧寫成《你不知道的Chrome DevTools》這一系列的博文，但願你們一塊兒學習學習。

---

關於web前端的調試

在描述怎麼用Chrome的開發工具來進行web前端應用調試前，有必要嘮叨一下web前端的調試。衆所周知，由於JavaScript這種語言的解析性的關係，在瀏覽器中調試頁面的JS代碼顯得很是的麻煩。沒有C和Java那種編譯器帶的調試工具，沒有很好的語法定位和變量監控的，因此有時候頁面出錯也不知道來自哪裏。然而，這還不是最嚴重的，由於JS的語法比較寬鬆和隨意，因此同一功能多種寫法，各類奇葩bug都有。web前端開發依賴的瀏覽器環境纔是最坑爹的地方，不一樣的瀏覽器之間存在大量的兼容性問題。

Anyway，相信之後JS的發展或者工具的發展讓web前端的調試變得舒服高效。

不簡單的sources面板

debug第一步就是打開Chrome開發工具的sources面板。。。（這麼簡單的道理還用你來講？！）呵呵，sources面板其實不簡單。用過相似sublime text的代碼編輯器都知道一些快捷鍵，例如ctrl+p用來打開一個文件、ctrl+shift+f用來全局搜索關鍵字。其實在Chrome開發工具也有相似的快捷鍵。

• ctrl+o 打開一個js文件
• ctrl+p 同ctrl+o
• ctrl+f 查找當前js文件中的關鍵字
• ctrl+shift+f 全局查找關鍵字
• ctrl+shift+e 在控制檯運行當前選中的代碼片斷

值得一提的是ctrl+shift+e這個快捷鍵，能夠立馬在控制檯運行當前選中的代碼片斷。相信作過js的debug的時候，你們都有這樣的經驗，想看當前代碼中某句代碼的執行結果，只好先選中複製這段代碼，打開控制檯，粘貼代碼，回車運行看結果。這麼長的流程，全交給ctrl+shift+e這個快捷鍵，贊吧！

斷點

給代碼添加斷點的方法有兩種，在代碼中寫debugger和在source面板中鼠標單擊添加斷點。二者的不一樣點在於：鼠標單擊的方式會在代碼行數改變的時候沒法定位到以前的位置，但能夠在調試的過程當中刪除斷點；debugger的方式不會由於代碼行數改變而定位不到，但必需要刷新代碼才能把斷點刪掉。

簡單的debug流程基本上就是交替使用下面幾個按鈕或者快捷鍵。

這裏介紹一個小技巧：若是添加「條件判斷」的斷點？相信你們在調試的時候，最煩就是在for循環中的斷點了，須要不斷地按下一步來在循環中找到要驗證的數據。在代碼中添加debugger的方式能夠這麼寫：

for(var i = 0; i < length; i++){
    if(i === 2){
        debugger;
    }
}

其實也不用這麼麻煩的，在斷點的地方右鍵，選擇「Edit breakpoint」就能夠寫上你想出現調試的條件表達式。

另外，當你在Chrome開發工具中配置了workspace以後，你就能夠直接在source面板上編輯代碼並保存代碼了，至關方便。固然，這隻針對本地開發的代碼，對於線上的代碼就無能爲力了。

代碼格式化

目前線上的js代碼基本上都是作個壓縮和變量名混淆的，這樣對於js代碼的體積壓縮有好處，但對於要調試的前端工程師來講，倒是個大麻煩。

上圖的按鈕就是爲這種狀況而生的，點擊它就能格式化當前的代碼，變成有換行格式的代碼，閱讀起來再也不那麼晦澀難懂。
然而，變量名仍是一些簡單的字母，看起來仍是很是的費勁。有辦法把混淆的變量名變回本來的變量名嗎？
答案是有的！不過須要原先的代碼支持source map。
source map實際上是在代碼在發佈的時候聲明它的變量替換的規則文件。例如在jQuery1.9.0更高的版本的代碼，末尾有一句：
//@ sourceMappingURL=jquery.min.map
這就是聲明瞭它的source map文件的路徑，而source map文件裏大概是這樣子的：

{
    "version": 3,
    "file": "jquery.min.js",
    "sources":["jquery.js"],
    "names": ["window","undefined","isArraylike"],
    "mappings": "CAaA,SAAWA,EAAQC"
}

names就是本來的變量名字，mappings則表示該變量名字出現的位置。具體的位置規則是利用了VLQ編碼，有興趣的同窗能夠本身去挖掘。若是你想簡單點，就直接使用Google的Closure編譯器來建立這樣的map文件。

總結

前端ers在調試js代碼的時候，知道Chrome開發工具上的小技巧，能夠提升查找問題的效率。

寫在最後的話：本文基本上是在參考了Google的DevTools文檔以後，結合本身的經驗來寫的，目的是把文檔中說到的一些特別的方法介紹給你們，若是想多點了解，能夠到Google的DevTools文檔看看。致謝！

參考文獻

https://developers.google.com/chrome-developer-tools/?hl=zh-cn