How to debug notebooks?

[gnestor]

First, thank you for your work on this @GordonSmith 🙏 There is a lot of potential here and I imagine one day I will be working on Observable notebooks exclusively in VS Code.

I'm testing out the notebook extension and I'm having trouble rendering a cell that renders with no issues on observablehq.com:

Here's a link to the notebook: https://observablehq.com/@gnestor/table-demo

How can I debug this notebook in VS Code like I would by using the console in Chrome Devtools? I checked the "Output" panel and I don't see Observable JS in the list of available outputs.

[GordonSmith]

Thanks for the report, and yes this is still a WIP! The issue looks like a race condition with the "element" creation here:

  const element = html`<div style="padding-bottom: 15px; ${
    options. Style || ""
  };" />`;
  
  const hot = Handsontable(element, {
    width: "100%",
    height,
    licenseKey: "non-commercial-and-evaluation",
    data: options. Data,
    outsideClickDeselects: false,
    ...options
  });

In my world "element" has not been attached to the live DOM at the time you initialise Handsontable and it fails with an exception:

So how did I get to that point:

1. Downloaded your Notebook and opened it in VS Code
2. I enabled the Notebook preview option:
   
3. Next I opened the "Developer Tools":
   
4. At which point you are now debugging the Preview Page as a regular HTML page. So I enabled "Pause on caught exception" on skipped through the exceptions until I spotted one inside the Handson code base and worked it out from there...
5. Also your CSS files won't load as they need the "https" in the URL as they will default to "file" in my world.

[gnestor]

@GordonSmith Thank you for the detailed response. I had no idea that VS Code had a developer tools. I will use this method in the meantime. As for my specific error, what do you suggest as a workaround? Do I need to use document.createElement vs. the html template literal?