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.
--cmedcoff@hotmail.com
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.
--cmedcoff@hotmail.com
Please sign in to leave a comment.
“(program):105:30” is likely a script where 105 is the line number and 30 is the column number.
You can right-click that row and a context menu might appear allowing you to click “Open Actual Source” to see what (program):105:30 is referencing.
In any event, this is not how you get Javascript Debugger to work in Pycharm so this info is a “good to know” but “problem still persists”.
In PyCharm 2023.1.6 for example, when you click the checkbox for “Start JavaScript debugger automatically when debugging”, TWO tabs open - 1 for the Django server and 1 for the JavaScript debugger.
NOW… in recent versions of PyCharm, the “Start JavaScript debugger automatically when debugging” doesn't do anything. By that, I mean, it does not actually start a JavaScript debugging session automatically when your Django project is ran using Debug mode.
It's very frustrating. You're right, it does not work as it used to. And it's always a struggle to get it started. You should always and ONLY use Chrome, not Firefox. You should always make sure no OTHER chrome instances are open and running at the time you launch the debugger.
I did find a work-around.
In PyCharm 2024.2.4 (Professional Edition), for example.
Create a Javascript Debugger manually. Make sure the “Ensure breakpoints are detected when loading scripts” is checked.
Have your Django Server Run/Debug configuration. Click “Modify options” and check the “Start JavaScript debugger…”
Finally, use Chrome, and make sure no Chrome browsers are open. Also make sure the Run browser host and port match in both run/debug configruations.
1. run the Localhost Javascript in “Debug” mode.
2. run the Django server in Debug mode immediately and quickly after running the Javascript debugger.
The order you run these in matters I think.
If you did this right, only one browser will open and the Javascript debugger “Debugger” tab will say “Connected to localhost:61871” or some random port.
Put a breakpoint on one of your Javascript files, go to the URL that should trigger the breakpoint, and make sure it engages the debugger.