How to debug JavaScript code embedded in python

Hi, 

I am trying to debug javascript that is embedded in Python using PyCharm Professional edition. Please can you help me undertand what I need to do to be able to do this?

I am testing the problem with a python widget that inherits from AnyWidget which I call from Jupyter. The widget includes embedded javascript. When I set a breakpoint in the javascript and run the widget, the program does not stop at the breakpoint. 

Jupyter:

from testwidget import CounterWidget

counter = CounterWidget()
counter

Widget:

import anywidget
import traitlets

class CounterWidget(anywidget.AnyWidget):
    print('hello')
    _esm = "counterwidget.js"
    value = traitlets.Int(0).tag(sync=True)

JavaScript (counterwidget.js):

function render({ model, el }) {
    let count = () => model.get("value");
    let btn = document.createElement("button");
    btn.innerHTML = `count is ${count()}`;
    btn.addEventListener("click", () => {
        model.set("value", count() + 1);
        model.save_changes();
    });
    model.on("change:value", () => {
        btn.innerHTML = `count is ${count()}`;
    });
    el.appendChild(btn);
}
export default { render };

When I debug in chrome, I can see that the reason for this seems to be that a new js “file” is dynamically created each time I run the program, and the newly created file does not have the breakpoint. In chrome, I can work around the problem by stopping execution just after the creation of the js file, then set the breakpoint in the new js file. However, I can't do this from within PyCharm.

In addition, I followed the "Debugging JavaScript locally” tutorial on this page: https://www.jetbrains.com/help/pycharm/tutorial-debugging-javascript-with-product.html and was able to successfully stop at a brekpoint in the javascript. 

Please can you help me figure out what I need to do to stop in javascript from python?

Thanks,