How to debug _esm javascript code?

[violagoodacre]

Hi,

I am new to Python and AnyWidget, and this is my first time posting to this forrum. I am using PyCharm and am trying to debug javascript that is assigned to _esm in my widget. Please can you help me undertand what I need to do to be able to do this?

I am testing the problem with the AnyWidget counter example with the javascript in a js file. When I set a breakpoint in the javascript and run the widget, the program does not stop at the breakpoint.

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, so the newly created file does not have the breakpoint, hence not stopping, as shown in the below screenshot. I can't find where I can view the actual counterwidget.js file in the Chrome developer tools.

This is the code I am using to show the problem:

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 };

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

Thanks in advance for your help with this.

[violagoodacre]

Here is another image that better illustrates the issue.

[manzt]

Thanks for bringing this up! The way anywidget ensures compatibility with Jupyter involves dynamically regenerating the JavaScript module (via dataurl), which is why I'm guessing setting breakpoints directly in Chrome DevTools doesn’t seem to work. If/when #628 lands, I think this could change this behavior and allow setting breakpoints in the UI... but not sadly not currently.

Personally, if I need to debug, I usually add a debugger statement directly in the source code. This reliably triggers the debugger in Chrome DevTools. For example:

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

Finally, if you really want to set breakpoints via the Chrome UI, you could serve the module separately (e.g., with a local development server) and load that directly in the notebook during development. For example:

class Widget(anywidget.AnyWidget):
   #  _esm = "counterwidget.js
    _esm = "http://localhost:8000/counterwidget.js"
    value = traitlets.Int(0).tag(sync=True)

In this setup, the browser will load http://localhost:8000/index.js, which won’t be dynamically generated. However, note that this approach opts out of anywidget's hot module replacement, as it removes visibility of the files. I’d recommend trying the debugger method first, but this is an option if needed.

[violagoodacre]

Thanks so much for your very helpful response.

Putting debugger into the code is new to me and should be what I need. I will try out the idea of serving the module separately if I feel I need it as it sounds a bit more complicated. I also found that (in Chrome) if I set a breakpoint in python code for just after the JavaScript file is created, then I can set the breakpoint in the correct file and step into it.