mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
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
This commit is contained in:
Alan Agius
committed by
Miles Malerba
Miles Malerba
parent
90d3b7f834
commit
66999dd65b
Vendored
-2
@@ -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.
|
||||
|
||||
Vendored
+46
-10
@@ -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": ["<node_internals>/**"],
|
||||
"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": ["<node_internals>/**"],
|
||||
"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/..."
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Vendored
-75
@@ -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"]
|
||||
}
|
||||
]
|
||||
}
|
||||
Vendored
+1
-3
@@ -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"]
|
||||
}
|
||||
|
||||
Vendored
-109
@@ -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",
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
Vendored
+2
-2
@@ -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"
|
||||
}
|
||||
]
|
||||
|
||||
@@ -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": ["<node_internals>/**"],
|
||||
"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 <target> --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 <target> --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
|
||||
|
||||
|
||||
@@ -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",
|
||||
)
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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/...",
|
||||
|
||||
@@ -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",
|
||||
)
|
||||
|
||||
@@ -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"
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user