[Lldb-commits] [lldb] [lldb-dap][vscode] add instructions for debugging the VSCode extension (PR #195280)

[via lldb-commits]

llvmorg-github-actions[bot] wrote:


<!--LLVM PR SUMMARY COMMENT-->

@llvm/pr-subscribers-lldb

Author: Charles Zablit (charles-zablit)

<details>
<summary>Changes</summary>

This patch adds `compile-debug` to lldb-dap's `package.json` to be able to build the VSCode extension in debug mode. This allows running and debugging the extension without installing it.

---
Full diff: https://github.com/llvm/llvm-project/pull/195280.diff


2 Files Affected:

- (modified) lldb/docs/resources/lldbdap-contributing.md (+66) 
- (modified) lldb/tools/lldb-dap/extension/package.json (+1) 


``````````diff
diff --git a/lldb/docs/resources/lldbdap-contributing.md b/lldb/docs/resources/lldbdap-contributing.md
index c972dcd378b5c..16b9f263f7f1c 100644
--- a/lldb/docs/resources/lldbdap-contributing.md
+++ b/lldb/docs/resources/lldbdap-contributing.md
@@ -163,6 +163,72 @@ forcefully performs a deep copy of all symlinks.*
 *Note: It's possible to use this kind flow for local installations, but it's
 not recommended because updating `lldb-dap` requires rebuilding the extension.*
 
+## Debugging the VS Code extension
+
+To set breakpoints and step through the TypeScript source of the VS Code
+extension, you need an [Extension Development
+Host](https://code.visualstudio.com/api/get-started/your-first-extension#debugging-the-extension).
+
+### Pre-requisites
+
+Complete the steps in [Building the VS Code extension from source](#building-the-vs-code-extension-from-source)
+before proceeding.
+
+### Configuring `.vscode/launch.json`
+
+From the root of the `llvm-project` workspace, create (or add to)
+`.vscode/launch.json`:
+
+```json
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Launch Extension",
+      "type": "extensionHost",
+      "request": "launch",
+      "args": [
+        "--extensionDevelopmentPath=${workspaceFolder}/lldb/tools/lldb-dap/extension"
+      ],
+      "outFiles": [
+        "${workspaceFolder}/lldb/tools/lldb-dap/extension/out/**/*.js"
+      ],
+      "preLaunchTask": "compile-debug"
+    }
+  ]
+}
+```
+
+The `preLaunchTask` runs the `compile-debug` npm script, which bundles the
+extension with source maps so VS Code can resolve breakpoints back to the
+original TypeScript files. Add the corresponding task to `.vscode/tasks.json`:
+
+```json
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "compile-debug",
+      "type": "npm",
+      "script": "compile-debug",
+      "options": {
+        "cwd": "${workspaceFolder}/lldb/tools/lldb-dap/extension"
+      }
+    }
+  ]
+}
+```
+
+### Starting a debug session
+
+1. Open the **Run and Debug** panel (`Ctrl+Shift+D` / `Cmd+Shift+D`).
+2. Select **Launch Extension** from the dropdown and press **F5**.
+3. An Extension Development Host window opens with the local extension loaded.
+4. In the host window, set `lldb-dap.executable-path` to your locally built
+   `lldb-dap` binary (e.g. `llvm-build/debug/bin/lldb-dap`).
+5. Set breakpoints in the TypeScript source inside the original window and
+   start a debug session in the host window to hit them.
+
 ## Formatting the Typescript code
 
 This is also very simple, just run:
diff --git a/lldb/tools/lldb-dap/extension/package.json b/lldb/tools/lldb-dap/extension/package.json
index 923c437006556..081674b28479d 100644
--- a/lldb/tools/lldb-dap/extension/package.json
+++ b/lldb/tools/lldb-dap/extension/package.json
@@ -63,6 +63,7 @@
     "watch": "npm run bundle-webview && tsc -watch -p ./",
     "format": "npx prettier . --write",
     "package": "rm -rf ./out && vsce package --out ./out/lldb-dap.vsix",
+    "compile-debug": "npm run bundle-webview && npx esbuild src/extension.ts --bundle --outfile=out/extension.js --external:vscode --format=cjs --platform=node --target=node22 --sourcemap",
     "compile": "tsc -p ./",
     "publish": "vsce publish",
     "publish-ovsx": "ovsx publish",

``````````

</details>


https://github.com/llvm/llvm-project/pull/195280