Node.js 深度調試指南

来源:https://www.cnblogs.com/coderhf/archive/2020/06/27/13198193.html
-Advertisement-
Play Games

在 Node.js 項目開發過程中,隨著項目的發展,調用關係越來越複雜,調試工具的重要性日益凸顯。 Node(v6.3+)集成了方便好用 V8 Inspect 調試器,允許我們通過 Chrome DevTools 進行圖形化的調試和性能分析。同時,我們也可以使用 VS Code,Webstorm 等 ...


在 Node.js 項目開發過程中,隨著項目的發展,調用關係越來越複雜,調試工具的重要性日益凸顯。

Node(v6.3+)集成了方便好用 V8 Inspect 調試器,允許我們通過 Chrome DevTools 進行圖形化的調試和性能分析。同時,我們也可以使用 VS Code,Webstorm 等支持的編輯器對 Node.js 程式進行調試。

Node Inspect

要想啟動調試器,我們需要在啟動 Node.js 應用程式時傳入 --inspect 標誌,也可以使用該標誌提供自定義的埠,例如 --inspect=9222 將會在 9222 埠上接受開發者工具的連接。

一段簡單的代碼

 function log() {
   let a = 1;
   console.log(a);
   a = 2;
   console.log(a);
 }
 ​
 log();

 



使用 node --inspect 啟動

img

這時我們會發現,程式直接執行完成了,沒有中斷,導致我們無法使用 Chrome DevTools 進行調試。對於這種直接執行的代碼,我們可以使用 --inspect-brk 參數,在應用程式代碼的第一行終端,然後再進行調試。

img

Chrome DevTools

當開啟 Node 調試後,我們可以打開 Chrome,訪問 chrome://inspect ,在 Devices 中查找到我們的 Node.js 程式,點擊 inspect 打開調試面板進行操作

img

在調試工具視窗,我們可以設置斷點,運行程式進行調試

img

運行中程式調試

在某些情況下,我們可以需要對正在運行的 Node.js 程式進行調試,比如 Express Web 服務。我們不可能停止服務,再以 --inspect 運行調試。

對於這種情況,我們可以先獲取服務的進程 Id

img

向腳本進程發送 SIGUSR1 信號,就可以建立調試連接

 kill -SIGUSR1 34943
 複製代碼

img

在 Windows 平臺下,可以使用下麵的命令

 node -e 'process._debugProcess(30464)'

 



需要註意的是:這種調試任然會中斷服務進程的執行。

VS Code 調試

快速調試

對於簡單的應用程式,可以打開文件,按 F5 並選擇調試類型為 Node,即可進行調試

img

使用配置調試

對於大多數的調試場景,更推薦使用配置文件,因為它可以配置並保存調試設置的信息,方便我們下次快速使用。在 VC Code 中,調試配置通常存儲在 .vscode 文件夾下的 launch.json 文件中 。可以點擊左側欄目中的調試圖標,快速創建 launch.json 文件

img

VS Code 會自動下麵類似的 launch.json 調試配置文件,其中 program 代表我們需要調試的文件路徑,workspaceFolder 為當前工作區的路徑,通常是項目的根目錄

 {
   "version": "0.2.0",
   "configurations": [
     {
       "type": "node",
       "request": "launch",
       "name": "啟動程式",
       "skipFiles": ["<node_internals>/**"],
       "program": "${workspaceFolder}/index.js"
     }
   ]
 }

 



設置斷點,即可啟動調試,併在左側的樹視圖中看到變數對應的值以及堆棧信息

img

launch.json

launch.json 中有許多不同的屬性,支持不同的調試器和調試場景,下麵的屬性在每個啟動配置中是必須的

  • name - 當前調試配置項的名稱,可讀性要好,區分每個調試配置項

  • type - 用於此啟動配置的調試器的類型。每個已安裝的調試擴展都引入一種類型:例如node,php,go 等。

  • request - 當前調試項的類型,目前支持 launch 和 attach 兩種類型。launch 適合調試未啟動的程式,attach 則適合調試已經運行的程式。

一些其他比較有用的選項:

  • program - 啟動調試器時要運行的可執行程式或文件

  • args - 傳遞給程式進行調試的參數

  • env - 調試時的環境變數

  • envFile - 包含環境變數鍵值對的文件

  • stopOnEntry - 程式啟動時立即中斷

  • port - 連接到正在運行的調試器的埠

  • runtimeExecutable - 啟用調試的可執行 Runtime,預設是 Node

日誌點 - Logpoints

VS Code 提供了好用的調試小工具 - 日誌點,日誌點是斷點的一種變體,它不 "中斷 "進入調試器,而是將一條消息記錄到控制台,日誌點對於在調試不能暫停或停止的生產伺服器時註入日誌特別有用。

img

NPM 腳本調試

除了使用 node 啟動 Node.js 項目之外,VS Code 還支持自定義啟動程式 runtime,藉助這個能力,可以直接使用 NPM 啟動調試。如下麵,使用 npm run debug 啟動調試

 "scripts": {
     "debug": "node --inspect server.js"
  }

 

 

launch.json

 {
   "type": "node",
   "request": "launch",
   "name": "NPM 啟動",
   "runtimeExecutable": "npm",
   "runtimeArgs": ["run", "debug"],
   "port": 9229
 }

 



TypeScript 調試

VS Code 內置的 Node.js 的調試器支持 JavaScript Source Map,可以結合 Source Map 調試轉譯前的代碼,如 TypeScript,壓縮混淆的 JavaScript 代碼等都可以利用 Source Map 的支持調試源碼。

我準備了一個簡單的 TS Server Demo,可以直接 Clone 源碼本地測試。下麵是項目中的 src/index.ts 文件,創建了一個 HTTP Server

 import * as http from "http";
 ​
 let reqCount = 1;
 ​
 http
   .createServer((req, res) => {
     const message = `Request Count: ${reqCount}`;
 ​
     res.writeHead(200, { "Content-Type": "text/html" });
 ​
     res.end(`<html><div>${message}</div></html>`);
 ​
     console.log("handled request: " + reqCount++);
   })
   .listen(3000);
 ​
 console.log("server running on port 3000");

 

 

創建 tsconfig.json 配置,配置編譯生成 Source Map

 {
   "compilerOptions": {
     "outDir": "./dist",
     "sourceMap": true
   },
   "include": ["src/**/*"]
 }

 



使用 tsc 編譯一下,生成 JS 代碼:dist/index.js,創建調試配置,入口文件為 dist/index.js

 {
   "type": "node",
   "request": "launch",
   "name": "Launch Program",
   "program": "${workspaceFolder}/dist/index.js",
   "skipFiles": ["<node_internals>/**"]
 }

 

 

然後打斷點,啟動調試,瀏覽器訪問 http://localhost:3000,即可看到調試進入了 TS 文件

img

遠程調試

當我們需要在真實的伺服器等遠程運行環境調試 Node.js 時,我們可以利用上面提到的方式,在伺服器上開啟 Node.js 調試功能,併在本地連接上遠程的調試埠進行調試。

VS Code 預設支持遠程調試,我們需要 launch.json 配置文件中指定遠程服務的 IP 地址以及埠,如下所示:

 {
   "type": "node",
   "request": "attach",
   "name": "遠程調試",
   "address": "IP 地址",
   "port": "9229"
 }

 



VS Code 會自動載入遠程的文件,展示為只讀代碼供調試使用。

如果想要在調試的過程中編輯源代碼,或者更好的調試體驗,可以在遠程文件夾和本地項目之間設置一個映射。VS Code 提供了 localRoot 和 remoteRoot 屬性來映射本地 VS Code 項目和(遠程)Node.js 文件夾:

 {
   "type": "node",
   "request": "attach",
   "name": "遠程調試",
   "address": "IP 地址",
   "port": "9229",
   "localRoot": "${workspaceFolder}/src",
   "remoteRoot": "/var/user/"
 }

 



在建立映射關係後,即可在本地項目進行斷點調試,遠程的斷點信息會同步到本地項目,使用起來十分方便。

子進程調試

與普通進程調試原理一致,子進程調試時也需要傳入 --inspect 參數,這一點需要特別註意,否則無法啟動子進程調試。

如下通過子進程啟動 Server 的例子:

 // fork.js 文件
 const { spawn } = require("child_process");
 ​
 const sp = spawn("node", ["./fork_server.js"]);
 ​
 console.log("父進程 PID", sp.pid);
 ​
 sp.stdout.on("data", (data) => {
   console.log(`stdout: ${data}`);
 });
 ​
 sp.stderr.on("data", (data) => {
   console.error(`stderr: ${data}`);
 });

 



如果直接使用 node --inspect 啟動主進程的話,會發現只顯示了主進程的調試埠,這就是因為我們在程式中啟動子進程時沒有傳遞 --inspect 選項導致的。

img

這裡我們在啟動進程時添加上 --inspect 參數,同時註意要指定一個預設 9229 埠之外的埠號,避免調試埠衝突

 - const sp = spawn("node", ["./fork_server.js"]);
 + const sp = spawn("node", ["--inspect=9230", "./fork_server.js"]);

 



再次啟動,就能看到兩個調試信息輸出了

img

當然,怎麼能少得了強大的 VS Code 呢。VS Code 的 Node 調試器提供了一種機制,可以追蹤所有子進程,併在調試模式下,自動鏈接進程。可以通過 autoAttachChildProcesses 屬性開啟此機制:

 {
   "type": "node",
   "request": "launch",
   "name": "啟動程式",
   "program": "${workspaceFolder}/fork.js",
   "autoAttachChildProcesses": true
 }

 



啟動後,即可對父進程,或子進程進行斷點調試,效果如下

img

結語

大家有什麼要說的,歡迎在評論區留言

對了,小編為大家準備了一套2020最新的web前端資料,需要點擊下方鏈接獲取方式

1、點贊+評論(勾選“同時轉發”)

學習前端,你掌握這些。二線也能輕鬆拿8K以上

參考文獻

Debugging - Getting Started | Node.js

Debug Node.js Apps using Visual Studio Code


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 本博客SQL腳本地址:gitee 準備工作 已知有如下4張表: 學生表:student(學號,學生姓名,出生年月,性別) 成績表:score(學號,課程號,成績) 課程表:course(課程號,課程名稱,教師號) 教師表:teacher(教師號,教師姓名) 一、創建資料庫和表 為了演示題目的運行過程 ...
  • 1. 獲取中獎用戶ID,隨機彈出之後集合中就不存在了【set】 2. 存儲活動中中獎的用戶ID,保證同一個用戶不會中獎兩次【set】 3. 存儲粉絲列表,value 為粉絲的用戶ID,score 是關註時間【zset】 4. 存儲學生成績,value 為學生的ID,score 是考試成績【zset】... ...
  • 我們知道數據的存儲和檢索是兩個很重要的功能,當我們的數據量大了,怎麼能快速的檢索數據呢,答案是使用索引,可索引具體的技術實現有很多,選擇哪一種呢,我就以mysql為例記錄下它為什麼選擇了B+樹作為索引的實現方式。 1. 索引簡介 索引是一種用於快速查詢行的數據結構,就像一本書的目錄就是一個索引,如果 ...
  • 前言 本文將帶大家學習使用前端開發神器-charles,從基本的下載安裝到常見配置使用,為大家一一講解。 一、花式誇獎Charles 截取 Http 和 Https 網路封包。 支持重髮網絡請求,方便後端調試。 支持修改網路請求參數。 支持網路請求的截獲並動態修改。 支持模擬慢速網路。 好,騎上我心 ...
  • 一、堆和棧,數據的存儲方式 1.註意點: JS中是沒有堆和棧的概念,我們用堆和棧來講解,目的就是方柏霓講解,存儲方式是一致的。 2.存儲方式: 基礎數據類型進行值傳遞,複雜數據類型進行地址傳遞 <script> //1.基本數據類型 var str1 = "xiaoliao"; var str2 = ...
  • Web 創建設計 設計一個網站,需要認真思考和規劃。 最重要的是要知道你的訪問用戶。 用戶是瀏覽者 一個典型的訪問者將無法讀取您的網頁的全部內容! 無論您在網頁中發佈了多麼有用的信息,一個訪問者在決定是否繼續閱讀之前僅僅會花幾秒鐘的時間進行瀏覽。 請確保使你的觀點,在頁面的第一句!另外,您還需要在整 ...
  • powertools可以稱得上插件界的瑞士軍刀。 相對於VS Code中大多數插件的出現為瞭解決某一項弊端和不足,powertools則聚合了很多強大且實用的功能,能夠增強VS Code的功能,並提升VS Code的使用體驗。 powertools就如同之前使用iOS系統時使用過的一款軟體Workf ...
  • CommonJS 和 ES6 Module 究竟有什麼區別? 作為前端開發者,你是否也曾有過疑惑,為什麼可以代碼中可以直接使用 require 方法載入模塊,為什麼載入第三方包的時候 Node 會知道選擇哪個文件作為入口,以及常被問到的,為什麼 ES6 Module export 基礎數據類型的時候 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...