Django JavaScript debugging not working - how to do it?

The docs on how to debug JavaScript, well frankly they just suck.  I've got a basic Django project.  I've got a "Django server" configuration setup with the "Start JavaScript debugger automatically when debugging" checked.  When I start the debug chrome lauches and the jetbrains extension is installed and I can see the "Jetbrains IDE support is debugging this tab" string at the top of my browser.  Now in the "Debug Tool Window" I see the Scripts tab. In it I see the URL of the page I'm hitting and below that the text "(program):105:30.  What does this mean?  What is "program" what is 105, what is 30. This isn't explained in the docs anywhere.  When I click on this lower line it opens index.html instead of the page with the javascript I want to debug. I try to set the "specify local path" browse to that Django template, but PyCharm seems to ignore that and always use index.html - even if I specify the URL corresponding to the template in question the the run/debug configuration.

I've also tried setting up a "Javascript debug" run/debug configuration. With this PyCharm seems to find the right template with javascipt I want to debug in it, but it doesn't break on my breakpoints and breaks on other random lines where I don't have break points set.  When I hover the cursor over a break point I see text in a pop-up window in the IDE that states "Javascript breakpoints in HTML files are not supported.  In order to debug Javascript in HTML files open generated file from the scripts tab in debug tool window or by using 'Open in Pycharm context menu action in Firefox.

Firefox is not my default browser and the file that has the break point was opened from the scripts tab of the debug tool window.

Better doc's or a video is in order. I recently upgraded for better Javascript debugging and I'm not happy.  I expect advertised features to work and be have documented instructions.

Please sign in to leave a comment.