IE11之F12 Developer Tools--調試器(Debugger)

使用調試器工具在代碼運行時對其導航、設置監視點和斷點，查看調用堆棧，以及提升編譯/精簡JavaScript的可讀性。

調試器能夠幫助你瞭解爲什麼你的代碼片斷會出現未按照預期方式運行、未在預期時間運行及在不該運行的時候運行的狀況。在調試過程當中能夠暫停執行中的代碼，讓你能夠備份和重複代碼塊，也能夠從不一樣角度檢查代碼的狀況。

調試器默認佈局顯示三個窗格，能夠調整其寬度和/或高度。

　　腳本窗格：顯示網頁的HTML和JavaScript的源。
　　監視點窗格(Watches):顯示變量值。在斷開模式時，以代碼形式顯示當前位置的本地變量（區域設置），以及要求跟蹤的特定變量（監視點）。
　　調用堆棧和斷點窗格：
　　　　調用堆棧：顯示導向當前執行點的函數調用鏈
　　　　斷點：顯示已設置的斷點和跟蹤點的列表，並提供用於刪除、切換和編輯斷點的函數。

可使用三種方法啓動調試會話：

　　設置斷點：當你的代碼執行到斷點時，進入調試模式，能夠逐步運行代碼。
　　在代碼中斷開：在網頁正常運行時單擊上圖中的"||"圖標進行調試模式
　　將"異常控制"設置爲在未處理的異常處斷開並運行網頁代碼，直處處理異常

　　　　

進入調試模式時，咱們能夠從斷點處繼續執行操做，此時看到的代碼若是是一團亂糟糟的格式，記得啓用格式化代碼。看以下圖所示的工具欄：

從左到右依次是：

　　繼續：離開調試模式，繼續執行到下一個斷點，若是斷點不存在，則直接向下運行至異常或結束。
　　斷開：在下一個運行的語句處斷開。
　　單步執行：單步執行調用的函數，若是不是函數，則單步執行到下一個語句。
　　逐過程執行：逐過程執行調用的函數，若不是函數，則逐過程執行下一個語句。
　　跳出：跳出當前函數，並單步執行調用的函數
　　在建立新的Worker時斷開
　　異常控制
　　是否格式化代碼：若是顯示被選中，則代碼被格式化，看起來有秩序
　　當代碼過長的時候是否啓用換行：只有當格式化代碼啓用以後才能使用此功能
　　是否僅個人代碼

當調試模式啓用時，也能夠右鍵腳本窗格選擇相應的操做。

在上述工具欄中，咱們看到最後一個圖標是灰色不可用狀態，也並無解釋它是作什麼用的，在介紹它以前，咱們先來看看源映射。

有時候，咱們使用編譯爲JavaScript的語言編寫代碼時，會使用JavaScript壓縮器。此時，瀏覽器中運行的代碼與你所編寫的代碼有很大的不一樣，這時候，調試將變得很是困難。即便咱們格式化代碼讓代碼具備更高的可讀性，但其函數和變量名稱可能和源代碼的名稱依然不一樣。此時，若是錯誤能夠指向原始源代碼中存在的問題，而非指向瀏覽器中運行的大量修改的文件，將會是個不錯的方案。

說了這麼多，沒錯，最後一個灰色圖標，就是爲了源映射而存在的。那麼爲何它會是灰色呢？若是讓它變得可用？右鍵正在調試的文件名，選擇源文件映射文件：

若是沒有找到映射，調試器工具不會顯示錯誤，在不少狀況下，用戶會下載壓縮或編譯的庫且不會想去調試它們。

映射並不是100%完美。調用堆棧和檢查器函數在變量名稱用在運行的代碼中時，顯示編譯/壓縮的變量名稱。此外，源映射的質量將根據生成它們的軟件而有所不一樣。

接下來聊聊斷點的設置和管理。不一樣類型的點使你能夠在調試器工具到達這些點時指示它執行不一樣操做。

　　常規斷點：最容易設置，單擊行號旁的位置便可。
　　條件斷點：僅當設置的條件評估爲true時，纔會斷開。
　　跟蹤點：相似於臨時console.log()命令。
　　事件的斷點和跟蹤點：由特定事件觸發，而不是在執行特定代碼塊時觸發。每一個斷點和跟蹤點都具備一個可選的條件篩選器，可幫助你將其做用域縮小到要檢查的事件的待定實例上：

　　　　

在你關閉瀏覽器後，斷點將保留，這意味着，每次打開瀏覽器進行調試時無需再設置它們，要想刪除它們，在斷點窗格手動進行刪除。

設置完斷點以後，進行調試時，能夠查看對象和變量：

　　在腳本窗格，鼠標懸停在任何變量、函數或對象上能夠查看覆蓋中的詳細信息

　　　　
　　在Watches窗格中的區域設置節點將爲你提供全部對象和變量的目錄（本地和全局範圍），可用於當前斷開中做爲焦點的語句。使用添加監視能夠添加想要查看的對象和變量。

　　　　
　　異常調用函數的狀況很是常見，這可能致使數據損壞和速度問題。「調用堆棧」窗格顯示JavaScript引擎到達該函數所使用的路由。當前函數將顯示在頂部，調用的函數按照逆序顯示在其下。
　　以異步方式調用函數後，要跟蹤調用它的位置會變得更難。

回到腳本窗格，咱們發現腳本窗格提供的是選項卡式的頁面，其中調試模式打開的文件咱們能夠一目瞭然，但有時候咱們想查看的文件若是不在選項卡中出現，應該如何查看呢？其實，在最腳本窗格的選項卡中，展開最左側的文件夾，就能夠看到全部的文件：

在頂部，咱們還能夠輸入篩選條件快速找到咱們須要的文件，而當鼠標在單個文件上方懸停時，還會顯示出文件所在的完整路徑，單擊文件，它將會顯示在腳本窗格中。

前面提到，在調試器工具欄中有一個開關時是否啓用僅個人代碼，僅個人代碼，容許你指示某些腳本式應該在調試時忽略的第三方庫。這能夠防止調試器處理你未編寫且不打算更改的代碼。當啓用時，若執行暫停時庫代碼包含在調用堆棧中，則調用堆棧窗格右上角的僅個人代碼圖標能夠打開和關閉該執行框架的詳細信息。

當咱們打開IE瀏覽器時，不知道你們是否注意到一個選項：啓用InPrivate瀏覽，以下圖所示：

什麼是InPrivate瀏覽呢？

其實InPrivate瀏覽是使你在瀏覽時不會在瀏覽器歷史記錄中留下任何痕跡，前面咱們提到了不少時候調試的信息都會被保留，可是若是使用這種方式瀏覽，調試器就可能不會保存某些應該被保留的信息。而對於你在文件中添加的斷點，使用僅個人代碼功能將文件標記爲庫代碼，或使用調試器打開不是根頁面的文件時，調試器依然將保存有關你調試頁面和文件的信息。這個須要引發注意。

因爲同時運行調試器(Debugger)和探查器(Profiler)須要額外開銷，因此分析報告中的值不會反映代碼的實際加載和運行時間，所以，不支持嘗試同時運行兩個函數。

調試器就介紹到這裏，更多的學習須要你們在實踐中理解。也許有人會說，哦，這個是個開發人員須要學習的技能之一，和測試人員無關。

準確地說，做爲網頁開發人員，的確須要對這個技能進行掌握，由於它能很好地幫助咱們瞭解代碼的問題所在，而做爲測試人員來講，每每不會去作調試代碼的工做，可是實際上，咱們在作測試的過程當中，有時候一個網頁開着開着就自動出現了暫停狀態，以下圖所示，但下圖是人爲形成的，這裏僅做爲例子演示：

伴隨着網頁的黯淡，大大的暫停符號"||"的出現，Developer Tools自動啓動，此時，正在測試的你，若是能對Debugger及代碼有必定的瞭解，多是好奇，多是排查問題，你也須要用到這個技能進行進一步的觀察。固然，若是你說，我對這個一竅不通怎麼辦？關閉瀏覽器從新打開網頁可能也是一個看起來不錯的途徑，只是，萬一存在bug，這麼作就放肆地讓它在你眼皮底下悄悄地溜走了哦~ ^_^