Wednesday, November 02, 2016

IntelliJ Ultimate Debugging JavaScript from the LightBend Activator/Play Framework

Symptom

You tried to debug a {java | type|}script in Chrome browser and it does not fire a breakpoint.

You have already made sure that JetBrain extension is installed in Chrome and configured right.

You've also added the JavaScript debugging configuration, and the web page launches (e.g., http://localhost:9000)

Fix

There is one more missing piece to this puzzle. You need to map the URL for where the scripts come from. This is clearly documented in the IntelliJ documentation, but nevertheless, it is not intuitive enough that it took a while for me to find out.

The key is that you need to type in the Remote URL in the Remote URL list. This is NOT OPTIONAL for Play users. If you are running the "out of the box" configuration of Play framework, and putting in your *.js under the "public" directory somewhere, then all you need to do is to just type in /assets (will become http://assets after you save it without any ill effect) where the public folder is in the list. Save it and any JavaScript or Typescript (with a map) can be debugged.

Enjoy!