close
ガイド
設定
プラグイン
API
ブログ
概要
コントリビュート
ガイド
設定
プラグイン
API
ブログ
概要
コントリビュート

デバッグ

VS Code を使用したデバッグ

  1. インストール go install github.com/go-delve/delve/cmd/dlv@latest
  2. VS Code 拡張機能のインストール rust-analyzer と CodeLLDB
  3. pnpm install && pnpm -w build:cli:debug を実行して @rspack/cli と napi バインディングをビルドします。
  4. 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 は、デバッグビルドからのパニック情報を取得するために使用できます。

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: VS Code
  • デバッグ対象: rspack build ${projectRoot}/basic

まず、デバッグモードで rspack をビルドする必要があります。これを行うには、プロジェクトのルートディレクトリで次のコマンドを実行します。

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

VS Code で `launch.json` を設定する

.vscode/launch.json 内に2つのデバッグ設定を行う必要があります。

  • Node用アタッチ
{
  "name": "attach:node",
  "request": "attach", // refer: https://vscode.dokyumento.jp/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/",
}

次に、複合設定 を使用して、2つのコマンドを組み合わせることができます。

{
  "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"]
    }
  ]
}

デバッグの試み

次に、いくつかのブレークポイントを設定して、デバッグを開始します。

結果は次のようになります。