谷歌瀏覽器開發調試工具中Sources面板 js調試等 徹底介紹 --轉載

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

相關連接	版本說明	下載地址
谷歌瀏覽器2015	正式版	查看
谷歌瀏覽器翻譯插件	官方安裝版	查看
谷歌瀏覽器控件	工行網銀控件	查看
谷歌瀏覽器64位版	官方版	查看
谷歌瀏覽器mac版	官方正式版	查看
谷歌瀏覽器正式版	在線安裝	查看
谷歌瀏覽器測試版	官方版	查看
谷歌瀏覽器快捷工具	工具控件	查看
谷歌瀏覽器轉手機	安卓版	查看
谷歌瀏覽器網頁截圖	插件	查看
谷歌瀏覽器保存密碼獲取	中文版	查看
谷歌瀏覽器緩存路徑	修改工具	查看
谷歌瀏覽器更新器	綠色版	查看
谷歌瀏覽器華爲網盤控件	官方安裝版	查看

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

谷歌瀏覽器2015最新版下載：http://www.cr173.com/soft/2349.html

首先咱們來看區域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中。我如下圖爲例，觀察其做用。

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

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

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開發工具中的性能方面的調試。