docs: add debugging in VS Code (#530)

Co-authored-by: Copilot <[email protected]>

Author: 9aoy

website/docs/en/guide/advanced/_meta.json

@@ -1 +1 @@
-["debug-mode", "profiling"]
+["debugging", "profiling"]

website/docs/en/guide/advanced/debug-mode.mdx renamed to website/docs/en/guide/advanced/debugging.mdx

@@ -1,14 +1,21 @@
-# Debug mode
+# Debugging
+
+## Debug mode
 
 Rstest provides a debug mode to troubleshoot problems, you can add the `DEBUG=rstest` environment variable when building to enable Rstest's debug mode.
 
 ```bash
 DEBUG=rstest pnpm test
 ```
 
-In debug mode, Rstest will write test outputs to disk, and write the Rstest config, Rsbuild config and Rspack config to the dist directory, which is convenient for developers to view and debug.
+In debug mode, Rstest will:
+
+- Write test temporary outputs to disk
+- Write the Rstest config, Rsbuild config and Rspack config to the dist directory
+- Show full error stack traces
+- Set logger level to `verbose`
 
-## Rstest config file
+### Rstest config file
 
 In debug mode, Rstest will automatically generate `dist/.rsbuild/rstest.config.mjs` file, which contains the final generated Rstest config. In this file, you can know the final result of the Rstest config you passed in after being processed by the framework and Rstest.
 
@@ -44,3 +51,29 @@ export default {
 ```
 
 For a complete introduction to Rstest config, please see the [Configure Rstest](/guide/basic/configure-rstest) chapter.
+
+## Debugging in VS Code
+
+Rstest supports debugging in VS Code using `debugger` statements or breakpoints. Just open the `JavaScript Debug Terminal` and run the test command in the terminal.
+
+You can also add a dedicated launch configuration to debug a test file in VS Code:
+
+```json title=".vscode/launch.json"
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Debug Current Test File",
+      "type": "node",
+      "request": "launch",
+      "program": "${workspaceFolder}/node_modules/@rstest/core/bin/rstest.js",
+      "args": ["run", "${file}"],
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen",
+      "skipFiles": ["<node_internals>/**"]
+    }
+  ]
+}
+```
+
+Then you can start debugging the current test file directly in VS Code by pressing `F5` or go to the `Run and Debug` panel.

website/docs/zh/guide/advanced/_meta.json

@@ -1 +1 @@
-["debug-mode", "profiling"]
+["debugging", "profiling"]

website/docs/zh/guide/advanced/debug-mode.mdx renamed to website/docs/zh/guide/advanced/debugging.mdx

@@ -1,14 +1,21 @@
-# 开启调试模式
+# 调试
+
+## 开启调试模式
 
 为了便于排查问题，Rstest 提供了调试模式，你可以在执行构建时添加 `DEBUG=rstest` 环境变量来开启 Rstest 的调试模式。
 
 ```bash
 DEBUG=rstest pnpm test
 ```
 
-在调试模式下，Rstest 会将测试中间产物输出到磁盘，并将内部最终生成的 Rstest 配置、Rsbuild 配置和 Rspack 配置写入到产物目录下，便于开发者查看和调试。
+在调试模式下，Rstest 会：
+
+- 将测试中间产物输出到磁盘
+- 将最终生成的 Rstest 配置、Rsbuild 配置和 Rspack 配置写入到产物目录下
+- 打印出完整的错误栈信息
+- 将日志级别设置为 `verbose`
 
-## Rstest 配置文件
+### Rstest 配置文件
 
 在调试模式下，Rstest 会自动生成 `dist/.rsbuild/rstest.config.mjs` 文件，这里面包含了最终生成的 Rstest 配置。在这个文件里，你可以了解到你传入的 Rstest 配置在经过框架层和 Rstest 处理后的最终结果。
 
@@ -44,3 +51,29 @@ export default {
 ```
 
 关于 Rstest 配置项的完整介绍，请查看[配置 Rstest](/guide/basic/configure-rstest) 章节。
+
+## 在 VS Code 中调试
+
+Rstest 支持通过 `debugger` 语句或断点的方式在 VS Code 中进行调试。只需打开 `JavaScript Debug Terminal`，然后在终端中运行测试命令即可。
+
+你也可以添加一个启动配置来调试当前打开的测试文件：
+
+```json title=".vscode/launch.json"
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Debug Current Test File",
+      "type": "node",
+      "request": "launch",
+      "program": "${workspaceFolder}/node_modules/@rstest/core/bin/rstest.js",
+      "args": ["run", "${file}"],
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen",
+      "skipFiles": ["<node_internals>/**"]
+    }
+  ]
+}
+```
+
+之后，你可以直接在 VS Code 中按下 `F5` 键或前往 `Run and Debug` 面板来启动调试。