F12 Console Audit

The F12 Console Audit at /admin/f12-audit automatically loads every page on the site inside a hidden same-origin iframe and captures JavaScript console errors, warnings, uncaught exceptions, and failed resource loads. It’s the equivalent of manually opening DevTools on each page and checking the Console tab.

How It Works

Capture Script (Layout Injection)

Both CosmicLayout.astro and BaseLayout.astro include a tiny inline script after <meta charset> that only activates when the page is loaded inside an iframe:

(function(){
  if (window === window.top) return;  // no-op on normal page loads
  window.__f12 = { errors: [], warnings: [], exceptions: [], resources: [] };

  var ce = console.error, cw = console.warn;
  console.error = function() {
    window.__f12.errors.push([].slice.call(arguments).map(String).join(' '));
    ce.apply(console, arguments);
  };
  console.warn = function() {
    window.__f12.warnings.push([].slice.call(arguments).map(String).join(' '));
    cw.apply(console, arguments);
  };

  window.addEventListener('error', function(e) {
    window.__f12.exceptions.push(
      (e.message || '') + (e.filename ? ' at ' + e.filename + ':' + e.lineno : '')
    );
  });
  window.addEventListener('unhandledrejection', function(e) {
    window.__f12.exceptions.push('Unhandled: ' + String(e.reason));
  });
  document.addEventListener('error', function(e) {
    var t = e.target;
    if (t && (t.tagName === 'IMG' || t.tagName === 'SCRIPT' || t.tagName === 'LINK'))
      window.__f12.resources.push(t.tagName + ': ' + (t.src || t.href || '?'));
  }, true);
})();

Zero performance impact on normal browsing — the window === window.top check exits immediately when not in an iframe.

Audit Engine

The /admin/f12-audit page:

1. Creates a hidden <iframe> element
2. Loads each URL sequentially (with 8s timeout per page)
3. After load, reads iframe.contentWindow.__f12 for captured findings
4. Applies noise filtering to suppress known benign warnings
5. Displays results grouped by suite with expandable error details

Test Suites (16 total, 155 URLs)

Suite	URLs	What It Covers
Core Pages	13	Homepage, about, contact, status, architecture, telemetry, etc.
Blog & Content	5	Blog index, journal, projects, resources, tags
Documentation	1	Public /docs/ index
Playground	12	All 12 playground variants (build-swarm, monitoring, RAG, etc.)
Command Center	10	All command pages (infrastructure, build, network, services, etc.)
Demo	5	Demo landing, sandbox, sim, tour, workbench
User & Dashboard	11	User settings, editor, workbench, email, dashboards, auth
Ansible	2	Sandbox and docs
Learn & Resources	9	Learn index plus tutorial, docker-compose, k8s, cheatsheets, etc.
Projects	12	All project pages (build-swarm, apkg, argo-os, tendril, etc.)
Admin — Core	37	Main admin hub, health, settings, modules, all core admin pages
Admin — OpenClaw	6	Dashboard, config, cron, skills, sessions, RAG browser
Admin — Argonaut	6	Hub, chat, profiles, tasks, writer
Admin — Pentest	8	Hub, assessment, console, exploit, recon, reports, targets, webapp
Admin — Servers	13	Server pages, proxmox, telephony (Bland, ElevenLabs, Twilio)
Admin — Sandbox	5	Sandbox hub, bogie dashboard, demo, workbench, probe studio

Noise Filtering

Known benign warnings are suppressed:

• View Transitions route announcer warnings
• Third-party script loading messages
• Development-only warnings
• Font loading timeouts

Prerequisites

• X-Frame-Options: SAMEORIGIN in public/_headers (changed from DENY to support this feature)
• Same-origin iframes share cookies, so CF Access JWT tokens pass through automatically

CSS Prefix

All classes use the f12- prefix to avoid conflicts with other test pages (st- for site-test, sy- for system-test, th- for testing hub).

View Transitions Compatibility

Uses dedup guard (window.__f12AuditBound) and route check (window.location.pathname === '/admin/f12-audit') to prevent event listener stacking during View Transitions navigation.

Bugs Found & Fixed via Console Audit

2026-03-01: Pipeline, Ansible Sandbox, CSP (commit 592c39f)

A full browser console dump revealed four bugs across three files:

Bug	File	Root Cause	Fix
Identifier 'PS' has already been declared	pipeline.astro:589	const PS at global scope in <script is:inline> — redeclaration fails on View Transitions re-navigation	Changed to var PS
Duplicate var typing	pipeline.astro:1278	Same variable declared in both try and catch blocks	Removed var from catch block
Cannot use import.meta outside a module	ansible/sandbox.astro:329	<script is:inline define:vars={...}> — Astro injects import.meta into classic script	Replaced with JSON config element
CSP violations (fonts, GitHub API, blob)	public/_headers:178	Missing domains in style-src, font-src, connect-src, img-src	Added fonts.googleapis.com, fonts.gstatic.com, api.github.com, blob:

Key patterns to watch for:

• <script is:inline> with top-level const/let will break on View Transitions re-navigation — use var or scope inside astro:page-load
• Never combine is:inline with define:vars — use JSON config elements or data-* attributes instead
• The F12 audit catches errors on initial page load but NOT on View Transitions re-navigation (the const redeclaration only manifests on second visit)

Related

• CSP & Security Headers — CSP directive reference and troubleshooting
• Testing Hub — Landing page for all test tools
• Health Monitor — Service health probing