Simplify Debugging in Eleventy and Nunjucks with an Easy Console.log Function

Easily Log to the Console in Eleventy with Nunjucks

If you're working with Eleventy and Nunjucks, you may sometimes need to log values to the console for debugging purposes. There's a neat trick that allows you to log values more easily from within your Nunjucks templates.

Here's how you can do it:

1. Open your Eleventy configuration file.
2. Add the following code to the file:

   eleventyConfig.addFilter('log', value => {
     console.log(value)
   });

   This code adds a new filter called 'log' to Nunjucks. Filters in Nunjucks allow you to modify or transform values in your templates.
3. Now, in any of your Nunjucks templates, you can use this filter like this:

   {{ someVariable | log }}

   This will log the value of `someVariable` to the console.

For example, if you have a variable called `person` with an object containing name and age properties, you can log it like this:

{{ person | log }}

And you'll see the entire `person` object printed in the console. Just pipe the value you want to log through the 'log' filter, and it'll be displayed on the page automatically.

This can be especially handy when you're working with complex data structures or debugging tricky template logic.

So, give it a try and make your debugging experience a little smoother with this simple console.log trick for Eleventy and Nunjucks!