Debugging JavaScript with Flask and PyCharm

3
votes

I just installed the professional version of PyCharm for its Flask features, but I'm having a lot of issues getting anything JavaScript related working.

Firstly, is there any way of getting the browser to open when you run the flask project? There doesn't seem to be a Flask run configuration, which means you have to use the default Python configuration, and that doesn't have the option to run a browser. I tried making a JavaScript Debug project that runs the server as a Before Launch command, but it still doesn't open the browser (either Chrome or Firefox)

Secondly, how do I get PyCharm to hit the JavaScript breakpoints? Even if I manually browse to the flask server (http://localhost:5555/), Intellij doesn't hit breakpoints in my JavaScript, even though the JetBrains plugin is installed (again, in both Firefox and Chrome). I suspect this may be related to the fact that PyCharm doesn't open the browser, which is why I mentioned that as my first point.

Can anyone with experience in PyCharm or IntelliJ help me out?

1
javascriptpythonintellij-ideaflaskpycharm
Not clear what you are trying to do. Create a configuration in pycharm to run your flask .py file, run it, then run your web browser and navigate to the configured port, can you explain why this is not sufficient? what more are you trying to do? - Oliver

1 Answers

1
votes

Just solved this problem.

You need some setup steps.

My prerequisites:

PyCharm on my local laptop

I'm developing on remote virtual machine (droplet DO, Ubuntu)

  1. Setup you web-server. It should be Apache, nginx whatever.
  2. Setup you web-app. You web-app should be runned on web-server.
  3. Setup your debug configuration:

a. Run->Edit configuration

b. Add->JavaScript debug

c. Specify you URL as real url from web-browser like: http://YOUR_IP:YOUR_PORT/directory/category

d. Specify File/Directory of HTML template and remote URL where your template located.

e. Debug it.

f. Profit ! :)

P.S. So lovely evaluate JavaScript variables from familiar PyCharm tool :)

P.S2: Almost forgot: Need install Chrome extension: https://www.jetbrains.com/help/pycharm/2016.3/debugging-javascript.html#d615717e345