Skip to main content
The Lex DevTools extension adds a dedicated panel inside Chrome DevTools that lets you inspect the component tree, section definitions, cache state, render times, and template errors — all from the browser.
The DevTools extension is only active in development mode. Calling $lexer->setProduction() disables LexDebugger completely — no payload is injected and there is zero overhead in production.

​
How it works

In development mode (the default), every render() call passes through LexDebugger, which hooks into the runtime managers and injects a JSON payload into the HTML response just before </body>: 
<!-- injected before </body> -->
<script id="__lex_debug__" type="application/json">
  {"version":"1.0","renderTime":12.4,"components":[...],"cache":{...}}
</script>
The Chrome extension reads this payload and populates the Lex tab in DevTools. In production mode, LexDebugger is bypassed entirely — the payload is never injected and no hooks run: 
Dev mode:         Lexer::render() → LexDebugger → injects payload → extension reads it
Production mode:  Lexer::render() → ViewEngine directly → plain HTML

​
Installation

1

Load the Chrome extension

  1. Open chrome://extensions in Chrome.
  2. Enable Developer mode (top-right toggle).
  3. Click Load unpacked.
  4. Select the lexer-debug-extension/dist/ directory.
The Lex icon appears in the Chrome toolbar. A Lex tab appears inside Chrome DevTools whenever you open a page rendered by Lex in dev mode.
2

Configure PHP

No extra PHP setup is required. Use Lexer::render() as normal — LexDebugger activates automatically when production is false:
use Wik\Lexer\Lexer;

$lexer = Lexer::fromConfig();         // production: false → LexDebugger active
echo $lexer->render('home', $data);  // __lex_debug__ payload injected
3

Optional: add DebugMiddleware (PSR-15)

For PSR-15 frameworks, add DebugMiddleware to get per-request data in the Network tab:
use Wik\Lexer\Debug\DebugMiddleware;
use Wik\Lexer\Debug\LexDebugger;

// Construct LexDebugger to register hooks before render runs
$debugger = new LexDebugger($lexer);

// Middleware sets X-Lex-* headers after the handler renders
$app->add(new DebugMiddleware());

​
DevTools panel

Open Chrome DevTools (F12) and select the Lex tab.
Displays the full component tree rendered during the request.
ColumnDescription
Tree (left)All components in render order — click any row to select it
Detail (right)Component name, file path, props (name / value / type), slots, and render time
Highlight in PageScrolls to and flashes the component’s DOM element
Props are shown with their binding type:
TypeExampleMeaning
literaltitle="Hello"Static string
expression:user="$currentUser"PHP expression
booleanclosableBare attribute → true

​
Error overlay

When Lex throws a TemplateSyntaxException (or similar), the extension intercepts the error HTML and replaces it with a readable overlay: 
┌──────────────────────────────────────────────────────────┐
│  TemplateSyntaxException                         [×]     │
│  Unexpected token "}" in expression                      │
│  views/home.lex — line 12, col 5                        │
│  ──────────────────────────────────────────────────────  │
│   10 │  <div class="wrapper">                           │
│   11 │    {{ $title                                     │
│  --> 12 │    }}                                          │
│  ──────────────────────────────────────────────────────  │
│                            [Open in VS Code]             │
└──────────────────────────────────────────────────────────┘
  • The overlay shows the file path, line number, column, and a source snippet with the error line highlighted.
  • Open in VS Code opens the file at the exact line in your editor.
  • Dismiss the overlay with Esc or the ✕ button.
  • The overlay works without LexDebugger by parsing raw PHP error output. When LexDebugger is active, it uses richer data from the errors[] payload field.

​
Hover inspector

Toggle inspect mode with Alt+Shift+X or the popup button.
  • Hover over any element to see a tooltip with the component name, file path, and render time.
  • Click an element to select the component in the DevTools Lex panel.
The hover inspector requires data-lex-* attributes on component root elements, which LexDebugger injects automatically in dev mode.

​
Disabling in production

Set "production": true in lex.config.json: 
{ "production": true }
Or call setProduction() in your bootstrap: 
$lexer = Lexer::fromConfig()->setProduction();
LexDebugger will not be instantiated, no hooks will run, and no <script id="__lex_debug__"> tag will be injected into any response.

Build docs developers (and LLMs) love

Get started for freeTalk to us