Debug

See every hook, its visit and how long it took, and get warnings about common setup mistakes.

Import it from pagefold/debug (about 1.0 KB minified and compressed, shared code included).

import PagefoldDebug from 'pagefold/debug'

new Pagefold({ plugins: [/* your plugins */, new PagefoldDebug()] })

Install it last, so it sees the hooks other plugins create.

What you see

visit:start · visit #3 / → /about +0ms
page:load · visit #3 / → /about +2ms
animation:out:start · visit #3 / → /about +3ms
content:replace · visit #3 / → /about +312ms
visit:end · visit #3 / → /about +640ms

Each line has the hook, the visit id, where it goes and the time since the visit started. The arguments of the hook are logged next to it.

Also

Replaces pagefold.log, which other plugins use for their own messages, and puts it back when unmounted.
Warns when a configured container is missing from the page.

To only see the visit lifecycle:

new PagefoldDebug({ filter: (hook) => hook.startsWith('visit:') })

Remove it from production builds.

Options

Option	Type	Default	What it does
`log`	`(message, ...details) => void`	`console.log`	Where messages go.
`filter`	`(hook: string) => boolean`	`() => true`	Return false to hide a hook.
`checkContainers`	`boolean`	`true`	Warn at startup about containers that are not on the page.
`globalInstance`	`boolean`	`false`	Put the instance on window.pagefold, to try things from the console.