Tips for debugging in 11ty
Some quick debugging tips that I came up with whilst building my personal blog.
The 11ty documentation is really great, but when it comes to developing and debugging, I really prefer to use a live debugger. It can help to understand a problem, but also can serve as a really great way of understanding how you might go about hooking into a framework, in this case 11ty.
Using a filter to debug 11ty
In my config for 11ty projects I put in this little debugging filter.
You could use this filter to find out the available attributes on a post, for you to use in your template, for example.
I have a hero object on my posts:
In my code I can check out the variables, and have them logged to the console.
This might seem really silly, but I found this incredibly useful, especially when hooked up with a live debugger (shown later). On save of a file, I get the object that was passed to the filter, this can be really handy in seeing what variables you have to play with.
Where this becomes really great is if you use the VSCode debugger to run 11ty, as soon as you use the filter and hit save because of the
debugger statement you go right to the debug filter.
Debugging with VS Code
Sure you could
console.log, but using the VS Code debugger for this can be extremely helpful to do some of that variable treasure hunting.
To do this, you will need to create a new debug task, you can do this in the UI, but a quick way is to:
- Create a folder in your workspace called
- Create a file called inside
- Add a debug task for the
eleventyrunner, here is an example:
If you want to put it in live watch mode, set args to:
- Head over to the debugging pane and find the task called
11ty, set your breakpoints up and good to debug.
Putting this together, the following GIF shows how this can be a nice interactive workflow.