From 66999dd65b87940c72bb461083a6dee87c8e1f15 Mon Sep 17 00:00:00 2001 From: Alan Agius <17563226+alan-agius4@users.noreply.github.com> Date: Mon, 6 Oct 2025 09:48:25 +0000 Subject: [PATCH] build: enable breakpoints in source files (#64220) This commit revamps the debugging setup and enabling developers to set breakpoints directly in the source TypeScript files. Key changes include: - Updated `launch.json` with source map path overrides to correctly map compiled output back to the original source code. - Switched from `external` to `linked` sourcemaps in the Bazel build configuration for better debugging support. - Consolidated the recommended VSCode settings into the main `launch.json` and `tasks.json`, removing the separate `recommended-*.json` files. - Updated the debugging documentation to reflect the new, simplified workflow. These changes significantly improve the developer experience for contributors working on the language service, making it much easier to debug and troubleshoot issues. This applies to both the framework packages and vscode-ng-langugage-service. PR Close #64220 --- .vscode/README.md | 2 - .vscode/launch.json | 56 +++++++-- .vscode/recommended-launch.json | 75 ------------ .vscode/recommended-settings.json | 4 +- .vscode/recommended-tasks.json | 109 ------------------ .vscode/tasks.json | 4 +- contributing-docs/building-with-bazel.md | 28 +++-- vscode-ng-language-service/BUILD.bazel | 2 +- vscode-ng-language-service/client/BUILD.bazel | 2 +- .../client/src/client.ts | 2 +- vscode-ng-language-service/package.json | 4 +- vscode-ng-language-service/server/BUILD.bazel | 6 +- .../server/package.json | 2 +- 13 files changed, 75 insertions(+), 221 deletions(-) delete mode 100644 .vscode/recommended-launch.json delete mode 100644 .vscode/recommended-tasks.json diff --git a/.vscode/README.md b/.vscode/README.md index e20581db2bf..873910d9b3a 100644 --- a/.vscode/README.md +++ b/.vscode/README.md @@ -8,8 +8,6 @@ To use the recommended configurations follow the steps below: - install the recommended extensions in `.vscode/extensions.json` - copy (or link) `.vscode/recommended-settings.json` to `.vscode/settings.json` -- copy (or link) `.vscode/recommended-launch.json` to `.vscode/launch.json` -- copy (or link) `.vscode/recommended-tasks.json` to `.vscode/tasks.json` - restart the editor If you already have your custom workspace settings, you should instead manually merge the file contents. diff --git a/.vscode/launch.json b/.vscode/launch.json index 31dab766db7..97ad8d08213 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -11,11 +11,7 @@ "--disable-extensions", "--extensionDevelopmentPath=${workspaceFolder}/vscode-ng-language-service" ], - "outFiles": [ - "${workspaceFolder}/dist/bin/vscode-ng-language-service/client/index.js", - "${workspaceFolder}/dist/bin/vscode-ng-language-service/server/index.js" - ], - "preLaunchTask": "vsce: watch bundles" + "preLaunchTask": "VSCE: watch bundles" }, { "type": "extensionHost", @@ -26,23 +22,63 @@ "--disable-extensions", "--extensionDevelopmentPath=${workspaceFolder}/dist/bin/vscode-ng-language-service/npm/vscode-ng-language-service/vsix_sandbox" ], - "sourceMaps": false, - "preLaunchTask": "vsce: package" + "preLaunchTask": "VSCE: package" }, { + "name": "VSCE: Attach to Server", "type": "node", "request": "attach", - "name": "VSCE: Attach to Server", "port": 6009, "restart": true, + "sourceMaps": true, "skipFiles": ["/**"], - "outFiles": ["${workspaceFolder}/dist/bin/vscode-ng-language-service/server/index.js"] + "sourceMapPathOverrides": { + "?:*/bin/*": "${workspaceFolder}/*" + }, + "resolveSourceMapLocations": ["!**/node_modules/**"] + }, + { + "name": "DEBUG: Attach to bazel test", + "type": "node", + "request": "attach", + "port": 9229, + "restart": true, + "timeout": 600000, + "sourceMaps": true, + "skipFiles": ["/**"], + "sourceMapPathOverrides": { + "?:*/bin/*": "${workspaceFolder}/*" + }, + "resolveSourceMapLocations": ["!**/node_modules/**"] + }, + { + "name": "DEBUG: Run bazel test (Custom Target)", + "type": "node", + "request": "launch", + "restart": true, + "timeout": 600000, + "runtimeExecutable": "pnpm", + "runtimeArgs": ["bazel", "test", "${input:bazelTarget}", "--config=debug"], + "console": "integratedTerminal", + "cwd": "${workspaceFolder}" } ], "compounds": [ { - "name": "VSCE: Dev Client + Server", + "name": "VSCE: Dev Client + Attach to Server", "configurations": ["VSCE: Launch Dev Client", "VSCE: Attach to Server"] + }, + { + "name": "DEBUG: Run bazel test (Custom Target) + Attach", + "configurations": ["DEBUG: Attach to bazel test", "DEBUG: Run bazel test (Custom Target)"] + } + ], + "inputs": [ + { + "id": "bazelTarget", + "type": "promptString", + "description": "Enter the Bazel test target (e.g., //path/to/my:unit_test)", + "default": "//packages/..." } ] } diff --git a/.vscode/recommended-launch.json b/.vscode/recommended-launch.json deleted file mode 100644 index 2b4439b9e1d..00000000000 --- a/.vscode/recommended-launch.json +++ /dev/null @@ -1,75 +0,0 @@ -{ - // Use IntelliSense to learn about possible attributes. - // Hover to view descriptions of existing attributes. - // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 - "version": "0.2.0", - "configurations": [ - { - "name": "Attach to bazel test ... --config=debug", - "type": "node", - "request": "attach", - "port": 9229, - "address": "localhost", - "restart": false, - "sourceMaps": true, - "localRoot": "${workspaceRoot}", - "remoteRoot": "${workspaceRoot}", - "stopOnEntry": false, - "timeout": 600000, - "outFiles": ["${workspaceFolder}/dist/out/**/packages/**/*.js"] - }, - { - "name": "Attach to bazel test ... --config=debug (no source maps)", - "type": "node", - "request": "attach", - "port": 9229, - "address": "localhost", - "restart": false, - "sourceMaps": false, - "localRoot": "${workspaceRoot}", - "remoteRoot": "${workspaceRoot}", - "stopOnEntry": false, - "timeout": 600000, - "outFiles": ["${workspaceFolder}/dist/out/**/packages/**/*.js"] - }, - { - "name": "IVY:packages/core/test/acceptance", - "type": "node", - "request": "launch", - "program": "${workspaceFolder}/node_modules/.bin/bazelisk", - "args": ["test", "packages/core/test/acceptance", "--config=debug"], - "port": 9229, - "address": "localhost", - "restart": true, - "sourceMaps": true, - "timeout": 600000, - "outFiles": ["${workspaceFolder}/dist/out/**/packages/**/*.js"] - }, - { - "name": "IVY:packages/core/test/render3", - "type": "node", - "request": "launch", - "program": "${workspaceFolder}/node_modules/.bin/bazelisk", - "args": ["test", "packages/core/test/render3", "--config=debug"], - "port": 9229, - "address": "localhost", - "restart": true, - "sourceMaps": true, - "timeout": 600000, - "outFiles": ["${workspaceFolder}/dist/out/**/packages/**/*.js"] - }, - { - "name": "IVY:packages/core/test", - "type": "node", - "request": "launch", - "program": "${workspaceFolder}/node_modules/.bin/bazelisk", - "args": ["test", "packages/core/test", "--config=debug"], - "port": 9229, - "address": "localhost", - "restart": true, - "sourceMaps": true, - "timeout": 600000, - "outFiles": ["${workspaceFolder}/dist/out/**/packages/**/*.js"] - } - ] -} diff --git a/.vscode/recommended-settings.json b/.vscode/recommended-settings.json index 37139416e2a..b683f271172 100644 --- a/.vscode/recommended-settings.json +++ b/.vscode/recommended-settings.json @@ -21,7 +21,5 @@ ".history": true }, "git.ignoreLimitWarning": true, - "gitlens.advanced.blame.customArguments": [ - "--ignore-revs-file .git-blame-ignore-revs" - ] + "gitlens.advanced.blame.customArguments": ["--ignore-revs-file .git-blame-ignore-revs"] } diff --git a/.vscode/recommended-tasks.json b/.vscode/recommended-tasks.json deleted file mode 100644 index 5f33ac12f98..00000000000 --- a/.vscode/recommended-tasks.json +++ /dev/null @@ -1,109 +0,0 @@ -{ - // See https://go.microsoft.com/fwlink/?LinkId=733558 - // for the documentation about the tasks.json format - "version": "2.0.0", - "tasks": [ - { - "label": "IVY:packages/core/test/...", - "type": "shell", - "command": "${workspaceFolder}/node_modules/.bin/bazelisk", - "args": [ - "test", - "packages/core/test", - "packages/core/test/acceptance", - "packages/core/test/render3", - ], - "group": "test", - "presentation": { - "reveal": "always", - "panel": "dedicated", - }, - }, - { - "label": "VE:packages/core/test/...", - "type": "shell", - "command": "${workspaceFolder}/node_modules/.bin/bazelisk", - "args": [ - "test", - "packages/core/test", - "packages/core/test/acceptance", - "packages/core/test/render3", - ], - "group": "test", - "presentation": { - "reveal": "always", - "panel": "dedicated", - }, - }, - { - "label": "IVY:packages/core/test/acceptance", - "type": "shell", - "command": "${workspaceFolder}/node_modules/.bin/bazelisk", - "args": [ - "test", - "packages/core/test/acceptance", - ], - "group": "test", - "presentation": { - "reveal": "always", - "panel": "dedicated", - }, - }, - { - "label": "VE:packages/core/test/acceptance", - "type": "shell", - "command": "${workspaceFolder}/node_modules/.bin/bazelisk", - "args": [ - "test", - "packages/core/test/acceptance", - ], - "group": "test", - "presentation": { - "reveal": "always", - "panel": "dedicated", - }, - }, - { - "label": "IVY:packages/core/test", - "type": "shell", - "command": "${workspaceFolder}/node_modules/.bin/bazelisk", - "args": [ - "test", - "packages/core/test", - ], - "group": "test", - "presentation": { - "reveal": "always", - "panel": "dedicated", - }, - }, - { - "label": "VE:packages/core/test", - "type": "shell", - "command": "${workspaceFolder}/node_modules/.bin/bazelisk", - "args": [ - "test", - "packages/core/test", - ], - "group": "test", - "presentation": { - "reveal": "always", - "panel": "dedicated", - }, - }, - { - "label": "IVY:packages/core/test/render3", - "type": "shell", - "command": "${workspaceFolder}/node_modules/.bin/bazelisk", - "args": [ - "test", - "packages/core/test/render3", - ], - "group": "test", - "presentation": { - "reveal": "always", - "panel": "dedicated", - }, - }, - ], -} diff --git a/.vscode/tasks.json b/.vscode/tasks.json index 3cbabd8ff48..5520fa6f29a 100644 --- a/.vscode/tasks.json +++ b/.vscode/tasks.json @@ -3,7 +3,7 @@ "tasks": [ { "type": "shell", - "label": "vsce: watch bundles", + "label": "VSCE: watch bundles", "command": "pnpm --filter=ng-template run watch", "isBackground": true, "group": { @@ -25,7 +25,7 @@ }, { "type": "shell", - "label": "vsce: package", + "label": "VSCE: package", "command": "pnpm --filter=ng-template run package" } ] diff --git a/contributing-docs/building-with-bazel.md b/contributing-docs/building-with-bazel.md index 3cdb26c69e6..8531ef20217 100644 --- a/contributing-docs/building-with-bazel.md +++ b/contributing-docs/building-with-bazel.md @@ -97,22 +97,28 @@ First time setup: - Add the following to the `configurations` array: ```json - { - "type": "node", - "request": "attach", - "name": "Attach to Remote", - "port": 9229 - } +{ + "name": "Attach to Process", + "type": "node", + "request": "attach", + "port": 9229, + "restart": true, + "timeout": 600000, + "sourceMaps": true, + "skipFiles": ["/**"], + "sourceMapPathOverrides": { + "?:*/bin/*": "${workspaceFolder}/*" + }, + "resolveSourceMapLocations": ["!**/node_modules/**"] +} ``` -**Setting breakpoints directly in your code files may not work in VSCode**. This is because the -files you're actually debugging are built files that exist in a `./private/...` folder. -The easiest way to debug a test for now is to add a `debugger` statement in the code -and launch the bazel corresponding test (`pnpm bazel test --config=debug`). +The easiest way to debug a test for now is to add a `debugger` statement or add a break point +in the code and launch the bazel corresponding test (`pnpm bazel test --config=debug`). Bazel will wait on a connection. Go to the debug view (by clicking on the sidebar or Apple+Shift+D on Mac) and click on the green play icon next to the configuration name -(ie `Attach to Remote`). +(ie `Attach to Process`). ### Debugging a Karma Test diff --git a/vscode-ng-language-service/BUILD.bazel b/vscode-ng-language-service/BUILD.bazel index ae8c85e744c..ed565efbd72 100644 --- a/vscode-ng-language-service/BUILD.bazel +++ b/vscode-ng-language-service/BUILD.bazel @@ -26,7 +26,7 @@ expand_template_rule( "0.0.0-PLACEHOLDER": "{{BUILD_SCM_VERSION}}", }, substitutions = { - "../dist/bin/vscode-ng-language-service/client/index": "./index", + "../dist/bin/vscode-ng-language-service/client/src/extension.js": "./index", }, template = "package.json", ) diff --git a/vscode-ng-language-service/client/BUILD.bazel b/vscode-ng-language-service/client/BUILD.bazel index 521c7d5b902..11060f8d610 100644 --- a/vscode-ng-language-service/client/BUILD.bazel +++ b/vscode-ng-language-service/client/BUILD.bazel @@ -29,7 +29,7 @@ esbuild( # Do not enable minification. It seems to break the extension on Windows (with WSL). See #1198. minify = False, platform = "node", - sourcemap = "external", + sourcemap = "linked", visibility = ["//vscode-ng-language-service:__pkg__"], deps = [ "//:node_modules/source-map-support", diff --git a/vscode-ng-language-service/client/src/client.ts b/vscode-ng-language-service/client/src/client.ts index 944b6a23f2d..4751aa4c319 100644 --- a/vscode-ng-language-service/client/src/client.ts +++ b/vscode-ng-language-service/client/src/client.ts @@ -313,7 +313,7 @@ export class AngularLanguageClient implements vscode.Disposable { // do not lazily evaluate the code so all breakpoints are respected '--nolazy', // If debugging port is changed, update .vscode/launch.json as well - '--inspect=6009', + '--inspect-brk=6009', ], env: { NG_DEBUG: true, diff --git a/vscode-ng-language-service/package.json b/vscode-ng-language-service/package.json index 44b6c729f0b..6e44f9f4c57 100644 --- a/vscode-ng-language-service/package.json +++ b/vscode-ng-language-service/package.json @@ -242,10 +242,10 @@ "onLanguage:html", "onLanguage:typescript" ], - "main": "../dist/bin/vscode-ng-language-service/client/index", + "main": "../dist/bin/vscode-ng-language-service/client/src/extension.js", "scripts": { "build:syntaxes": "bazel run //vscode-ng-language-service/syntaxes:syntaxes", - "watch": "ibazel build //vscode-ng-language-service/client:index //vscode-ng-language-service/server:index", + "watch": "ibazel build //vscode-ng-language-service/client/src //vscode-ng-language-service/server/src", "package": "bazel build //vscode-ng-language-service:npm --config=release", "test": "bazel test --test_tag_filters=unit_test //vscode-ng-language-service/...", "test:watch": "ibazel test --test_tag_filters=unit_test //vscode-ng-language-service/...", diff --git a/vscode-ng-language-service/server/BUILD.bazel b/vscode-ng-language-service/server/BUILD.bazel index a3e5d4eb00e..31a5c23d155 100644 --- a/vscode-ng-language-service/server/BUILD.bazel +++ b/vscode-ng-language-service/server/BUILD.bazel @@ -34,7 +34,7 @@ esbuild( # Do not enable minification. It seems to break the extension on Windows (with WSL). See #1198. minify = False, platform = "node", - sourcemap = "external", + sourcemap = "linked", deps = [ "//:node_modules/source-map-support", "//vscode-ng-language-service/server/src", @@ -55,7 +55,7 @@ esbuild( # Do not enable minification. It seems to break the extension on Windows (with WSL). See #1198. minify = False, platform = "node", - sourcemap = "external", + sourcemap = "linked", visibility = [ "//vscode-ng-language-service/integration:__subpackages__", ], @@ -72,7 +72,7 @@ expand_template_rule( "0.0.0-PLACEHOLDER": "{{BUILD_SCM_VERSION}}", }, substitutions = { - "../../dist/bin/vscode-ng-language-service/server/index.js": "./index.js", + "../../dist/bin/vscode-ng-language-service/server/src/server.js": "./index.js", }, template = "package.json", ) diff --git a/vscode-ng-language-service/server/package.json b/vscode-ng-language-service/server/package.json index 1c9723f9cb3..954c25228b2 100644 --- a/vscode-ng-language-service/server/package.json +++ b/vscode-ng-language-service/server/package.json @@ -11,7 +11,7 @@ "engines": { "node": "^20.11.1 || ^22.11.0" }, - "main": "../../dist/bin/vscode-ng-language-service/server/index.js", + "main": "../../dist/bin/vscode-ng-language-service/server/src/server.js", "bin": { "ngserver": "./bin/ngserver" },