How do I print all data in a page?

[Zearin]

I just want to print out all the data to look at how it’s structured.

I basically want to do the equivalent of a console.dir(…) or console.inspect(…), but print the data within a <pre>…</pre> element.

Can I do this?

How?

[pdehaan]

You could make a custom filter:

https://github.com/pdehaan/11ty-1526/blob/d167c3cfd8ae3d7f9a49c73cc78d32aca3e70d97/.eleventy.js#L4

// https://nodejs.org/api/util.html#util_util_inspect_object_options
const inspect = require("util").inspect;

module.exports = (eleventyConfig) => {
  eleventyConfig.addFilter("debug", (content) => `<pre>${inspect(content)}</pre>`);
  // ...
};

NOTE: Using util.inspect() may not be 100% required, but I've found it useful when encountering circular references.

Then, in your template, you can use it like this:

<div>
{{ page | debug }}
</div>

And then the output should be something similar to:

<div>
<pre>{
  date: 2020-11-22T21:56:37.799Z,
  inputPath: './src/index.liquid',
  fileSlug: '',
  filePathStem: '/index',
  url: '/',
  outputPath: 'www/index.html'
}</pre>
</div>

[Zearin]

Thanks! That helps (and works). But it’s not printing something I wanted to check...

From using the DEBUG environment variable, I know that Eleventy is picking up my global data. But I don’t see it printed out. How do I get Eleventy to print global data?

[Ryuno-Ki]

Can you give the markup you use for rendering?
Is it a layout? An include within that layout? Pagination?

[edwardhorsford]

I think you want to pass the page context to the debug filter. You could try making a filter that will return you the context, and then passing that to the debug filter.

[Zearin]

index.html

---
layout: default.pug
---
<pre><code>{{ page | debug }}</code></pre>

default.pug

doctype html
html
    head
        meta(charset='utf-8')/
        title Eleventy Test Site
    
    body
        h2 Eleventy Test Site
        
        .
            !{content}

(Wow…you all respond fast. Thank you! 🙏🏽)

[pdehaan]

From using the DEBUG environment variable, I know that Eleventy is picking up my global data. But I don’t see it printed out. How do I get Eleventy to print global data?

If it be global data that you want, you can always pass that global data object to your custom debug filter.
For example, if I add a ./src/_data/names.js file with the following nonsense:

module.exports = [
  "Billy",
  "Bob"
];

... then I should be able to dump that global data names object using something like this:

<h2><code>names</code> (global data)</h2>
<div>
{{ names | debug }}
</div>

OUTPUT

<h2><code>names</code> (global data)</h2>
<div>
<pre>[ 'Billy', 'Bob' ]</pre>
</div>

I'm not sure how/if you can have 11ty dump ALL it's global data with a single command, or if the custom filter wouldn't have access to that scope/context.

[Zearin]

I'm not sure how/if you can have 11ty dump ALL it's global data with a single command, or if the custom filter wouldn't have access to that scope/context.

Eureeka!

Using the filter you have provided (I could not have done it without your help!), and by inspecting collections.all, I discovered that the following will output all the global data:

index.html

---
layout: default.pug
---
<h2><code><var>collections.all[0].template.templateData.globalData</var></code></h2> 
<pre><code>{{ collections.all[0].template.templateData.globalData | debug }}</code></pre>

I think this should be a feature. I imagine this is something many newcomers would attempt to do at some point, and I would rather them not leave Eleventy out of frustration if they cannot figure it out on their own.

[pdehaan]

Wow, congrats! I never would have thought to inspect collections.all[0].template.templateData.globalData.

But that did inspire me to look for globalData instances in the codebase to see where else it might be stored, and led me to using eleventyComputed (with JavaScript front matter) to inspect the data property:

---js
{
  title: "Computed global data?",
  eleventyComputed: {
    datum(data) {
      return data;
    },
    age() {
      return new Date();
    }
  },
  tags: ["ok computer"]
}
---

<h1>{{ title }}</h1>

{{ datum | debug }}
{{ age | debug }}

That outputs the following to my generated index.html page:

<h1>Computed global data?</h1>

<pre><ref *1> {
  names: [ 'Billy', 'Bob' ],
  pkg: {
    name: '11ty-1526',
    description: 'How do I print all data in a page? #1526',
    version: '1.0.0',
    author: 'Peter deHaan <peter@deseloper.com> (https://about.me/peterdehaan)',
    bugs: { url: 'https://github.com/pdehaan/11ty-1526/issues' },
    dependencies: {},
    devDependencies: { '@11ty/eleventy': '^0.11.1' },
    homepage: 'https://github.com/11ty/eleventy/issues/1526',
    keywords: [],
    license: 'MPL-2.0',
    private: true,
    repository: {
      type: 'git',
      url: 'git+https://github.com/pdehaan/11ty-1526.git'
    },
    scripts: {
      build: 'eleventy',
      test: 'echo "Error: no test specified" && exit 1'
    }
  },
  title: 'Computed global data?',
  eleventyComputed: { datum: [Function: datum], age: [Function: age] },
  tags: [ 'ok computer' ],
  page: {
    date: 2020-11-22T21:56:37.799Z,
    inputPath: './src/index.liquid',
    fileSlug: '',
    filePathStem: '/index',
    url: '/',
    outputPath: 'www/index.html'
  },
  collections: { all: [ [Object] ], 'ok computer': [ [Object] ] },
  datum: [Circular *1],
  age: 2020-11-26T17:54:22.522Z
}</pre>
<pre>2020-11-26T17:54:22.522Z</pre>

[Ryuno-Ki]

If you feel like your question was answered, please close the issue.

[Zearin]

@Ryuno-Ki Okay, but…

I would like to make an official feature request for an easy-access way to get at global data. Would you rather me close this an open a new Issue?

I would just end up referencing this Issue anyways—which would just force people to follow the link here if they wanted to read up on the background context.

If that is your preference, I’ll do it. But if you are okay with “converting” this Issue from a help request to a feature request, it might be helpful to have the explanation here in one place.

[Ryuno-Ki]

Hm, good question.
The title is phrased in away as „I want to learn something”.
I think, it would be more concise if you would open a new one to ask for what you need.
You can point to the solution / workaround here as one option.

It's easier to read the first post to get an idea of what is asked about instead of walking through a thread.

[Zearin]

The title is phrased in away as „I want to learn something”.
I think, it would be more concise if you would open a new one to ask for what you need.
You can point to the solution / workaround here as one option.

It's easier to read the first post to get an idea of what is asked about instead of walking through a thread.

Sound reasoning. Will do! And thank you. 🙏🏽