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.
请先登录再写评论。
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
It's client side debugging.
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
Hi! And for the server side with pnpm?
This is a next.js app
Hello! Did you try the instructions from https://nextjs.org/docs/pages/building-your-application/configuring/debugging#using-the-debugger-in-jetbrains-webstorm?
In Next.js apps some code runs on the client end and the other - on server.
Javascipt Debug run configuration has to be used for debugging client-side code that is run in browser. NPM or Node.js configuration - for server-side code. You can start the dev script in debugger and then debug the Javascipt Debug configuration with your server URL.
Yes, I have done that.
Thank you for your quick reply, but I need one with more in-depth knowledge.
I can debug next.js app correctly, but I need to debug inside some installed and external modules, like xml-crypto, because I'm trying to sign xml documents.
Maybe the solution is to move this node.js code outside next.js and debug it.
But following this topic, maybe there's a method to do it inside a running next.js app.
Any other contributions are welcome!!
Not sure i follow you. Would you like to debug the code of the libraries installed in
node_modules? For this, you need adding breakpoints to files there, this should work when debugging the server-side code with Node,js run configuration (if the code is executed on the server side).