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…

…will actually attach Node.js‘s debugger to the cds runtime!

$> 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:

🥳🥳🥳