"Attach to Node.js/Chrome" debugger - how to debug typescript? Follow
The config allows to define a file/directory to remote URL mapping, but I don't know how to use it for typescript.
Please sign in to leave a comment.
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.
How should the URL look like for a application that runs on a remote device connected via USB? We are using this project:
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
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:
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