Clear instructions on how to debug multi-module type script project in websotrm

I have hard time finding clear instructions on debugging a type script application using websotrm. 

In my case I have two completely separate projects (both type script).

First project exports multiple typescript components which are used in the second project.

I would like to have a setup which allows me to do quick changes in the first project and debug those changes by using the second project which uses components exposed by the first project to create an application.

I use npm ad the package manager.

This is what I've tried so far:

use npm link to create a symlink between two projects.

create a debug configuration in the second project.

With this setup I am able to set breakpoints in the code in first project source, but when step in to code in the second project all I see is one huge minified source file.

 

I appreciate if some one can post some instructions about how to do this using webstorm. 

 

3 comments
Comment actions Permalink

is it about client-side or server-side debugging?

I'd say that, for the debugger to work, you need placing all the source files in the current project, files located elsewhere can hardly be mapped to runtime code

0
Comment actions Permalink

It's client side debugging.

I am surprised that this is not possible with webstorm. My background is C++ mostly and we do this all the time with IDEs such as VS and Clion.
0
Comment actions Permalink

Try specifying URL mappings for remote files in your run configuration. You can open your app in Chrome Dev Tools to see what URLs your local source files have and set the mappings accordingly

0

Please sign in to leave a comment.