除錯

使用 VS Code 除錯

安裝 go install github.com/go-delve/delve/cmd/dlv@latest
安裝 VS Code 擴充功能 rust-analyzer 和 CodeLLDB
執行 pnpm install && pnpm -w build:cli:debug 建置 @rspack/cli 和 napi 綁定
在 VS Code 的「執行與除錯」索引標籤中，選擇 debug-rspack 以開始除錯 @rspack/cli 的初始啟動。此任務可以在 .vscode/launch.json 中設定，它會同時啟動 Node 和 Rust 除錯器。

追蹤

tracing 用於檢測 Rspack。

支援的追蹤層級為：

發布建置為 INFO、WARN 和 ERROR
除錯建置為 TRACE、DEBUG、INFO、WARN 和 ERROR

使用 RSPACK_PROFILE 環境變數來顯示追蹤資訊

RSPACK_PROFILE=TRACE=layer=logger rspack build
# filter for an event
RSPACK_PROFILE='TRACE=layer=logger&filter=rspack_core::compiler::compilation' rspack build
# with logger level
RSPACK_PROFILE='TRACE=layer=logger&filter=rspack_core::compiler::compilation=info' rspack build
# filter logs across multiple modules
RSPACK_PROFILE='TRACE=layer=logger&filter=rspack_core::compiler::compilation,rspack_core::build_chunk_graph::code_splitter' rspack build
# [fn_name] will show:
# - all functions calls to `fn_name`
# - the arguments(except for these in the `skip` list)
# - everything until this function returns
RSPACK_PROFILE='TRACE=layer=logger&filter=[build_chunk_graph]' rspack build
# compilation::chunk_asset is a custom instrument name
RSPACK_PROFILE='TRACE=layer=logger&filter=[compilation:chunk_asset]' rspack build
# log a specific function by their arguments
RSPACK_PROFILE='TRACE=layer=logger&filter=[compilation:chunk_asset{filename="main\.js"}]' rspack build
# It support regexp expression
RSPACK_PROFILE='TRACE=layer=logger&filter=[compilation:chunk_asset{filename=".*\.js"}]' rspack build
# disable ansi color escape codes
NO_COLOR=1 RSPACK_PROFILE=TRACE=layer=logger rspack build

解析器

rspack_resolver 會發出一些追蹤資訊以進行除錯。

RSPACK_PROFILE='TRACE=filter=rspack_resolver=trace&layer=logger' rspack build

rust-lldb

rust-lldb 可用於從除錯建置中取得 panic 資訊

rust-lldb -- node /path/to/rspack build

啟動後，按 r 執行程式。

例如，examples/arco-pro 在此修復之前會崩潰，而沒有任何資訊

rspack/examples/arco-pro ❯ node ../../packages/rspack-cli/bin/rspack build Rspack ██████████████████████░░░░░░░░░░░░░░░░░░ 56% building ./pages/welcome zsh: bus error node ../../packages/rspack-cli/bin/rspack build

使用 rust-lldb

rspack/examples/arco-pro ❯ rust-lldb -- node ../../packages/rspack-cli/bin/rspack build

按 r，它會印出

Process 23110 stopped * thread #10, name = 'tokio-runtime-worker', stop reason = EXC_BAD_ACCESS (code=2, address=0x70000cc66560) frame #0: 0x0000000140d0db4b rspack.darwin-x64.node`swc_ecma_parser::parser::expr::ops::_$LT$impl$u20$swc_ecma_parser..parser..Parser$LT$I$GT$$GT$::parse_unary_expr::h29f49330a806839c(self=0x0000000000000000) at ops.rs:244 241 /// Parse unary expression and update expression. 242 /// 243 /// spec: 'UnaryExpression' -> 244 pub(in crate::parser) fn parse_unary_expr(&mut self) -> PResult<Box<Expr>> { 245 trace_cur!(self, parse_unary_expr); 246 let start = cur_pos!(self); 247 Target 0: (node) stopped.

混合除錯

本節旨在說明 JavaScript 和 Rust 之間進行混合除錯的方法。

先決條件

為了說明此過程，我將使用一個範例。首先，讓我們介紹我使用的環境和範例。

系統：macos
IDE：vscode
除錯目標：rspack build ${projectRoot}/basic

首先，您需要以除錯模式建置 rspack。為此，請在專案的根目錄中執行以下命令

npm run build:binding:debug
npm run build:js

在 VS Code 中設定 `launch.json`

有必要在 .vscode/launch.json 中設定兩個除錯設定。

附加 Node

{
  "name": "attach:node",
  "request": "attach", // refer: https://vscode.dev.org.tw/docs/editor/debugging#_launch-versus-attach-configurations
  "type": "node",
  // `9229` is the default port of message
  "port": 9229,
}

啟動 lldb

{
  "name": "launch:rust-from-node",
  "request": "launch",
  "type": "lldb", // it means we use `lldb` to launch the binary file of `node`
  "program": "node",
  "args": [
    "--inspect",
    "--enable-source-maps",
    "${workspaceFolder}/packages/rspack-cli/bin/rspack",
    "build",
    "-c",
    "${workspaceFolder}/examples/basic/rspack.config.js",
  ],
  // `cwd` is just for repack find the correctly entry.
  "cwd": "${workspaceFolder}/examples/basic/",
}

接下來，我們可以利用複合來合併這兩個命令

{
  "name": "mix-debug",
  "configurations": ["attach:node", "launch:rust-from-node"]
}

最後，您的 launch.json 應如下所示

{
  "configurations": [
    {
      "name": "attach:node",
      "request": "attach",
      "type": "node",
      "port": 9229
    },
    {
      "name": "launch:rust-from-node",
      "request": "launch",
      "type": "lldb",
      "program": "node",
      "args": [
        "--inspect",
        "--enable-source-maps",
        "${workspaceFolder}/packages/rspack-cli/bin/rspack",
        "build",
        "-c",
        "${workspaceFolder}/examples/basic/rspack.config.js"
      ],
      "cwd": "${workspaceFolder}/examples/basic/"
    }
  ],
  "compounds": [
    {
      "name": "mix-debug",
      "configurations": ["attach:node", "launch:rust-from-node"]
    }
  ]
}

除錯嘗試

接下來，我們可以引入一些中斷點並開始除錯。

結果如下

本頁內容

除錯#

使用 VS Code 除錯#

追蹤#

解析器#

rust-lldb#

混合除錯#

先決條件#

在 VS Code 中設定 launch.json#

除錯嘗試#

除錯