--- title: Console Output Baseline visibility: guest --- # Console Output Baseline When you load a WireKit-using Laravel page in a browser, the developer console should be quiet. Any message that DOES appear should be attributable to a documented source — your own code, a dependency's init log, or a known dev-mode warning. This page catalogs what to expect on a clean install. Use it as a reference when triaging unexpected console output or when writing browser tests that assert `console.error.length === 0`. ## First-Paint — Production Build | Severity | Expected messages | |---|---| | `error` | **None.** Any error at this stage is a real bug — file an issue. | | `warn` | **None.** Same as above. | | `info` | **None.** WireKit doesn't emit info logs by default. | | `log` | **None.** Same. | If you're seeing anything in any of these channels on first paint of a production build, that's actionable feedback. Investigate. ## First-Paint — Development Build Vite's dev server adds a small number of informational messages: | Severity | Source | Message | |---|---|---| | `info` | Vite HMR | `[vite] connected.` | | `info` | Livewire | `Livewire: Connected to WebSocket.` (only when broadcasting is enabled) | | `log` | Alpine | None — Alpine v3 is silent on init. | These are dev-mode-only. A production build (`npm run build`) does not emit them. ## During Page Interaction WireKit's interactive components log nothing during normal interaction. You should never see a console message when: - Clicking a button - Opening a modal, drawer, dropdown, or popover - Sorting a table - Submitting a form - Triggering a toast - Scrolling a page with reading-progress / reading-spine If you DO see a message during any of these interactions on a clean install, that's a bug — capture the message and the user action that triggered it. ## Optional-Dependency Warnings When you load a page that uses a component requiring an optional dependency, WireKit logs ONE informational warning if the dependency isn't loaded: | Component | Dependency | Warning | |---|---|---| | `` | `chart.js` (default adapter) | `console.warn('WireKit chart: window.Chart not loaded. Install chart.js via npm and include it in your build.')` | | `` | `highlight.js` | `console.warn('WireKit code-block: window.hljs not loaded. Syntax highlighting disabled.')` | These warnings are deliberate and actionable. They tell you exactly what to install. The page continues to render with a graceful fallback (chart canvas with no data, code block without syntax highlighting). You can suppress them by: - Installing the dependency, OR - Not using the component on that page. ## Filtering Known-Noisy Messages in Browser Tests If you're asserting `console.error.length === 0` in a browser test, filter out the known-baseline messages first: ```javascript const knownNoise = [ '[vite] connected.', 'Download the React DevTools', 'WireKit chart: window.Chart not loaded', ]; const realErrors = capturedErrors.filter(err => ! knownNoise.some(noise => err.includes(noise)) ); // realErrors.length should be 0 on a clean install. ``` ## Common Mistakes That Cause Console Noise When you see unexpected output, the most common causes are: 1. **Forgetting to publish WireKit assets** — `php artisan vendor:publish --tag=wirekit-assets`. Without this, the runtime can't find `wirekit.js` and emits a 404 in the network tab plus a ReferenceError in the console. 2. **Missing `@wirekitStyles` / `@wirekitScripts` in your layout** — WireKit components throw `ReferenceError` because Alpine isn't loaded. Run `php artisan wirekit:verify` to diagnose. 3. **Stale compiled views** — `php artisan view:clear` resolves it. Symptom: changes to `@props` blocks in templates don't reflect at runtime. 4. **Out-of-order Blade directives** — `@vite([...])` MUST appear in `` BEFORE `@wirekitStyles`. Reversing the order means the Vite-compiled CSS overrides WireKit's CSS variables and styling drifts unpredictably. 5. **Custom Alpine plugin holding an unguarded observer reference** — see [Authoring Custom Alpine Plugins](../extending/authoring-custom-alpine-plugins.md). Symptom: `TypeError: Cannot read properties of null (reading 'disconnect')`. Run `php artisan wirekit:doctor` to detect. ## Cross-References - [Authoring Custom Alpine Plugins](./authoring-custom-alpine-plugins.md) - [Pest Browser-Test Setup](./pest-browser-setup.md) - [CLI Reference](../cli-reference.md) — `wirekit:verify` / `wirekit:doctor` diagnostics. - [Integration Guide](../getting-started/integration.md) — common setup pitfalls.