'PyCharm Django Javascript Debugger

I cannot figure out how to debug JavaScript code that is executed while loading a Django template.

I have installed the ChromeExtension (localhost and port 63342). Then I have created a RunConfiguration:

JsDebug with the url "http://localhost:63342/ThingShare/2/" Every time I try to debug this I receive :404 not found. The Debugger Console says : "Connected to JetBrains Chrome Extension"

The same url

"http://localhost:8000/ThingShare/2/" works like a charm. I have no clue where to continue here

Solution 1:^[1]

I could not get this thing to work properly. I switched to the chrome javascript debugger without any hassle

Solution 2:^[2]

Thought I'd leave this answer for anyone still looking to get Pycharm's Javascript breakpoints working.

After trying to get this working myself I found that if I check the "Run browser" box and also check the "Start Javascript debugger automatically when debugging" box then my Javascript breakpoints worked. Please see the attached image for configuration details.

Note that for this to work Pycharm opens a new browser window. You can only use this new window for debugging as it seems Pycharm makes a connection to that window specifically.

Hope this helps!

Solution 3:^[3]

Pycharm Pro version(prerequisite)

run -> Edit Configurations

Imgur

Solution 4:^[4]

If you press ctrl+shift (cmd+shift) when you click on the 'Starting development server' link, Pycharm will launch a debug browser window that will respond to breakpoints in your js code.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	mbieren
Solution 2	Rob Barber
Solution 3	Soulduck
Solution 4	Rahal Kanishka

'PyCharm Django Javascript Debugger

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]