VSCode and Stencil (tsx): `debugger` statement doesn't put browser into debug mode

Question

I'm very new to debugging JavaScript, let alone Typescript, let alone a Stencil project that uses tsx files (which I assume are a certain type of reactive Typescript files).

I hoped that by adding a debugger statement into the code, using a refresh in Chrome the Debugging tools would show up. But nothing happens. If I add a console.log at the same place, it behaves as expected. But nothing happens with a debugger statement.

What to do? I don't want to debug with tons of console.log everywhere. 😏

I'm using VSCode by the way. Don't know whether that is relevant. I read in https://github.com/microsoft/vscode-js-debug that JavaScript debugging should be built into VSCode. I don't care whether I debug inside VSCode or inside Chrome - as long as I am able to debug somehow.

Here is the repository, if somebody wants to give it a try or checkout configuration files: https://github.com/NothingAG/adg-components

Thanks a lot.

Answer 1

Apparently the build tool (nx) runs a production build which is why debugger statements are automatically filtered out.

To fix it you can explicitly instruct Stencil to run a development build:

npm start -- --dev

Answer 2

Instead of adding debugger statements in code you can always add breakpoints in Chrome Developer Tools.

1. Load your app in the browser
2. Open Developer Tools in Chrome (for example right-click on a page and choose "Inspect")
3. In Developer Tools choose tab "Sources"
4. Open the file you want to debug by hitting command-P. An input field appears where you can enter the name of the file you want to debug
5. Add a breakpoint by clicking on the line number in the gutter

Next time your app hits the breakpoint the debugger shows up.