Debug Javascript in Python Flask app using Pycharm IDE

In this article, I will share steps on how to set up and debug javascript code in Python Flask using Pycharm. This setup could be extremely handy for developing Flask web apps.

Go Run -> Edit Configurations

Add Javascript Debug. I named it to js_debug configuration when creating one.

In the URL location set the URL which you get when you run your flask local web server.

Now run your flask web server first.

Run your Javascript Debug configuration in debug mode from the top right corner of the tool.

Remember you set up a URL http:localhost:5000 in the configuration, running the js_debug in debug mode will hit that URL which has a flask web server already running now and any breakpoints inserted in the javascript code of the app will be hit.

Enjoy debugging!!