在Chrome中調(diào)試JavaScript

在Chrome中調(diào)試JavaScript

IntelliJ IDEA為您的客戶端JavaScript代碼提供了一個內(nèi)置調(diào)試器，可以與Chrome兼容。下面的內(nèi)容將指導您完成此調(diào)試器的基本步驟。

在開始之前，按照配置JavaScript調(diào)試器中的說明配置內(nèi)置調(diào)試器。要使用實時編輯功能并在瀏覽器中動態(tài)查看HTML和CSS中的更改，請安裝JetBrains IDE支持Chrome擴展。在HTML、CSS和JavaScript中的Live Edit中查找更多內(nèi)容。

調(diào)試在內(nèi)置服務器上運行的應用程序

注意：默認情況下，調(diào)試會話在具有自定義Chrome用戶數(shù)據(jù)的新窗口中啟動。要使用您熟悉的外觀打開新的Chrome實例，請在IntelliJ IDEA中配置Chrome以開始使用您的用戶數(shù)據(jù)。

IntelliJ IDEA有一個內(nèi)置的Web服務器，可用于預覽和調(diào)試您的應用程序。此服務器始終在運行，不需要任何手動配置。根據(jù)項目結(jié)構(gòu)，所有項目文件都通過根URL http://localhost:<built-in server port>/<project root>，在內(nèi)置服務器上提供。

開始調(diào)試

1. 根據(jù)需要在JavaScript代碼中設置斷點。
2. 打開引用JavaScript進行調(diào)試的HTML文件，或在“項目工具”窗口中選擇HTML文件 。
3. 在編輯器或選擇的上下文菜單上，選擇：Debug <HTML_file_name>。IntelliJ IDEA生成調(diào)試配置并通過它啟動調(diào)試會話。該文件將在瀏覽器中打開，并顯示“調(diào)試”工具窗口 。
   要保存自動生成的配置以供進一步重用，請在調(diào)試會話結(jié)束后在上下文菜單中選擇“保存<HTML_file_name>”。
4. 在“調(diào)試”工具窗口中，繼續(xù)執(zhí)行步驟：逐步執(zhí)行程序，停止并恢復程序執(zhí)行， 暫停時檢查它，查看實際的HTML DOM等。

示例

假設您有一個簡單的應用程序，包含index.html文件和index.js文件，其中index.html引用index.js。要使用內(nèi)置服務器開始調(diào)試此應用程序，請在編輯器中打開index.html并在上下文菜單中選擇：Debug'index.html'：

IntelliJ IDEA自動創(chuàng)建“運行/調(diào)試配置”，并啟動調(diào)試會話：

要重新啟動新的運行/調(diào)試配置，請單擊IntelliJ IDEA窗口的右上角的 ，或在主菜單上選擇：運行|調(diào)試：

調(diào)試在外部Web服務器上運行的應用程序

通常，您可能希望調(diào)試在外部開發(fā)Web服務器上運行的客戶端JavaScript，例如Node.js。

開始調(diào)試

1. 根據(jù)需要在JavaScript代碼中設置斷點。
2. 在開發(fā)模式下運行該應用程序。通常你需要為此運行：npm start。當開發(fā)服務器準備就緒時，在瀏覽器中復制運行應用程序的URL地址 - 您需要在運行/調(diào)試配置中指定此URL地址。
3. 創(chuàng)建JavaScript Debug類型的調(diào)試配置： 
   在主菜單上選擇：Run|編輯配置，單擊工具欄上的 ，然后從彈出列表中選擇：JavaScript Debug。在打開的“運行/調(diào)試配置：JavaScript調(diào)試”對話框中，指定提示：運行應用程序的URL地址?？梢詮臑g覽器的地址欄復制此URL。單擊“確定”保存配置設置。
4. 在工具欄上的“選擇運行/調(diào)試配置”下拉列表中選擇新創(chuàng)建的配置，然后單擊列表旁邊的 。運行配置中指定的URL地址將在瀏覽器中打開，并顯示“調(diào)試”工具窗口。
5. 在“調(diào)試”工具窗口中，繼續(xù)執(zhí)行操作：逐步執(zhí)行程序，停止并恢復程序執(zhí)行，暫停時檢查它，查看實際的HTML DOM等。

調(diào)試異步代碼

IntelliJ IDEA支持調(diào)試異步客戶端JavaScript代碼。IntelliJ IDEA識別異步代碼中的斷點，停止它們，并允許您單步執(zhí)行此類代碼。只要異步函數(shù)內(nèi)部出現(xiàn)斷點或您進入異步代碼，就會在“調(diào)試器”選項卡的“幀”窗格中添加一個新元素：Async call from <caller>。IntelliJ IDEA顯示完整的調(diào)用堆棧，包括調(diào)用者和異步操作開始的整個方式。

下圖顯示了JavaScript調(diào)試會話的示例。

調(diào)試器在第3行（breakpont）停止，然后在第5行（斷點）停止。單擊Step into，調(diào)試器將停在第5行（在function上），然后將移至第6行。

默認情況下，異步調(diào)試模式處于打開狀態(tài)。要禁用異步堆棧跟蹤，請在Registry中將js.debugger.async.call.stack.depth設置為0。

調(diào)試工作程序

IntelliJ IDEA支持調(diào)試Service工作程序和Web工作程序。IntelliJ IDEA識別每個工作程序中的斷點，并在“調(diào)試”工具窗口的“調(diào)試器”選項卡的“框架”窗格中將其作為單獨線程顯示其調(diào)試數(shù)據(jù) 。

請注意，IntelliJ IDEA只能調(diào)試專門的工作程序，目前不支持對共享工作程序進行調(diào)試 。

1. 在工作程序中設置斷點以進行調(diào)試。
2. 如果您使用的是Service工作程序，請確保選中“調(diào)試器”頁面上的“允許未簽名的請求”復選框 。否則，您的Service工作者在調(diào)試會話期間可能不可用：
   
   
3. 如上所述，在調(diào)試運行在外部web服務器上的客戶端JavaScript時，創(chuàng)建JavaScript調(diào)試類型的調(diào)試配置。
4. 在工具欄的“選擇運行/調(diào)試配置”下拉列表中選擇新創(chuàng)建的配置，然后單擊“調(diào)試”（ ）。

   運行配置中指定的HTML文件將在所選瀏覽器中打開，并打開“調(diào)試工具”窗口，其中“框架”下拉列表顯示所有工作程序：

   

   要檢查工作程序的數(shù)據(jù)（變量，監(jiān)視器等），請在列表中選擇其線程，并在Variables和Watches窗格中查看其數(shù)據(jù)。當您選擇另一個工作程序時，窗格的內(nèi)容會相應更新。