Chrome開發者工具不徹底指南（2、進階篇）

上篇向你們介紹完了基礎功能篇，此次分享的是Chrome開發工具中最有用的面板Sources。  Sources面板幾乎是我最經常使用到的Chrome功能面板，也是在我看來決解通常問題的主要功能面板。一般只要是開發遇到了js報錯或者其餘代碼問題，在審視一遍本身的代碼而一無所得以後，我首先就會打開Sources進行js斷點調試，而它也幾乎能解決我80%的代碼問題。Js斷點這個功能讓人興奮不已，在沒有js斷點功能，只能在IE（萬惡的IE）中靠alert彈出窗口調試js代碼的時代（特別alert一個object根本不會理你），那樣的開發環境對於前端程序員來講簡直是一場噩夢。本篇文章講會介紹Sources的具體用法，幫助各位在開發過程當中夠愉快地調試js代碼，而不是因它而發瘋。首先打開F12開發工具切換到Sources面板中:

Sources功能面板是資源面板，他主要分爲四個部分，四個部分並非獨立的，他們互相關聯，互動共同實現一個重要的功能:監控js在執行期的活動。簡單來講就是斷點啦。

首先咱們來看區域1，它的功能有些相似於Resources面板，主要是顯示網頁加載的腳本文件：例如css， js等資源文件（它不包含cookie，img等靜態資源文件）。

 

 

 

 

區域1的導航條上有三個tab切換選項，他們都存有不一樣域名和環境下的js和css文件，咱們首先來講明Sources（資源）選項的做用:

Sources: 包含該項目的靜態資源文件。雙擊選中文件，該文件內容會在區域2中顯示，若是你選中的是js文件，那麼你能夠在區域2種單擊行號進行斷點調試，只要js執行到了你所標記的這一行，它會中止向下執行而且等待你的命令:

從上圖能夠看到js執行到斷點處時各個區域的變化，首先是區域3中的Breakpoints記錄信息會變高亮，而後是區域4中Scope 選項中列出了斷點處私有和公有的變量信息，這樣，我能夠很直觀地知道，此時此刻js的執行狀態。一樣的，你能夠把鼠標放到區域2種的某個變量上，瀏覽器會彈出一個小框框，框框裏面則是你懸浮其上的變量全部信息:

 

而後，你能夠按F10跟着js執行的路徑一步一步地走下去，若是你遇到了一個函數包含着另一個函數，那麼你能夠按F11進入到個函數中去觀察它的代碼執行活動。你也能夠經過點擊區域1底部的各個圖標對js代碼進行跟蹤。不過我建議你使用快捷鍵，故名思義，由於它比較快捷方便。不過怎麼用徹底按照我的習慣來吧。下圖是各個按鈕的做用功能。

 

 

　在上圖藍色圓圈中數字，它們分別表明:

　　一、中止斷點調試

　　二、不跳入函數中去，繼續執行下一行代碼（F10）

　　三、跳入函數中去（F11）

　　四、從執行的函數中跳出

　　五、禁用全部的斷點，不作任何調試

　　六、程序運行時遇到異常時是否中斷的開關

接下來在區域4種切換到Watch Expressions 選項，它的做用是爲目前斷點添加表達式，使得每次斷點往下走一步都會執行你寫下的js代碼。須要注意的是這個功能必須謹慎使用，由於這可能會致使你寫下的監控代碼段會不斷地被執行。

 

爲了不你的調試代碼重複執行，咱們能夠在調試時直接在console控制檯上一次性地輸出當前斷點處的信息（推薦這樣作）。爲了驗證咱們在console面板中擁有的是當前斷點環境，我門能夠對比斷點執行先後的this值變化。

      

若是你以爲在斷點的時候爲了看一個變量必須借用console面板輸出的方式來查看會比較麻煩，那麼你能夠更新最新版的Chrome，它已經爲咱們解決了這個煩惱。爲了方便開發者調試，在這一點上谷歌已經作到了極致，就在前幾天更新過Chrome之後，滷煮意外地發現了斷點時監控環境變量的另一種方式，這種方式極爲清晰，在斷點調試的時候，區域2中會自動顯示每一個變量的值，每次代碼往下走的時候這個值都回時時更新。這讓開發者對當前環境變量幾乎能夠說是一目瞭然。（此功能有一個小缺陷，那就是沒法查看數組或者對象的具體索引和值，不過我相信google會改進它的。）

 

當你的項目已經線上，出現了一個bug，你修復了以後沒法看到它真正在線上的效果，那麼你能夠在打開線上的項目，直接在瀏覽器中修改代碼而後看到效果。這樣的效果每每是最直接的，這種方法也能幫你省去頻繁驗證發佈的麻煩，畢竟身爲前端碼農的你也必定會聽到事後臺（一般狀況下是後臺發佈）大哥的抱怨：「XXX，測試經過了沒，不要出現了哈，發佈一次很麻煩的！」。而在Chrome裏面，只須要在區域2種直接修改，你就能夠驗證你的代碼在線上是否可行。滷煮在此處只是指出該功能的用法之一。其餘的就憑諸位的聰明才智去想了。

        

即便在斷點時，你也能夠編輯代碼，按ctrl+S保存以後，你會看到區域2的背景由白色變爲淺色，而斷點會從新開始執行。

回到區域1，Content script 選項開裏面包含着一些第三方插件或者瀏覽器自身的js代碼,常常它是被忽略的，實際上它的做用不多。咱們能夠更多關注一下Snippets選項。還記得基礎篇裏面介紹的style嗎？在裏面咱們能夠編輯界面的css代碼而且即時看到它們的映射效果，一樣地，在Sinppets中，咱們也 能夠編輯（重寫）js代碼片斷。這些片斷實際上就至關於你的js文件同樣，不一樣的是本地的js文件在編輯器裏面編輯的，而此處，你是在瀏覽器中編寫的。這些代碼片斷在瀏覽器刷新的時候既不會消失，也不會執行，除非是你手動執行它。它能夠存在你的本地瀏覽器中，即便關閉瀏覽器，再次打開時它依然還在那裏。它的主要做用可使得咱們編寫一些項目的測試代碼時提供便捷，你知道，若是你在編輯器上編寫這些代碼，在發佈時你必須爲它們添加註釋符號或者手動刪除它們，而在瀏覽器上編寫就不須要這樣繁瑣了。

在Snippets選項的空白處右鍵後選擇彈出的new選項，創建一個你本身的新的文件，而後在區域2種編輯它。

 

Snippets 的很是功能強大，它的許多隱藏功能還有待發掘。目前滷煮使用它是在記住調試片斷、單元測試、少許的功能代碼編寫功能上。

最後咱們看看js中時間豐富的監控功能，同上篇文章介紹的同樣，Sources面板和Elements面板同樣有監控事件的功能，並且Sources中功能更加豐富，也更增強大。它的這部分功能集中在區域3中。我如下圖爲例，觀察其做用。

 

從上到下，紫色圈內的數字的意義：

一、斷點處的債堆棧，就是從該函數起，逐級追尋調用到他的函數名。例如:

 

 

 

 

 

 

JavaScript

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

function a () {    b(); }   function b() {    c();   }   function c() {   //在該處斷點，查看call stack   }   a->b->c. call stack 從上到下的順序就是 c b a

 

 

二、在區域2中你的斷點調試信息。當某個斷點在執行的時候對應的信息會高亮，雙擊該處信息能夠在區域2中快速定位。

三、添加的Dom監控信息。

四、擊+ 並輸入 URL 包含的字符串便可監聽該 URL 的 Ajax 請求，輸入內容就至關於 URL 的過濾器。若是什麼都不填，那麼就監聽全部 XHR 請求。一旦 XHR 調用觸發時就會在 request.send() 的地方中斷。

五、爲網頁添加各類類型的斷點信息。如選中了Mouse中的某一項（click），當你在網頁上出發這個動做（單擊網頁任意地方），你瀏覽器就是馬上斷點監控該事件。

 

值得再次重複一遍，Sources是通常的功能開發中最經常使用到也是最有用的功能面板，它裏面的許多功能對於咱們開發前端工程來講是很是有幫助的。在web2.0時代的今天，我不推薦依然在本身的代碼裏面寫調試信息的行爲，由於這會然你的開發變得繁瑣。Chrome開發工具給咱們提供的強大功能，咱們應該好好利用之。這篇文章就到此結束，雖然有點繁瑣，但總算基本表述了滷煮使用經驗和想法，但願對你有幫助。若是你以爲不錯，請推薦一下本文並繼續關注滷煮在的博客。在下一篇中我將向你們介紹Chrome開發工具中的性能方面的調試。