如何使用多種工具調試 Node.js 代碼

Node.js 是一個 JavaScript 運行時,基於與 Google Chrome 瀏覽器中使用的相同的 V8 引擎。它通常用於構建跨平台的伺服器端和終端應用程序。Node.js 在過去十年中變得越來越流行,因為它易於安裝、實用、速度快,並且允許客戶端 Web 開發人員在其他地方利用他們的技能。

但是,軟體開發仍然是一項複雜的任務,您的 Node.js 代碼有時會失敗。本教程演示了各種工具來幫助調試應用程序並找出問題的原因。

讓我們潛入水中。

Deno 是一個替代的 JavaScript 運行時。它與 Node.js 相似,但更新,它消除了一些裂縫和不一致。下面的工具和信息通常可以應用於 Deno 應用程序和 Node.js。

調試概述

「調試」是修復軟體缺陷的各種方法的名稱。修復錯誤通常很簡單。查找錯誤的原因可能要複雜得多,並且需要花費數小時的時間。

以下部分描述了您將遇到的三種一般類型的錯誤。

語法錯誤

您的代碼不遵循語言規則——例如,當您省略右括弧或拼錯諸如 console.lag(x) 之類的語句時。

一個好的代碼編輯器可以通過以下方式幫助發現常見問題:

  • 對有效或無效語句進行顏色編碼
  • 類型檢查變數
  • 自動完成函數和變數名
  • 突出顯示匹配的括弧
  • 自動縮進代碼塊
  • 檢測無法訪問的代碼
  • 重構雜亂的功能

VS Code 和 Atom 等免費編輯器對 Node.js、JavaScript 和 TypeScript(可轉換為 JavaScript)提供了很好的支持。在保存和測試代碼之前,通常可以發現基本語法問題。

像 ESLint 這樣的代碼 linter 也會報告語法錯誤、縮進錯誤和未聲明的變數。ESLint 是一個 Node.js 工具,您可以通過以下方式全局安裝:

高于海平面和 eslint -g

您可以使用以下命令從命令行檢查 JavaScript 文件:

eslint mycode.js

…但是使用編輯器插件更容易,例如用於 VS Code 的 ESLint 或用於 Atom 的 linter-eslint,它們會在您鍵入時自動驗證代碼:

VS 代碼中的 ESlintVS 代碼中的 ESlint。

邏輯錯誤

您的代碼運行但未按預期工作。例如,用戶在請求時沒有註銷;報告顯示不正確的數字;數據未完全保存到資料庫中;等等。

邏輯錯誤可能由以下原因引起:

  • 使用錯誤的變數
  • 不正確的條件,例如 if (a > 5) 而不是 if (a < 5)
  • 未能考慮運算符優先順序的計算,例如 1+2*3 的結果是 7 而不是 9。

運行時(或執行)錯誤

錯誤只有在應用程序執行時才會變得明顯,這通常會導致崩潰。運行時錯誤可能由以下原因引起:

  • 除以已設置為零的變數
  • 試圖訪問不存在的數組項
  • 嘗試寫入只讀文件

儘管以下開發技術可以提供幫助,但邏輯和運行時錯誤更難發現:

  1. 使用測試驅動開發:TTD 鼓勵您在開發函數之前編寫測試,例如,當 Z 作為參數傳遞時,X 從函數 Y 返回。這些測試在初始開發和後續更新期間運行,以確保代碼繼續按預期工作。
  2. 使用問題跟蹤系統:沒有比聲稱「您的軟體無法運行」的電子郵件更糟糕的了!問題跟蹤系統允許您記錄特定問題、記錄複製步驟、確定優先順序、分配開發人員並跟蹤修復進度。
  3. 使用源代碼控制:Git 之類的源代碼控制系統將幫助您備份代碼、管理修訂並確定引入錯誤的位置。在線存儲庫,包括 Github 和 Bitbucket,為小型或開源項目提供免費空間和工具。

您仍然會遇到 Node.js 錯誤,但以下部分描述了定位該難以捉摸的錯誤的方法。

設置適當的 Node.js 環境變數

在主機操作系統中設置的環境變數可以控制 Node.js 應用程序和模塊設置。最常見的是 NODE_ENV,通常在調試時設置為開發,或者在實時伺服器上運行時設置為生產。在 macOS 或 Linux 上設置環境變數:

NODE_ENV=發展

或在(經典)Windows 命令提示符下:

設置 NODE_ENV=development

或 Windows Powershell:

$env:NODE_ENV=”開發”

在流行的 Express.js 框架中,將 NODE_ENV 設置為 development 會禁用模板文件緩存並輸出詳細的錯誤消息,這在調試時可能會有所幫助。其他模塊可能提供類似的功能,您可以在應用程序中添加 NODE_ENV 條件,例如

// 在開發模式下運行?
const devMode = (process.env.NODE_ENV !== ‘production’);

if (devMode) {
console.log(‘應用程序正在開發模式下運行’);
}

您還可以使用 Node 的 util.debuglog 方法有條件地輸出錯誤消息,例如

從’util’導入{調試日誌};
const myappDebug = debuglog(‘myapp’);
myappDebug(‘記錄一些東西’);

此應用程序僅在 NODE_DEBUG 設置為 myapp 或 * 或 my* 等通配符時才會輸出日誌消息。

使用 Node.js 命令行選項

節點腳本通常使用 node 後跟入口腳本的名稱來啟動:

節點應用程序.js

您還可以設置命令行選項來控制各種運行時方面。用於調試的有用標誌包括:

  • –check
    語法檢查腳本而不執行
  • –trace-warnings
    當 JavaScript Promises 未解析或拒絕時輸出堆棧跟蹤
  • –enable-source-maps
    在使用諸如 TypeScript 之類的轉譯器時顯示源映射
  • –throw-deprecation
    在使用已棄用的 Node.js 功能時發出警告
  • –redirect-warnings=file將警告
    輸出到文件而不是 stderr
  • –trace-exit
    在調用 process.exit() 時輸出堆棧跟蹤。

將消息輸出到控制台

輸出控制台消息是調試 Node.js 應用程序的最簡單方法之一:

console.log(`someVariable: ${ someVariable }`);

很少有開發人員意識到還有許多其他控制台方法:

控制台方法 描述
.log(味精) 標準控制台消息
.log(‘%j’, obj) 將對象輸出為緊湊的 JSON 字元串
.dir (obj, opt) 漂亮列印對象屬性
.table(obj) 以表格格式輸出數組和對象
.錯誤(味精) 錯誤信息
.count(標籤) 增加一個命名的計數器和輸出
.countReset(標籤) 重置命名計數器
.group(標籤) 縮進一組消息
.groupEnd(標籤) 終止一個組
.time(標籤) 啟動一個命名的計時器
.timeLog(標籤) 報告經過的時間
.timeEnd(標籤) 停止一個命名的計時器
。痕迹() 輸出堆棧跟蹤(所有函數調用的列表)
。清除() 清除控制台

console.log() 還接受逗號分隔值的列表:

讓 x = 123;
console.log(‘x:’, x);
// x: 123

…儘管 ES6 解構提供了類似的輸出,但花費更少:

控制台.log({ x });
// { x: 123 }

console.dir() 命令以與 util.inspect() 相同的方式漂亮地列印對象屬性:

console.dir(myObject, { depth: null, color: true });

控制台爭議

一些開發人員聲稱你不應該使用 console.log() 因為:

  • 您正在更改代碼並且可能會更改某些內容或忘記刪除它,並且
  • 當有更好的調試選項時,就沒有必要了。

不要相信任何聲稱他們從未使用過 console.log() 的人!記錄既快又臟,但每個人都在某個時候使用它。使用您喜歡的任何工具或技術。修復一個錯誤比你找到它的方法更重要。

使用第三方日誌系統

第三方日誌系統提供更複雜的功能,例如消息傳遞級別、詳細程度、排序、文件輸出、分析、報告等。流行的解決方案包括cabinet、loglevel、morgan、pino、signale、storyboard、tracer 和winston。

使用 V8 檢查器

V8 JavaScript 引擎提供了一個可以在 Node.js 中使用的調試客戶端。使用節點檢查啟動應用程序,例如

節點檢查 app.js

調試器在第一行暫停並顯示 debug> 提示:

$ node inspect .\mycode.js
< 調試器正在監聽 ws://127.0.0.1:9229/143e23fb
< 如需幫助,請參閱:https ://nodejs.org/en/docs/inspector
<
ok
< 附加調試器。
<
在 mycode.js:1 開始時中斷
> 1 const count = 10;
2
3 for (i = 0; i < 計數器; i++) {
調試 >

輸入幫助以查看命令列表。您可以通過輸入以下內容逐步完成應用程序:

  • cont or c: 繼續執行
  • next 或 n:運行下一個命令
  • step or s:進入被調用的函數
  • out or o:跳出函數並返回調用語句
  • pause:暫停正在運行的代碼
  • watch(‘myvar’): 觀察一個變數
  • setBreakPoint() 或 sb():設置斷點
  • 重啟:重啟腳本
  • .exit 或 Ctrl | Cmd + D:退出調試器

誠然,這種調試選項既費時又笨拙。僅在沒有其他選項時使用它,例如當您在遠程伺服器上運行代碼並且無法從其他地方連接或安裝其他軟體時。

使用 Chrome 瀏覽器調試 Node.js 代碼

上面使用的 Node.js 檢查選項啟動了一個 Web Socket 伺服器,它在 localhost 埠 9229 上進行偵聽。它還啟動了一個基於文本的調試客戶端,但也可以使用圖形客戶端——例如內置於 Google Chrome 和基於 Chrome 的客戶端Chromium、Edge、Opera、Vivaldi 和 Brave 等瀏覽器。

訂閱時事通訊

想知道我們是如何將流量提高到 1000% 以上的嗎?

加入 20,000 多人的行列,他們會通過 WordPress 內幕技巧獲得我們的每周時事通訊!

現在訂閱

要調試典型的 Web 應用程序,請使用 –inspect 選項啟動它以啟用 V8 調試器的 Web Socket 伺服器:

節點——檢查 index.js

筆記:

  • index.js 被假定為應用程序的入口腳本。
  • 確保您使用帶有雙破折號的 –inspect 以確保您不會啟動基於文本的調試器客戶端。
  • 如果您想在文件更改時自動重新啟動應用程序,您可以使用 nodemon 而不是 node。

默認情況下,調試器只接受來自本地機器的傳入連接。如果您在其他設備、虛擬機或 Docker 容器上運行應用程序,請使用:

node –inspect=0.0.0.0:9229 index.js
節點檢查節點檢查選項。

您還可以使用 –inspect-brk 代替 –inspect 在第一行停止處理(設置斷點),以便您可以從頭開始逐步執​​行代碼。

打開基於 Chrome 的瀏覽器並在地址欄中輸入 chrome://inspect 以查看本地和聯網設備:

鉻檢查工具Chrome 檢查工具。

如果您的 Node.js 應用程序未顯示為遠程目標,則:

  • 單擊 Open dedicated DevTools for Node 並選擇地址和埠,或者
  • 檢查發現網路目標,單擊配置,然後添加運行它的設備的 IP 地址和埠。

單擊 Target 的檢查鏈接以啟動 DevTools 調試器客戶端。使用 DevTools 進行客戶端代碼調試的任何人都應該熟悉這一點:

Chrome 開發者工具Chrome 開發工具。

切換到源面板。您可以通過點擊 Cmd | 打開任何文件 Ctrl + P 並輸入其文件名(例如 index.js)。

但是,將項目文件夾添加到工作區更容易。這允許您直接從 DevTools 載入、編輯和保存文件(您是否認為這是一個好主意是另一回事!)

  1. 單擊 + 將文件夾添加到工作區
  2. 選擇 Node.js 項目的位置
  3. 點擊同意以允許文件更改

您現在可以從左側目錄樹載入文件:

Chrome DevTools 源面板Chrome DevTools 源面板。

單擊任何行號以設置由藍色標記表示的斷點。

調試基於斷點。這些指定調試器應在何處暫停程序執行並顯示程序的當前狀態(變數、調用堆棧等)

您可以在用戶界面中定義任意數量的斷點。另一種選擇是放置一個調試器;聲明到您的代碼中,當附加調試器時停止。

載入並使用您的 Web 應用程序到達設置斷點的語句。在此處的示例中,http://localhost:3000/ 在任何瀏覽器中打開,DevTools 將在第 44 行停止執行:

鉻斷點鉻斷點。

右側面板顯示:

因停機時間和 WordPress 問題而苦苦掙扎?Kinsta 是旨在節省您時間的託管解決方案!查看我們的功能

  • 一排操作圖標(見下文)。
  • 監視窗格允許您通過單擊 + 圖標並輸入變數名稱來監視變數。
  • Breakpoints 窗格顯示所有斷點的列表,並允許啟用或禁用它們。
  • Scope 窗格顯示所有本地、模塊和全局變數的狀態。您將最常檢查此窗格。
  • 調用堆棧窗格顯示了為達到這一點而調用的函數的層次結構。

Paused on breakpoint 上方顯示了一排操作圖標:

Chrome 斷點圖標Chrome 斷點圖標。

從左到右,它們執行以下操作:

  • resume execution:繼續處理直到下一個斷點
  • step over:執行下一個命令但停留在當前代碼塊內——不要跳轉到它調用的任何函數
  • step into:執行下一個命令並根據需要跳轉到任何函數
  • step out:繼續處理到函數結束,返回調用命令
  • step:與 step into 類似,但不會跳轉到非同步函數
  • 停用所有斷點
  • pause on exceptions:發生錯誤時停止處理。

條件斷點

有時有必要對斷點進行更多控制。假設您有一個完成 1,000 次迭代的循環,但您只對最後一次的狀態感興趣:

for (let i = 0; i < 1000; i++) {
// 在這裡設置斷點
}

與其單擊 resume execution 999 次,不如右鍵單擊該行,選擇 Add conditional breakpoint,然後輸入條件,例如 i = 999:

Chrome 條件斷點Chrome 條件斷點。

Chrome 以黃色而不是藍色顯示條件斷點。在這種情況下,斷點僅在循環的最後一次迭代時觸發。

日誌點

日誌點無需任何代碼即可有效實現 console.log()!當代碼執行任何一行時,可以輸出一個表達式,但它不會停止處理,這與斷點不同。

要添加日誌點,請右鍵單擊任意一行,選擇添加日誌點,然後輸入表達式,例如 ‘loop counter i’, i:

Chrome 日誌點Chrome 日誌點。

在上面的示例中,DevTools 控制台將循環計數器 i:0 輸出到循環計數器 i:999。

使用 VS Code 調試 Node.js 應用程序

VS Code 或 Visual Studio Code 是 Microsoft 提供的免費代碼編輯器,在 Web 開發人員中很受歡迎。該應用程序可用於 Windows、macOS 和 Linux,並使用 Electron 框架中的 Web 技術開發。

VS Code 支持 Node.js 並具有內置的調試客戶端。大多數應用程序無需任何配置即可調試;編輯器會自動啟動調試伺服器和客戶端。

打開啟動文件(例如 index.js),激活 Run and Debug 窗格,單擊 Run and Debug 按鈕,然後選擇 Node.js 環境。單擊任意行以激活顯示為紅色圓圈圖標的斷點。然後,像以前一樣在瀏覽器中打開應用程序——VS Code 在到達斷點時停止執行:

VS 代碼斷點VS 代碼斷點。

Variables、Watch、Call Stack 和 Breakpoints 窗格與 Chrome DevTools 中顯示的相似。Loaded Scripts 窗格顯示已載入的腳本,儘管許多腳本是 Node.js 內部的。

操作圖標工具欄允許您:

  • resume execution:繼續處理直到下一個斷點
  • step over:執行下一個命令,但停留在當前函數內——不要跳轉到它調用的任何函數
  • step into:執行下一個命令並跳轉到它調用的任何函數
  • step out:繼續處理到函數結束,返回調用命令
  • 重新啟動應用程序和調試器
  • 停止應用程序和調試器

與 Chrome DevTools 一樣,您可以右鍵單擊任意行以添加條件斷點和日誌點。

有關詳細信息,請參閱 Visual Studio Code 中的調試。

VS Code 高級調試配置

如果您想在另一台設備、虛擬機上調試代碼,或者需要使用其他啟動選項(例如 nodemon),則可能需要進一步的 VS Code 配置。

VS Code 將調試配置存儲在項目中 .vscode 目錄內的 launch.json 文件中。打開 Run and Debug 窗格,單擊 create a launch.json 文件,然後選擇 Node.js 環境來生成此文件。提供了一個示例配置:

VS Code 調試器配置VS Code 調試器配置。

可以將任意數量的配置設置定義為「配置」數組中的對象。單擊添加配置…並選擇適當的選項。

單個 Node.js 配置可以:

  1. 啟動進程本身,或
  2. 附加到調試 Web Socket 伺服器,可能在遠程機器或 Docker 容器上運行。

例如,要定義 nodemon 配置,請選擇 Node.js: Nodemon Setup 並在必要時更改「程序」入口腳本:

{
// 自定義配置
“version”: “0.2.0”,
“configurations”: [
{
“console”: “integratedTerminal”,
“internalConsoleOptions”: “neverOpen”,
“name”: “nodemon”,
“program”: ” ${workspaceFolder}/index.js”,
“request”: “launch”,
“restart”: true,
“runtimeExecutable”: “nodemon”,
“skipFiles”: [
“<node_internals>/**”
],
“type” :「pwa節點」
}
]
}

保存 launch.json 文件,nodemon(配置「名稱」)出現在 Run and Debug 窗格頂部的下拉列表中。單擊綠色運行圖標開始使用該配置並使用 nodemon 啟動應用程序:

使用 nodemon 進行 VS 代碼調試使用 nodemon 進行 VS Code 調試。

和以前一樣,您可以添加斷點、條件斷點和日誌點。主要區別在於,當文件被修改時,nodemon 會自動重啟你的伺服器。

有關詳細信息,請參閱 VS Code 啟動配置。

以下 VS Code 擴展還可以幫助您調試託管在遠程或隔離伺服器環境中的代碼:

  • 遠程——容器:連接到在 Docker 容器中運行的應用程序
  • 遠程——SSH:連接到遠程伺服器上運行的應用程序
  • 遠程 – WSL:連接到在 Linux 的 Windows 子系統 (WSL) 上運行的應用程序。

其他 Node.js 調試選項

Node.js 調試指南為一系列文本編輯器和 IDE 提供建議,包括 Visual Studio、JetBrains WebStorm、Gitpod 和 Eclipse。Atom 提供了一個節點調試擴展,它將 Chrome DevTools 調試器集成到編輯器中。

一旦您的應用程序上線,您可以考慮使用商業調試服務,例如 LogRocket 和 Sentry.io,它們可以記錄和回放真實用戶遇到的客戶端和伺服器錯誤。

需要一些幫助調試應用程序?🐛從這裡開始👇點擊推文

概括

從歷史上看,JavaScript 調試一直很困難,但在過去十年中已經有了巨大的改進。選擇與為其他語言提供的選擇一樣好——如果不是更好的話。

使用任何實用的工具來定位問題。console.log() 用於快速查找 bug 沒有任何問題,但對於更複雜的問題,Chrome DevTools 或 VS Code 可能更可取。這些工具可以幫助您創建更強大的代碼,並且您將花費更少的時間來修復錯誤。

你發誓的 Node.js 調試實踐是什麼?在下面的評論部分分享!

通過以下方式節省時間、成本並最大限度地提高站點性能:

  • 來自 WordPress 託管專家的即時幫助,24/7。
  • Cloudflare 企業集成。
  • 全球受眾覆蓋全球 29 個數據中心。
  • 通過我們內置的應用程序性能監控進行優化。

所有這些以及更多,在一個沒有長期合同、協助遷移和 30 天退款保證的計劃中。查看我們的計劃或與銷售人員交談以找到適合您的計劃。

相關文章