英语

简体中文

调试

使用 VS Code 调试

安装 go install github.com/go-delve/delve/cmd/dlv@latest
安装 VS Code 扩展 rust-analyzer 和 CodeLLDB
构建 @rspack/cli 和 napi 绑定，运行 pnpm install && pnpm -w build:cli:debug
在 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.js.cn/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#

调试尝试#

调试