mixed debug between JavaScript and Rust.

[bvanjoi]

This discussion aims to illustrate the method for mixed debugging between JavaScript and Rust.

Prerequisites

To illustrate this process, I'll use an example. Let's start by introduce the environment and example I have used.

• System: macos
• IDE: vscode
• Debugging target: rspack build ${projectRoot}/examples/basic

Firstly, you need to build rspack in debug mode. To do this, execute the following commands in the project's root directory:

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

Configure launch.json in vscode

It's necessary to configure two debug configurations within .vscode/launch.json.

• attach for node:

{
  "name": "attach:node”,
  "request": "attach",  // refer: https://code.visualstudio.com/docs/editor/debugging#_launch-versus-attach-configurations
  "type": "node",
  // `9229` is the default port of message
  "port": 9229
}

• and launch for 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 correclty entry.
  "cwd": "${workspaceFolder}/examples/basic/"
}

Next, we can utilize compounds to amalgamate the two commands:

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

Finally, your launch.json should appear as follows:

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

Debugging Attempt

Next, we can introduce some breakpoints and commence debugging.

The result appears as follows:

2023-10-23.13.59.08.mov

[hardfist]

really nice explanation

[shuaiqidekaige]

不知为何，在我的电脑上无法正常断点，总是自动结束

[bvanjoi]

cannot be located in the ts file

This issue arises from the absence of a sourcemap for TypeScript. However, it's not something you need to worry about.

the breakpoints in rust still don’t take effect

Could you please set a breakpoint at the entry point of Rust, for example, at node_binding::Rspack::new

[shuaiqidekaige]

Filmage.2023-10-30_202104.mp4

[bvanjoi]

I suspect that the output of rust is in production mode. Could you please clean the output of the binding first, then rerun npm run build:cli:debug? The easiest way to clean is by deleting this project and re-cloning it.

[shuaiqidekaige]

I tried re-pulling the project and made sure to use npm run build:cli:debug，but it still doesn't work。I think this is a problem with vscode debug。

[h-a-n-a]

Would you try again with the latest configuration of launch.json in main?