How to debug NPM packages(node_modules folder) ??

Prerequisite :

Basic knowledge of debugging, base application (for example rickAndMorty-Angular), VScode editor, NPM package (for example ng2-smart-table). Google chrome browser for running and debugging.

Lets Start

While developing, Some developers use third-party lib to develop applications, but sometimes that comes with unexpected output. to resolve and understand the problem developer uses debug mode. but third-party lib (NPM package) comes under node_modules, this folder may have multiple same files with different folder names.

2 ways to Debug the NPM package.

If NPM package source code is available on Github. use #1 if not then use #2

1. Use Angular CLI for Create lib with same NPM package (for example “ng2-smart-table”)

“ng g library ng2-smart-table”. this will update your angular.json and tsconfig.json file as a project

angular.json file

tsconfig.json

Then search desired Npm package for example “ng2-smart-table” in GitHub download files and replace the src folder with our local file

project folder

Then go to the main project inside go to module definition example “app.module.ts” replace import statement

Replace image statement

Now import statement will point to the new project folder. Set debug point on files and Run and Test the project.

If you want to test code changes under the “node_module ” folder then build lib using angular CLI command.

ng build <Project Name>

ng build ng2-smart-table

that will create minified files then replace files “dist/ng2-smart-table” with “node_modules/ng2-smart-table”.

Run Project it will compile new files and folders

Finally, you can Run and Test code changes

2. Go to your NPM package directory for example “node_modules/ng2-smart-table” there will be a folder with

“node_modules\<NPM package>\fesm2015” or

“node_modules\<NPM package>\__ivy_ngcc__\fesm2015”

inside that use ng2-smart-table.js file for Debugging. write debugger code and then Run and Test the project