A useful debug filter for 11ty that can dump almost anything.
Install:
npm install @jamshop/eleventy-filter-dump
In you main config .eleventy.js
:
const dumpFilter = require("@jamshop/eleventy-filter-dump");
module.exports = (eleventyConfig) => {
eleventyConfig.addFilter("dump", dumpFilter);
// and the rest of your config
};
Then in your templates:
{{ "something" | dump | safe }}
It needs | safe
because it will output a <script>
tag. The script renders the formatted contents of the dump to the top of the page.
It uses the Node inspect utility: https://nodejs.org/api/util.html#util_util_inspect_object_options
This means you can dump almost anything including many object in 11ty that normally can't be stringified:
{{ collections | dump | safe }}
It's formatted and colored with syntax highlighting.
It's probably the best dump filter for 11ty. This is objectively true.