這幾個控制台API能幫你調試Web應用

利用控制台API更方便的調試Web應用

許多年前，調試JavaScript代碼無非就是在要調試的函數內部插入幾句而已。有時你會發現問題的根源並不在於你正在查看的函數，而是出現在這些函數調用的其它函數內部。結果就是更多的被插入到代碼中。整個過程通常還伴隨著不時的吐槽。

這種調試問題的缺點在於效率低下。如果你需要調查一個嚴重bug產生的根本原因，顯然難當此大任。有時這些吐槽會被留在代碼里，並在日後造成尷尬。

時至今日，主流瀏覽器中集成的功能強大的開發者工具已經為廣大開發者所熟知。這些開發者工具提供了諸如審查DOM元素，添加或刪除樣式類，修改屬性值，為一個或多個元素綁定事件等許多功能。除此之外，開發者工具還支持控制台API。

在本文中，我會向你介紹控制台API提供的主要功能並逐一介紹如何使用它們。

控制台API簡介

控制台API提供了一系列諸如選擇並審查DOM元素，監控事件監聽器，停止或啟動性能分析器等常見任務的入口。這裡提到的一些任務也可以通過開發者工具的UI界面來訪問，但那樣的話你就不得不在開發者工具的不同標籤頁之間來回切換。通過使用控制台API，你就可以在不離開「Console」標籤的前提下使用所有這些功能。

讓我們從最常見的操作開始介紹：選擇一個或多個DOM元素。

選擇DOM元素

如果你像我一樣喜愛jQuery，你一定很喜歡它那簡潔實用的DOM選擇功能。例如，你想選中第一個帶有類的元素，你可以這麼寫：

在現代瀏覽器中還可以用以下稍顯冗長的語句實現相同的功能：

控制台API提供了一個名為的的別名來實現相同的功能。與使用jQuery時不同，你甚至都不需要輸入來訪問第一個元素：

關於$的鬥爭

選擇$這個命名已經給一些開發人員造成困擾。事實上，如果當前你正在使用開發者工具的頁面內部已經定義了一個名為$的變數(像jQuery一樣)，那麼開發者工具中的$變數就不可用了。類似的，如果頁面中使用了和開發者工具中某個功能相同的變數命名，那麼將無法在開發者工具中訪問該功能。這意味著如果你在控制台中使用了，你並不能很容易的分辨這個來自哪裡（來自jQuery，還是的別名，亦或是頁面的開發人員定義的其它內容）。

在某些瀏覽器例如Opear和Chrome中，你可以通過查看輸出在控制台上的內容來判斷。只需要在控制台中輸入，然後按回車鍵。如果你看到了：

那麼你就可以斷定你使用的是控制台API提供的別名。不幸的是，IE11以及更早的IE版本並不會輸出這麼簡單明了的信息，因此你也就不能很容易的判斷了。

選擇多個元素

和通過來選擇一個元素一樣，控制台API還定義了一個名為的的別名用來選擇所有滿足條件的DOM元素。

你可以通過以下語句選擇頁面中所有的段落元素：

如果只是單純的選中一個或多個元素而不對它們進行操作並沒有多大意義。通常你可能需要修改元素的某個屬性，刪除一個樣式類，修改元素內容，甚至是在DOM樹中移動元素的位置。要實現這些操作，你需要在這些元素的上下文中查看它們。現在讓我們看看如何實現這一目標。

審查DOM元素

一旦你選中了一個元素，你往往需要查看它的詳細信息。控制台API提供了一個名為的函數，它可以將你直接帶到給定DOM元素在開發者工具中「Elements」標籤下的對應位置。

假設你想查找並查看第一個帶有類的元素的詳細信息。那麼你可以執行：

當時開始修改DOM樹中的元素後，你可能會想訪問之前選中的某個元素來執行某些操作。控制台API提供了一種訪問你最後一次使用過的元素的快捷方式。我們會在下一小節中探討。

引用最近訪問過的元素

控制台API提供了, , , 和 這幾個變數用來快速訪問在「Elements」標籤下最近選中的5個DOM元素。代表了最近一次選中的元素，代表次最近一次選中的元素，以此類推。如果你是在「Profiles」面板下訪問這5個變數，那麼它們分別代表了你最近選中的5個JavaScript堆對象。

調試事件

如果你在瀏覽器端做過JavaScript開發，那麼你對事件一定不陌生。在本節中我們將討論一些可以幫助我們調試事件監聽器的方法。

獲取綁定在某個元素上的事件監聽器

DOM API提供了和來添加或刪除事件監聽器。不幸的是，DOM API沒有提供獲取已經添加過的事件監聽器的途徑，因此你不得不人工記錄這些信息。控制台API提供了一個名為的方法來實現這種功能。需要注意的是，和其它控制台API一樣，這個函數只可以在控制台中使用。

接受一個DOM元素作為參數（比如或是的返回值）。它執行後的返回值是一個對象，該對象的屬性名是綁定了事件監聽器的事件名（例如「click」或是「keydown」），對應的屬性值則是包含了該事件下所有事件監聽器的數組。數組中的每一項都描述了對應事件類型下註冊的一個事件監聽器。

以上的描述可能聽起來有些模糊，讓我們看一個示例。假設你執行了以下代碼：

然後你在開發者工具中打開控制台，執行，你就會看到以下輸出：

監控事件監聽器的執行

有時你會需要了解某個事件監聽器何時被執行了以及相關事件對象的詳細信息。這時你可以使用方法。它接受2個參數，第一個參數指定了要監聽的DOM元素，第二個參數指定了要監聽的事件類型（例如「click」）或是事件類型的數組，亦或是以下列出的某個預定義好的通用事件類型的別名。

當被監聽的DOM對象上某個特定事件被觸發時，該事件的事件對象就會被輸出到控制台。

參考之前的示例，你可以像下邊這樣使用方法：

需要注意的是方法不支持自定義事件。

控制台API還提供了一個名為的方法用來停止監聽事件活動。它接受和一樣的參數。如果只提供了第一個參數，則該DOM元素上對所有事件監聽器的監控都會停止。

監控函數或方法

為了了解產生bug的原因，你經常需要設置或取消斷點，監測函數何時被執行以及執行時傳入的參數。本節將介紹如何在控制台中實現這些操作。

設置或取消斷點

通過UI界面設置斷點通常會比較繁瑣，因為你不得不在多個標籤間切換以找到你要調試的函數。幸運的是，控制台API為你提供了方法。它接受的參數只有一個，就是你要調試的函數或方法。

以下是一些使用場景：

一旦你對某個函數執行了方法後，每次該函數執行時都會自動進入斷點。當你調查完畢後，你可以通過方法來移除斷點。

監控函數的調用參數

有時斷點並不是最適合的工具。例如在某些場景下一個函數在短時間內會被多次調用，你關心的只是該函數何時被調用已經調用時傳入的參數。在這種情況下，你可以使用方法。

為了更清楚的解釋的功能，讓我們看一個實際的例子。假設我們的項目中有一個名為的函數用來計算傳入參數的總和。為了增加其靈活性，它可以接受一個數組作為參數，也可以傳入任意數量的數字作為參數。以下是該函數的定義：

打開控制台後執行，然後執行以下2行代碼：

這時你應該會在控制台上看到以下2行信息列印出來:

調查結束後，你可以通過針對該方法執行來停止監控。

小結

本文中我介紹了控制台API中最重要的幾個特性。這些額外的功能和快捷訪問的方式可以幫助你改善調試流程。如果你對控制台API中的其它功能感興趣，請參考以下鏈接：

Firebug』s page on the Command Line API（https://getfirebug.com/wiki/index.php/Command_Line_API）

Google Chrome』s page on the Command Line API（https://developers.google.com/web/tools/chrome-devtools/debug/command-line/command-line-reference）

Safari』s page on the Command Line API（https://developer.apple.com/library/mac/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html）

點擊展開全文

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！