Technical Articles
debug a CAP app with UI5 TypeScript UI component with VS Code
With the recent advent of being able to use TypeScript for UI5 application development, and CAP holding a UI “slot” in its’ app
directory … why not combine the two?
And (even though you have extensive tests both for UI and Services in place…right? RIGHT?) find a way how to debug both CAP runtime and UI5 runtime, with the latter directly in its’ TypeScript sources?
Here we go: a simplified view of the file system layout of the entire project looks like this:
├── app
│ ├── src
│ │ ├── Component.ts
│ │ ├── control
│ │ │ └── *.ts
│ │ ├── controller
│ │ │ └── App.controller.ts
│ │ ├── i18n
│ │ │ └── ..
│ │ ├── img
│ │ │ └── ..
│ │ ├── index.html
│ │ ├── manifest.json
│ │ └── view
│ │ └── App.view.xml
│ ├── tsconfig.json
│ ├── ui5.yaml
│ └── webapp
│ ├── ..
│ └── ..
├── db
├── lib
│ ├── ..
│ └── ..
├── srv
│ ├── *.cds
│ └── *.js
└── test
├── ..
└── ..
It’s essentially the result of $> yo easy-ui5 ts-app
copied into the /app
folder of the CAP project.
cds
runtime debugging
Doing a $> cds run
will boot up the entire project – but issuing the same command in VS Code’s JavaScript debug terminal
…
$> cds run
Debugger attached. # <-- yes!
[cds] - Loading server from { file: './srv/server.js' }
[cds] - model loaded from 1 file(s):
# ...
This is already enough to have the cds
runtime halt on any breakpoint set in VS Code!But not only that,
cds
will also per convention pick up both the TypeScript- and the transpiled sources…
…and thus serve the UI5 app.
(Note: the transpilation from .ts
→ .js
happens via the predefined babel
-based npm script
from the “easy UI5” ts-app
-generator)
UI5 runtime: debugging in TypeScript sources
But because the Node.js
-debugger is already attached, a VS Code debug configuration in .vscode/launch.json
can be used to also create a debugging session for the UI5 TypeScript sources:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome", // this also works with MS edge: "pwa-edge"
"request": "launch",
"name": "app debug",
"url": "http://localhost:4004/webapp",
"webRoot": "${workspaceFolder}/app/webapp",
"sourceMaps": true,
"disableNetworkCache": true,
"showAsyncStacks": true
}
]
}
What this essentially does is provide a debug configuration app debug that maps the browser-url http://localhost.4004/webapp to the file system directory ./app/webapp and utilizies the sourceMaps to map .js
files back to their .ts
counterparts.
Now, when this debug config is run, chrome launches and the UI5 app will halt execution at set breakpoints:
🥳🥳🥳