Debugging & Navigator

Use Baseline’s debug helpers to inspect Eleventy data. You’ll add a page that uses _inspect, _json, and _keys, and optionally enable the navigator template for a full data snapshot. Keep navigator features off in production.

What you’ll build

• A debug page that prints selected data using Baseline filters.
• (Optional) A navigator page that shows a full data cascade snapshot.

Prerequisites

• Baseline installed and loaded (as in previous tutorials).
• package.json with "type": "module" and scripts:

  {
  	"type": "module",
  	"scripts": {
  		"dev": "npx @11ty/eleventy --serve",
  		"build": "npx @11ty/eleventy"
  	}
  }

• A sample page already exists (e.g., from the simple tutorial).

1) Enable (or skip) the navigator template

If you want the full snapshot page for local use only, enable the navigator template. If you skip this, leave enableNavigatorTemplate false and continue with the filters. The debug filters work without the navigator page.

import baseline, { config as baselineConfig } from '@apleasantview/eleventy-plugin-baseline';

/** @param {import("@11ty/eleventy").UserConfig} eleventyConfig */
export default async function (eleventyConfig) {
	eleventyConfig.addPlugin(
		baseline({
			enableNavigatorTemplate: true // local dev only; disable for production
		})
	);
}

export const config = baselineConfig;

2) Add a debug page

Create src/content/pages/debug-playground.md:

---
title: 'Debug Playground'
description: 'Inspect data with Baseline debug helpers.'
permalink: '/debug-playground/'
layout: 'layouts/base.njk'
---

## Collections (first 3)

<pre>
{% for item in collections.all.slice(0, 3) %}
- {{ item.url }}
{% endfor %}
</pre>

## Page keys

<pre>{{ page | _keys }}</pre>

## Page data (inspect)

<pre>{{ page | _inspect({ getters: true, depth: 2 }) }}</pre>

## Page data (json)

<pre>{{ page | _json(2) }}</pre>

3) Use navigator helpers inline

If you want to see the full data/context on this page:

<h2>Navigator snapshot (inline)</h2>
<pre>{{ _navigator() | _inspect() }}</pre>

_navigator() renders the full snapshot; _context() renders just the current context. This dumps a large snapshot—use only in local dev.

4) Run and inspect

npx rimraf dist/ && npm run dev

• Open /debug-playground/ to see filter output.
• (Optional) Open the navigator virtual page. Expect verbose output; avoid exposing it publicly.

5) Visit the navigator template (optional)

With enableNavigatorTemplate: true, Baseline exposes a virtual page at /navigator-core.html. Keep this disabled in production.

6) Production considerations

• Set enableNavigatorTemplate: false in production.
• _navigator() and _context() expose the full render context and can include secrets from your data layer or environment.
• Remove or guard _navigator()/_context() from templates you ship.
• You can keep _inspect/_json locally for troubleshooting; avoid noisy output in production pages.

7) Next steps

• Combine with draft: true pages for safe local-only experiments.
• Narrow inspection by slicing collections or selecting specific data keys.
• Pair with sitemap/noindex controls when inspecting what will be indexed.