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

Debug values more easily from within your Nunjucks templates.

New tools in your inbox every Monday!

Table of Contents

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!

May Featured Tools

Screpy

Stop worrying about missing important website metrics or checking multiple platforms!

Explore

Copy.ai

Forget writers block. Get blog posts, ads, social media content, poems, business ideas and more by just clicking a button. Our bots will write everything for you.

Explore

We Recommend...

Top products featured for the article.

Locomotive Scroll

A simple scroll library used by developers at Locomotive. Built as a layer on top of ayamflow's virtual-scroll, it provides smooth scrolling with support for parallax effects, toggling classes, and triggering event listeners when elements are in the viewport.

Explore

Kalender AI

Kalendar AI lands new customer meetings by sourcing and engaging from 340m+ ideal customer profiles.

Explore

Name Panda

Generate a name for your SaaS product.

Explore

Smart Copy by Unbounce

Say goodbye to your copywriting woes and hello to Smart Copy. It’s the simplest way to ideate, iterate and write high-quality content that engages customers. If you need it, we can write it.

Explore
See all Tools

A Little Extra Reading

Feel like reading more? Here are some extra articles to check out!

See all Articles