Can't get javascript debugging to work with Rider

Hopefully we can get this figured out. I only have two days of my trial and was ready to buy a license to the full suite of tools when i found out today that javascript debugging was not working for me. I probably spent 1/2 day trying to get it to work but unfortunately i didn't make any headway. I took lots of screenshots hopefully that helps. I am using Windows 10. Here is the version of rider i have:

Here is my configuration i have setup:

The red array is pointing to the front end web app that will serve the javascript file i want to debug. Right below you will see an npm script that is ran that uses webpack to build our javascript bundle. Most of our javascript exists in *.vue files (we use vue.js) & we use typescript. Source maps is inlined into the bundle. Here is how i have that specific .net core app defined:

As you can see i have javascript debugger enabled. As far as i know i have all the required javascript plugins installed/enabled:

So when  I have that "with javascript" checkbox checked about it creates the following when you run (Javascript Debug):

You can actually see my mouse hovering over the bundle i'm trying to debug into. When i run the project I actually can go into the developer tools in chrome and find the specic source files I want to debug into and set breakpoints there and they work but thats not a great experience. I can run the project either in VS Code or Visual Studio and i'm able to debug javascript but other than that i feel the experience in rider is quite superior to either VS Code or Visual Studio. I have tried to use both Chrome & Edge and neither work.

I would like to purchase the entire sweet but without javascript debugging abilities its a no go of course because we have quite a bit of front end code. Is there anyway i can get my trial extended until we figure this out?

thanks...

7 comments
Comment actions Permalink

>When i run the project I actually can go into the developer tools in chrome and find the specic source files I want to debug into and set breakpoints there

could you share screenshots illustrating this? What are your scripts URLs in Dev Tools? You could try mappings these URLs to the corresponding source roots in JavaScript Debug run configuration (see Debugging JavaScript Deployed to a Remote Server )

 

0
Comment actions Permalink

Elena Pogorelova Sure.  Here is a screenshot of chrome and me setting the breakpoint manually

Which is the same breakpoint i set in Rider:

 

If you need to see where in the source heiarchy the source file is here you go:

Its under webpack of cource since this is a webpack build.

Here is where the file is being served from in the browser:

which is a little different from where everything is being built to `wwwroot`. Dotnetcore of course, by default puts all build assets in `wwwroot` but when you run your site the root of your site is in wwwroot. I will read into the link you provide and will see if that makes a difference & let you know.

thanks....

0
Comment actions Permalink

Elena Pogorelova, OK i tried it and it doesn't seem to work. Rider seems to be confused on the difference between the webpack bundle & the actual vue file. Here is how i set it

and then Rider gave me an error where i set the breakpoint:

Of course we don't have a "payments.vue" being served. payments.vue is bundled in webpack in the "contribution-reporting.bundle.js" file. Hopefully this gives you a clue on whats going on wrong

0
Comment actions Permalink

Please try specifying the URL mappings for your source folder (Scripts/ts/contribution-reporting/components or whatever it looks like), not for a bundle. Copy the URL your payment.vue script has in Dev Tools (right-click on a script, Copy link address), remove the script name from URL (as this has to be a mapping for folder, not file), specify this URL as Remote URL for the components folder)

0
Comment actions Permalink

I didn't put the `http://` portion in. It didn't work. I also played with the different type of sourcemaps webpack will output. I tried the most aggressive sourcemaps & that didn't make a difference either. Elena Pogorelova

0
Comment actions Permalink

Hmm... From the dev tools screenshots it seems that the URL should start with webpack:// and not with http://. And you have again specified the mappings for the bundle instead of adding them for your src folder

0
Comment actions Permalink

I can get chrome to open with the developer tools using the --auto-open-devtools-for-tabs flag and the original source can then be seen in the scripts widow under webpack and opened with "show actual script". It is still not possible to set breakpoints in Rider but those set in Chrome are honored.

0

Please sign in to leave a comment.