IntelliJ IDEA：運(yùn)行和調(diào)試Node.js

運(yùn)行和調(diào)試Node.js

此功能僅在Ultimate版本中受支持。

IntelliJ IDEA可幫助您運(yùn)行和調(diào)試Node.js應(yīng)用程序。您可以調(diào)試從IntelliJ IDEA啟動(dòng)的應(yīng)用程序以及附加到已運(yùn)行的應(yīng)用程序。

使用準(zhǔn)備

按照“插件管理”中的說明在“插件設(shè)置”頁面上安裝NodeJS插件。

運(yùn)行Node.js應(yīng)用程序

IntelliJ IDEA根據(jù)Node.js類型的運(yùn)行配置運(yùn)行Node.js應(yīng)用程序。IntelliJ IDEA還使用此配置在本地調(diào)試Node.js應(yīng)用程序。

創(chuàng)建Node.js運(yùn)行/調(diào)試配置

1. 從主菜單中，選擇：運(yùn)行|編輯配置，然后在“編輯配置”對(duì)話框中，單擊工具欄上的 ，并從彈出列表中選擇“Node.js”。將打開“運(yùn)行/調(diào)試配置：Node.js”對(duì)話框。

2. 指定要使用的Node.js解釋器。這可能是一個(gè)本地Node.js的解釋或適用于Linux在Windows子系統(tǒng)的Node.js。

3. 在“JavaScript文件”字段中，指定啟動(dòng)它的應(yīng)用程序的主文件的路徑（例如，Node.js Express應(yīng)用程序的bin/www）。

4. 可選：

• 指定自定義Node.js開頭的節(jié)點(diǎn)參數(shù)。例如，要使您的應(yīng)用程序可以進(jìn)行遠(yuǎn)程調(diào)試，請(qǐng)根據(jù)您的Node.js版本鍵入其中一個(gè)調(diào)試標(biāo)志：對(duì)于Node.js版本6.5及更高版本：--inspect=<debugger port>或--debug=<debugger port>用于早于8的任何Node.js版本。默認(rèn)調(diào)試器端口為5858。

• 在“應(yīng)用程序參數(shù)” 文本框中，指定要在啟動(dòng)時(shí)通過process.argv數(shù)組傳遞給應(yīng)用程序的Node.js特定參數(shù)。

運(yùn)行應(yīng)用程序

• 在工具欄上的“選擇運(yùn)行/調(diào)試配置”下拉列表中選擇新創(chuàng)建的Node.js配置，然后單擊它旁邊的 。應(yīng)用程序啟動(dòng)，“運(yùn)行工具”窗口打開，顯示應(yīng)用程序輸出。 

如果在應(yīng)用程序中使用像morgan這樣的日志記錄工具，并且此工具將日志寫入文件，則可以在“運(yùn)行”工具窗口的“控制臺(tái)”選項(xiàng)卡中查看這些日志。

在運(yùn)行Node.js應(yīng)用程序時(shí)管理日志

1. 如上所述，創(chuàng)建Node.js運(yùn)行/調(diào)試配置 ， 然后轉(zhuǎn)到“日志”選項(xiàng)卡。

2. 單擊“要在控制臺(tái)字段中顯示的日志文件”字段旁邊的 ，其中列出了可用的日志文件（如果有）。

3. 在打開的“編輯日志文件別名”對(duì)話框中，鍵入要在日志條目列表中顯示的別名，并指定日志文件的位置。選擇是要顯示此模式所涵蓋的所有文件還是僅顯示最后一個(gè)文件。

4. 單擊“確定”返回“Node.js運(yùn)行/調(diào)試配置”對(duì)話框，其中新的日志文件將添加到列表中。選中旁邊的“激活”復(fù)選框。要跳過以前的內(nèi)容，請(qǐng)選中“跳過內(nèi)容”復(fù)選框。

5. 可選：

   • 要啟用將控制臺(tái)輸出保存到日志文件，請(qǐng)選中“將控制臺(tái)輸出保存到文件”復(fù)選框并指定文件位置。

   • 選擇何時(shí)顯示控制臺(tái)。

   

調(diào)試Node.js應(yīng)用程序

IntelliJ IDEA可以更輕松地調(diào)試Node.js應(yīng)用程序。您可以在JavaScript或TypeScript代碼中放置斷點(diǎn)，這樣您就不再需要任何debugger和console.log()語句。您可以做很多事情來幫助您探索代碼并了解錯(cuò)誤的位置。在調(diào)試工具窗口中，您可以查看調(diào)用堆棧和當(dāng)前狀態(tài)的變量，在編輯器中計(jì)算表達(dá)式，并逐步執(zhí)行代碼。

本地和遠(yuǎn)程調(diào)試

IntelliJ IDEA支持兩種調(diào)試模式：

• 本地調(diào)試：在此模式下，您的應(yīng)用程序從IntelliJ IDEA啟動(dòng)，并在您的計(jì)算機(jī)上本地運(yùn)行。要調(diào)試它，請(qǐng)使用Node.js配置。
• 調(diào)試遠(yuǎn)程應(yīng)用程序：在此模式下，應(yīng)用程序在調(diào)試模式下的遠(yuǎn)程環(huán)境中運(yùn)行，IntelliJ IDEA連接到正在運(yùn)行的進(jìn)程。IntelliJ IDEA識(shí)別--inspect和--debug標(biāo)志，以便您可以使任何應(yīng)用程序可以進(jìn)行遠(yuǎn)程調(diào)試。IntelliJ IDEA支持使用Chrome調(diào)試協(xié)議和V8調(diào)試協(xié)議 （也稱為舊版協(xié)議）進(jìn)行遠(yuǎn)程調(diào)試。在任何一種情況下，都會(huì)通過該“附加到Node.js/Chrome”類型的運(yùn)行/調(diào)試配置啟動(dòng)調(diào)試會(huì)話。

在本地調(diào)試Node.js應(yīng)用程序

1. 必要時(shí)在Node.js代碼中設(shè)置斷點(diǎn)。

2. 如上所述，創(chuàng)建Node.js運(yùn)行/調(diào)試配置。如有必要，IntelliJ IDEA可以生成JavaScript調(diào)試配置，并與Node.js配置一起自動(dòng)啟動(dòng) ，如啟動(dòng)JavaScript調(diào)試配置和Node.js配置中所述。

3. 在工具欄上的“選擇運(yùn)行/調(diào)試配置”下拉列表中選擇新創(chuàng)建的Node.js配置，然后單擊它旁邊的 。將打開“調(diào)試工具窗口”。

4. 執(zhí)行將觸發(fā)使用斷點(diǎn)執(zhí)行代碼的步驟。

5. 切換到IntelliJ IDEA，現(xiàn)在啟用了調(diào)試工具窗口的控件。繼續(xù)調(diào)試會(huì)話 - 逐步執(zhí)行斷點(diǎn)，在幀之間切換，即時(shí)更改值，檢查暫停的程序，計(jì)算表達(dá)式以及設(shè)置監(jiān)視。

   
   

使用交互式調(diào)試器控制臺(tái)

在調(diào)試Node.js應(yīng)用程序時(shí)，IntelliJ IDEA在“調(diào)試”工具窗口中顯示兩個(gè)控制臺(tái)選項(xiàng)卡- 控制臺(tái)和調(diào)試器控制臺(tái)。

• 所述“控制臺(tái)”選項(xiàng)卡顯示節(jié)點(diǎn)過程本身的輸出，即，直接寫入process.stdout和process.stderr或使用console.*記錄。
  
  
• “調(diào)試器控制臺(tái)”讓您可以執(zhí)行JavaScript代碼，查看console.log消息，跳轉(zhuǎn)到console.log被調(diào)用的位置，并使用Chrome調(diào)試協(xié)議提供的其他控制臺(tái)功能。（提示：鍵入多行代碼片段時(shí)，按Shift + Enter開始新行，按Ctrl + Enter分割行。）
  
   

調(diào)試正在運(yùn)行的Node.js應(yīng)用程序

使用IntelliJ IDEA，您可以調(diào)試在遠(yuǎn)程環(huán)境中運(yùn)行的應(yīng)用程序。IntelliJ IDEA支持使用Chrome調(diào)試協(xié)議和V8調(diào)試協(xié)議（也稱為舊版協(xié)議）進(jìn)行遠(yuǎn)程調(diào)試。在任何一種情況下，都會(huì)通過“附加到Node.js/Chrome”配置啟動(dòng)調(diào)試會(huì)話。

使用Chrome調(diào)試協(xié)議進(jìn)行調(diào)試：

提示：使用此協(xié)議調(diào)試以--inspect標(biāo)志啟動(dòng)的應(yīng)用程序。此標(biāo)志用于6.3之后的Node.js版本。

1. 根據(jù)需要設(shè)置斷點(diǎn)。

2. 從主菜單選擇：運(yùn)行|編輯配置，然后在打開的“編輯配置”對(duì)話框中單擊 ，并從列表中選擇“附加到Node.js/Chrome”。將打開“運(yùn)行/調(diào)試配置：附加到Node.js/Chrome”對(duì)話框。

3. 在啟動(dòng)要連接的Node.js進(jìn)程時(shí)，指定運(yùn)行目標(biāo)應(yīng)用程序的主機(jī)以及傳遞給--inspect的端口。從“終端”工具窗口或控制正在運(yùn)行的應(yīng)用程序的“運(yùn)行”工具窗口中的信息消息Debugger listening <host>:<port>中復(fù)制端口號(hào)。默認(rèn)端口為9229。（提示：可選的，在“本地文件的遠(yuǎn)程URL”區(qū)域中指定項(xiàng)目文件夾的遠(yuǎn)程路徑。如果遠(yuǎn)程環(huán)境中的應(yīng)用程序根文件夾與本地根文件夾的名稱不同，這將非常有用。）

4. 在“附加到”區(qū)域中，選擇“以--inspect開頭的Chrome或Node.js> 6.3”。

5. 在工具欄上的選擇運(yùn)行/調(diào)試配置下拉列表中選擇新創(chuàng)建的“附加到Node.js/Chrome”配置， 然后單擊旁邊的 。在打開的“調(diào)試工具窗口”。 

6. 執(zhí)行將在斷點(diǎn)處觸發(fā)代碼的操作。對(duì)調(diào)試會(huì)話的控制返回到IntelliJ IDEA。

7. 切換到IntelliJ IDEA。在“調(diào)試”工具窗口中，逐步執(zhí)行斷點(diǎn)，在幀之間切換，即時(shí)更改值，檢查暫停的程序，計(jì)算表達(dá)式以及設(shè)置監(jiān)視。

使用V8調(diào)試協(xié)議進(jìn)行調(diào)試：

提示：使用此協(xié)議以調(diào)試使用--debug標(biāo)志啟動(dòng)的應(yīng)用程序。此標(biāo)志用于早于8的Node.js版本。

1. 如上所述，創(chuàng)建“附加到Node.js/Chrome”運(yùn)行/調(diào)試配置，并指定傳遞給--debug的主機(jī)和端口。默認(rèn)端口為9229。

2. 確保已使用以下參數(shù)在遠(yuǎn)程環(huán)境中啟動(dòng)要調(diào)試的應(yīng)用程序：--debug=<debugger port>。默認(rèn)端口是5858。

3. 在使用Chrome調(diào)試協(xié)議的調(diào)試會(huì)話期間繼續(xù) 。

調(diào)試使用nodemon的Node.js應(yīng)用程序

IntelliJ IDEA內(nèi)置調(diào)試器可以自動(dòng)重新連接到正在運(yùn)行的Node.js進(jìn)程。這使您可以調(diào)試使用nodemon實(shí)用程序的Node.js應(yīng)用程序，該實(shí)用程序會(huì)在代碼更新時(shí)自動(dòng)重新加載Node.js進(jìn)程。要調(diào)試此類應(yīng)用程序，您需要在調(diào)試模式下啟動(dòng)它（帶有--inspect標(biāo)志），然后使用“附加到Node.js/Chrome”調(diào)試配置并使用“自動(dòng)重新連接”選項(xiàng)連接到該應(yīng)用程序。

安裝nodemon：

• 打開嵌入式終端（Alt+F12）并在命令提示符下鍵入npm install --save-dev nodemon或yarn add nodemon --dev以將nodemon安裝為開發(fā)依賴項(xiàng)。

在調(diào)試模式下使用nodemon啟動(dòng)應(yīng)用程序：

• 創(chuàng)建并運(yùn)行以下npm debug腳本：

  debug": "nodemon --inspect <path_to_the_file_that_starts_your_application>

• 或者，如上所述，通過Node.js運(yùn)行/調(diào)試配置傳遞inspect標(biāo)志 。

調(diào)試應(yīng)用程序：

1. 根據(jù)需要在代碼中設(shè)置斷點(diǎn)。

2. 創(chuàng)建一個(gè)新的“附加到Node.js/Chrome”配置，如“調(diào)試正在運(yùn)行的Node.js應(yīng)用程序”中所述，并選中“自動(dòng)重新連接”復(fù)選框。 

   
   通常，您不需要更改配置中的端口（9229），因?yàn)樗钦{(diào)試器正在偵聽的默認(rèn)端口。但是，您可以仔細(xì)檢查在調(diào)試模式下運(yùn)行應(yīng)用程序時(shí)記錄的消息中使用的端口。
   
   
3. 在工具欄上的“選擇運(yùn)行/調(diào)試配置”下拉列表中選擇新創(chuàng)建的“附加到Node.js/Chrome”配置，然后單擊旁邊的 。調(diào)試器停在您在IntelliJ IDEA中的代碼中放置的斷點(diǎn)處。 

   現(xiàn)在，每次對(duì)代碼進(jìn)行任何更改并保存（Ctrl+S）它們時(shí)，nodemon都會(huì)自動(dòng)重新加載應(yīng)用程序，調(diào)試器將自動(dòng)重新連接到重新啟動(dòng)的進(jìn)程。

與Node.js配置一起啟動(dòng)JavaScript Debug配置

使用IntelliJ IDEA，您可以在兩種模式下調(diào)試應(yīng)用程序的服務(wù)器端代碼和客戶端JavaScript代碼：

• 另外，使用單次運(yùn)行配置。
• 同時(shí)，使用復(fù)雜的Node.js和JavaScript Debug配置。您所需要的只是配置瀏覽器的行為并啟用調(diào)試應(yīng)用程序的客戶端代碼。此功能是通過JavaScript Debug運(yùn)行配置提供的，因此從技術(shù)上講，IntelliJ IDEA會(huì)為服務(wù)器端和客戶端代碼創(chuàng)建單獨(dú)的運(yùn)行配置，但您可以在一個(gè)專用的Node.js運(yùn)行配置中指定所有設(shè)置。

創(chuàng)建復(fù)合Node.js/JavaScript調(diào)試配置：

1. 在主菜單上選擇：運(yùn)行|編輯配置。

2. 從列表中，選擇Node.js運(yùn)行配置以與JavaScript Debug配置一起啟動(dòng)。在打開的對(duì)話框中，切換到“瀏覽器/實(shí)時(shí)編輯”選項(xiàng)卡。

3. 選擇“啟動(dòng)后”，在啟動(dòng)調(diào)試會(huì)話時(shí)自動(dòng)啟動(dòng)瀏覽器。

4. 在下面的文本框中，鍵入要在其中打開應(yīng)用程序的URL地址。

5. 從“啟動(dòng)后”復(fù)選框旁邊的下拉列表中選擇要使用的瀏覽器。

   • 要使用系統(tǒng)默認(rèn)瀏覽器，請(qǐng)選擇“默認(rèn)”。

   • 要使用自定義瀏覽器，請(qǐng)從列表中選擇它。請(qǐng)注意，僅在Chrome中完全支持實(shí)時(shí)修改。

   • 要配置瀏覽器，請(qǐng)單擊“瀏覽（ ）”并調(diào)整打開的“Web瀏覽器”對(duì)話框中的設(shè)置。

6. 選擇“使用JavaScript調(diào)試器”。

在Node.js應(yīng)用程序中啟用Live Edit：

1. 按照“插件管理”中的說明在“插件設(shè)置”頁面上安裝LiveEdit插件

2. 在“設(shè)置/首選項(xiàng)”對(duì)話框（Ctrl+Alt+S）中，單擊“構(gòu)建，執(zhí)行，部署”下的“調(diào)試器”，然后單擊“實(shí)時(shí)編輯”。“實(shí)時(shí)編輯”頁面將打開。

3. 選擇“在更改時(shí)更新Node.js應(yīng)用程序”。指定在編輯器中更改代碼和在瀏覽器中顯示此更改之間的時(shí)間延遲：接受默認(rèn)值300 ms或使用相應(yīng)字段旁邊的旋轉(zhuǎn)框指定自定義值。

調(diào)試在遠(yuǎn)程環(huán)境中運(yùn)行的Node.js應(yīng)用程序

使用IntelliJ IDEA，您可以附加到在Vagrant框中，Docker容器中，或通過各種傳輸協(xié)議或通過SSH訪問的遠(yuǎn)程主機(jī)上運(yùn)行的Node.js應(yīng)用程序。

調(diào)試Docker容器中的Node.js應(yīng)用程序：

IntelliJ IDEA支持通過Node.js類型的運(yùn)行/調(diào)試配置調(diào)試Docker容器中的Node.js應(yīng)用程序。

在開始調(diào)試Docker上的Node.js應(yīng)用程序之前：

1. 確保已安裝，配置和運(yùn)行Docker。

在Docker上選擇Node.js解釋器：

1. 如上所述，創(chuàng)建Node.js運(yùn)行/調(diào)試配置 。

2. 從下拉列表中選擇“遠(yuǎn)程解釋器 -  Docker”類型的已配置Node.js解釋器之一，或者配置一個(gè)新解釋器。

指定Docker容器設(shè)置：

• 單擊“編輯Docker容器設(shè)置”字段旁邊的 ， 然后在打開的“編輯Docker容器設(shè)置”對(duì)話框中指定設(shè)置。 

• 或者，選擇“自動(dòng)配置”復(fù)選框以自動(dòng)執(zhí)行此操作。

配置端口綁定：

注意：即使使用自動(dòng)配置，您仍然需要將運(yùn)行應(yīng)用程序的端口與容器的端口綁定。這些公開的端口可在Docker主機(jī)的IP地址上使用（默認(rèn)為192.168.99.100）。調(diào)試Node.js Express應(yīng)用程序的客戶端時(shí)需要這樣的綁定。在這種情況下，您需要從計(jì)算機(jī)打開瀏覽器并通過應(yīng)用程序中指定的端口訪問容器主機(jī)上的應(yīng)用程序。

1. 在“Docker容器設(shè)置”字段中單擊 ，并在打開的“編輯Docker容器設(shè)置”對(duì)話框中展開“端口綁定”區(qū)域。

2. 單擊 ，并在打開的“端口綁定”對(duì)話框中，按如下方式映射端口：

   • 在“容器端口”文本框中，鍵入應(yīng)用程序中指定的端口。

   • 在“主機(jī)端口”文本框中，鍵入要從計(jì)算機(jī)在瀏覽器中打開應(yīng)用程序的端口。

   • 在“主機(jī)IP”文本框中，鍵入Docker主機(jī)的IP地址，默認(rèn)IP為192.168.99.100。主機(jī)在“設(shè)置/首選項(xiàng)”對(duì)話框的“Docker”頁面上的API URL字段中指定。

   • 單擊“確定”返回“編輯Docker容器設(shè)置”對(duì)話框，其中將新端口映射添加到列表中。

3. 單擊“確定”返回“運(yùn)行/調(diào)試配置：Node.js”對(duì)話框。

開始調(diào)試：

1. 根據(jù)需要在Node.js代碼中設(shè)置斷點(diǎn)。

2. 在工具欄上的“選擇運(yùn)行/調(diào)試配置”下拉列表中選擇新創(chuàng)建的Node.js配置，然后單擊它旁邊的  。

3. 如上所述，在本地調(diào)試會(huì)話期間繼續(xù) 。

Node.js多進(jìn)程調(diào)試

IntelliJ IDEA支持調(diào)試由child_process.fork()方法或集群模塊啟動(dòng)的其他Node.js進(jìn)程。此類進(jìn)程在“調(diào)試工具”窗口的“調(diào)試器”選項(xiàng)卡上的“框架”窗格中顯示為線程。 

1. 設(shè)置要調(diào)試的進(jìn)程中的斷點(diǎn)。

2. 創(chuàng)建Node.js運(yùn)行/調(diào)試配置。

3. 在工具欄的“選擇運(yùn)行/調(diào)試配置”下拉列表中選擇新創(chuàng)建的配置，然后單擊“調(diào)試（  ）”。

   打開“調(diào)試工具窗口”，“框架”下拉列表一旦啟動(dòng)就會(huì)顯示其他進(jìn)程作為線程：

   

   要檢查進(jìn)程的數(shù)據(jù)（變量，監(jiān)視等），請(qǐng)?jiān)诹斜碇羞x擇其線程，并在“變量和監(jiān)視”窗格中查看其數(shù)據(jù)。選擇其他進(jìn)程時(shí)，窗格的內(nèi)容會(huì)相應(yīng)更新。