I noticed something strange in my static blog: my blogging category page didn't list my post on statically generating my blog with Eleventy. Now it does, of course, since I fixed it. But it didn't, and that was weird. I tried using console.log to debug it, but it was annoying to try to figure out the right thing to print out in a long list of nested objects. Besides, console.log debugging is so… last century.

Since these tips for debugging in 11ty mentioned interactively debugging things in VS Code, I decided it was a good time to learn how to use Indium, a Javascript development environment for Emacs.

(use-package indium :hook ((js2-mode . indium-interaction-mode)))

After some trial and error, this was the .indium.json file that allowed me to use M-x indium-launch to start the Eleventy process.

{
  "configurations": [
    {
      "name": "11ty",
      "type": "node",
      "program": "node",
      "args": "./node_modules/.bin/eleventy"
    }
  ]
}

I originally had "inspect-brk": true in it as well, following the suggested configuration, but I found it easier to just set breakpoints in my files using indium-add-breakpoint (C-c b b, a keybinding set up by indium-interaction-mode in my js2-mode-hook).

Conditional breakpoints didn't seem to work, so I just put my logic in an if and set my breakpoint in there.

  categories.forEach((item) => {
    if (item.slug == 'blogging') {
      let post = data.collections._posts.find(o => o.inputPath.match(/statically-generating-my-blog-with-eleventy/));
      console.log(post);
    }
    ...
  }

When I set my breakpoint on the let post... line and ran M-x indium-launch, I got an interactive debugger at that breakpoint. I could also switch to the REPL console and type stuff. Yay!

As it turned out, the post I wanted wasn't showing up in the list of posts. It was because I had used eleventyConfig.setTemplateFormats and forgotten to include md for Markdown files. Once I figured out what was going on, it was easy to fix. This is what the debugger looks like. It adds values to the ends of lines, and you can evaluate things.

I'm looking forward to learning more about using Indium to debug scripts running in Node or Chrome. Slowly, slowly having some focused time to sharpen the saw!

If you use Emacs for Javascript development and you're curious about Indium, you can check out the documentation.