Troubleshoot npm packages using VSCode
There are times when troubleshooting an external library may take hours or days.
There is that elephant in the room no one talks about, that you cannot fix just by searching on Bing or Google and sits in your codebase devouring resources every month. It might be just a dependency you had to add to your “package.json” and for some reason, it underperforms or doesn’t work.
While there are many ways to tackle the issue, I thought I would share a nice feature of Visual Studio Code that allows to easily debug the JavaScript files that comes with an npm package.
In order to get something from this method, is generally needed to have some basic understanding of how the library works (or learn it as you go).
Identify the entry point of your library
In my scenario, I had to look into a library called “ionic-app-scripts”. More info here:
In a nutshell, this module contains a bunch of scripts that wrap together different other libraries such as the TypeScript compiler and webpack.
Looking in the ionic-app-script repo, I was able to identify this script as the entry point:
It may also be found at:
launching it from inside the bin folder would require the following command line command to be used:
node .\ionic-app-scripts.js serveInvoke the entry point
VSCode comes shipped with a Node.js debugger.
Using it is very simple and it requires the following steps.
Open the entry point
Go into your project, in my case that is an ionic mobile application:
Open the debugger tab
Configure the launch.json file
Hit the little wheel on the top right corner of the Debug tab and configure your entry point. I added the following lines:
Play
Summary
npm modules are not black boxes and this helps to troubleshoot hard problems that you may find on your way and that might be tightened to your environment or how is configured.
