"Attach to Node.js/Chrome" debugger - how to debug typescript?

You can't use "Attach to Node.js/Chrome" debug configuration to attach to a remote web server, this configuration is supposed to be used for attaching to Node.js applications run in debugger.

To debug Cordova/Angular application, you need using "JavaScript Debug" configuration. The host your application is run on doesn't matter, you just need to make sure that your application can be accessed by the URL specified in debug configuration.

How should the URL look like for a application that runs on a remote device connected via USB? We are using this project:

https://github.com/RemoteDebug/remotedebug-ios-webkit-adapter

It's a proxy running on localhost:9000 which serves as adapter that receives safari debug protocol data and transforms it into chrome debug prototcol data. Debuggers compatible with the chrome debug protocol can be attached.

This setup works with Google Chrome, but of course it'd be more comfortable to debug in webstorm. In Chrome we open chrome://inspect/#devices . After clicking on "inspect" a new window opens with just the Chrome developer tools, i.e. without address and tab bar.

location.href returns a URL starting with "file:///" on the remote device. I think I cannot use this URL in the webstorm's debug configuration dialog as this URL is relative to the remote device's file system.

It's not currently supported, please follow https://youtrack.jetbrains.com/issue/WEB-29544 for updates.

You can try using "Attach to Node.js/Chrome" here, with port set to 9000 (or whatever port you pass to remotedebug_ios_webkit_adapter), but we have never tested this configuration and I'm not sure it it works

Attaching to port 9000 already works. I can see the console output of my app and even run javascript. Typescript breakpoints are ignored. I think the "Attach to Node.js/Chrome" configuration doesn't respect the mapping files (js.map) like the other two configurations ("Node.js" and "JavaScript Debug") do.

The issue you provided seems to be about something else. However it's linked to https://youtrack.jetbrains.com/issue/WEB-23258 which sounds like my problem. It is fixed in WebStorm 2018.2. So it seems the fix doesn't work (however I actually use PhpStorm 2018.2 which shouldn't make a difference) - maybe I should open a new issue for this.

https://youtrack.jetbrains.com/issue/WEB-23258 is a request for remote mappings support. And "Attach to Node.js/Chrome" configuration does allow setting the mappings:

so the fix is clearly there. To create configuration similar to VSCode described in docs (https://github.com/RemoteDebug/remotedebug-ios-webkit-adapter#using-with-microsoft-vs-code), you can map "http://localhost:8080/*" to project src folder.

BTW, can you see your .ts files in the Scripts tab of the Debug tool window whele debugging?

It works now, this post gave me a hint: https://blog.jetbrains.com/webstorm/2017/01/debugging-angular-apps/

The important point is that you have to setup two mappings:

1. A mapping for the webserver or filesystem URL (*) where the source-map files are stored
2. A webpack:/// mapping for the typescript files

So in my case:

You can see the webpack-mapping for the angular-"src" directory (containing main.ts, index.html etc.) as described in the blog post above.

"www" is the Cordova web directory. It contains the output of the angular build + source-map files:

Thank you very much. Your link to the issue and the hint about the "script" tag (which I wasn't aware of before) were a big help for me.

(*) I hope I didn't confuse you because I told you that our app is loaded from the device's file system with a "file:///" URL earlier and now I'm talking about a public https URL. This is because at the moment we are redirecting the user in the app's web-view from file:/// to the https:// URL. This allows us to quickly update the application by just replacing the js, html and css  files from the www directory above on the web server.

Nice to hear it's working for you, and thanks for details! They would help other users with similar configuration to set up the debugger