HTML Verify and troubleshoot

DevTools

Add the panel

Add the DevTools tag next to the c15t tag while you debug:

<script
  src="https://cdn.jsdelivr.net/npm/@c15t/browser@alpha/dist/c15t.devtools.js"
  data-open
  data-tab="location"
  defer
></script>

Tag order does not matter. Loaded first, the DevTools tag queues itself on window.c15t and mounts once the client starts. Loaded after, it mounts at once. With data-manual on the c15t tag, it waits for c15t.init().

Attribute	What it does
`data-open`	Open the panel on load. `data-open="false"` keeps it closed.
`data-tab`	The first tab: `consents`, `scripts`, `location`, `policy`, `iab`, `events` or `actions`. An unknown value is ignored.
`data-position`	The corner: `bottom-right`, `bottom-left`, `top-right` or `top-left`.

The panel renders in its own shadow root, so your theme's CSS does not change it.

Open DevTools from the trigger

With data-trigger on the c15t tag, the trigger shows a DevTools button next to its own while the panel is mounted, and the panel hides its floating launcher, so one control sits in the corner. The DevTools button sits at the end farthest from the corner. The panel opens just past the trigger, aligned with its outer edge, and follows it when you drag the trigger to another corner.

The trigger hides while the banner or the dialog is open. The panel then shows its own launcher in the data-position corner until the trigger returns. With c15t.headless.js there is no trigger, so the panel always keeps its launcher.

What each tab shows

Tab	Shows
Consents	Each category's current permission, with switches and Save changes, Accept all and Reject optional buttons. Those buttons record a real choice.
Scripts	Scripts from `config` and their state: blocked, loading, loaded, failed or retained. A page scan lists other script and iframe elements.
Location	The country, region, language and GPC signal. Apply and refresh resolves the policy again with your values; Clear overrides goes back to detection.
Policy	The resolved policy rule and the prompt it requires.
IAB	Purposes, vendors and the TC string, under an IAB policy with `c15t.iab.js`.
Events	Every consent event in order.
Actions	Show banner, Open preferences and Clear stored records.

The page scan in the Scripts tab lists what is in the DOM. It is not proof that a request was sent or held back; check the Network tab for that.

Use it from the console

Once mounted, the panel is c15t.devtools in the console. Call c15t.devtools.destroy() to remove it. c15t.dispose() removes it too.

Test another country

A policy that depends on location shows different banners around the world. Open the Location tab, set the country to DE, or US with region CA, and click Apply and refresh. The banner follows the policy for that location, without a VPN. The override lasts until you reload.

Keep it out of production

The panel shows internal consent state to anyone who opens the page. Remove the tag before you publish, or print it only in a staging template. It also adds a <style> element, which a strict Content Security Policy blocks.

Check it works

Add the tag and reload. The panel opens on the tab you chose.
Click Accept All in the banner. The Events tab lists the save, and the Consents tab shows each category allowed.
Remove the tag and reload. No panel appears and c15t.devtools is null.