Recently I’ve stumbled upon a nasty error thrown by karma, that was raising in the middle of bundle compilation of our package. To make things worse, code compilation worked fine when launching the project in a browser. It was crashed only while preparing a bundle in order to perform unit tests.
The error said that there was an Invalid Left-Hand Side in arrow function parameters somewhere in our code. It provided a stack trace and a position in form of
FileName.ts:123 which it fine, right?
Unfortunately, the line indicated by the error was something like this:
which doesn’t really look like an arrow function ;).
It was clear, that the line indicated by the error, was pointing to a compiled file stored in memory, rather than to a TypeScript source file. I saw two possibilies to cope with this problem:
- Review the Webpack and/or karma configuration files, spend infinite amount of hours googling and troubleshooting, hoping that some fix will magically make the error point to a correct line, or…
- Debug karma launching our tests, chase down the error and find the source file in memory that causes problems.
All of your locally installed packages are located in the
node_modules directory. It has a special folder named
.bin which typically contains scripts that act as “executables” of the downloaded modules. So nothing stops us from pointing to them within the VSCode‘s
Let’s say that we’d like to debug a Webpack config file. Considering a following task being defined in a
its equivalent in
.vscode/launch.json would be:
After saving the
launch.json file, we can select Debug Webpack from Configuration selector, run the script with
F5 and… that’s it!
Happy debugging! 🐞