How to debug NPM modules

Why would you want to debug NPM modules?

Suppose you’re working on a React application that uses a third-party library like keycloak-js to implement authentication. You want to try and understand how the keycloak-js library works with the help of a debugger.

You want to clone the keycloak-js source code and configure your build tool (e.g., Webpack) to use your cloned version of the library instead of an official release.

This way, you can use a debugger to add breakpoints in the source code and step through the code. Using a debugger can be an indispensable learning tool.

Okay, how?

Assuming you’re using Webpack, you should be able to do this by changing your package.json so that it looks like this:

{
  "dependencies": {
    "keycloak-js": "file:~/code/oss/keycloak/js/libs/keycloak-js",
  }
}

You want to enter the path that contains the package.json file for the NPM module. In the case of the keycloak-js library, the package.json resides in the js/libs/keycloak-js. For most NPM projects, package.json will be at the project’s root.

You’ll also want to check the package.json of the NPM package for the main field. Make sure the main field is pointing to a file that will update as you make changes. Most projects should have an NPM script that builds the file pointed to by main via an NPM script.

For example, the keycloak-js project provides a build script. You may have to tweak the default scripts or add a new one to suit your needs.

Troubleshooting

• You might need to delete the node_modules/ directory, the package-lock.json file and run npm install again.

Sources / further reading

• Local dependency in package.json – StackOverflow