after installing a typescript package, it compiled to js. since that, you could only see a bunch of js files and x.d.ts and xx.js.map. but sometimes, I want to debug the origin ts file. is some way to do that?
1
-
If using VS CODE - code.visualstudio.com/docs/typescript/typescript-debuggingMBB– MBB2020-10-20 05:48:38 +00:00Commented Oct 20, 2020 at 5:48
Add a comment
|
2 Answers
General
If you are working with a kind of src folder you can make use of vscode's launch settings. As you already wrote you genereate the sourcemaps which is required to debug the application.
How to do that on Browsers?
- Get the VSCode Extension which supports your browser used in development.
(Edge/Chrome/Firefox work fine) - Then you need to create a "launch.json" file inside you project under this path:
{projectRoot}/.vscode/launch.json
- Inside this json file you can now click on "Add Configuration" where you will find many different debuggers. You should choose a browser launch or attach. (launch obviously opens a new instance and attach just attaches to an existing instance of your browser)
{browserName}: launch
- Next you need to setup your webroot. This property should point to the folder where your index.html (or the index.js/.ts) root file of your project is.(You can use ${workspaceFolder} to get the path to the package.json)
Example: webRoot: "${workspaceFolder}/public"
- (optional) Now you may need to set some overrides to your sourcemap resolver as they're not always get found. Here you need to open your application inside the browser and search inside the tab "Sources" on the leftside tree view for your sourcemaps (files wich seem to be typescript files) and see under which path they are avaialable. If you found that path you add it to your overrides and map it to your source path.
"sourceMapPathOverrides": {
"webpack://app/*": "${workspaceFolder}/src/*"
}
If you now start that launch config by hitting F5 you should get a new Browser window with working breakpoints.
How to do on NodeJS?
Steps 1-3 is quite the same except you need to select the node.js configuration which best suites your needs.
Depending on your setup it should be working when hitting F5. If not ensure you have used the right entry point (index.js/.ts) in your configuration.
1 Comment
Lysander
Appreciate if it could be more detailed when it comes to NodeJS debugging.
There are a lot of tools that can accomplish the task, I'm using the vs code debugger and it's debugging over the ts files.
Related to the files, the d.ts files are only used for providing type information so that you can still work with typescript with a compiled versión of your ts code. The js.map is used by the debugger to map the inverse of the compiled code to the original.
