Debugging

Glyx exposes a Chrome DevTools Protocol (CDP) endpoint in dev mode. Use Chrome DevTools, VS Code, or any CDP-compatible debugger.

Enable the inspector

Option 1 — CLI flag (one-off or CI):

npx glyx-cli dev --inspect           # default port 9229
npx glyx-cli dev --inspect 9230      # custom port

Option 2 — config (always-on for a project):

// glyx.config.ts
export default defineConfig({
  dev: {
    inspect: true,    // use default port 9229
    // inspect: 9230, // or a custom port
  },
});

The CLI flag takes priority over the config value if both are set.

Connect Chrome DevTools

1. Open Chrome and navigate to chrome://inspect
2. Click Configure... and add localhost:9229
3. Your Glyx app appears under Remote Target
4. Click inspect

The full DevTools panel opens: Sources, Console, Memory, Performance.

Connect VS Code

Add a launch config to .vscode/launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Attach to Glyx",
      "port": 9229,
      "restart": true,
      "localRoot": "${workspaceFolder}/src",
      "remoteRoot": "/"
    }
  ]
}

Start glyx dev --inspect, then press F5 in VS Code. Breakpoints work.

Console

console.log, console.warn, console.error, console.table all work and appear in both the terminal and the DevTools console.

console.log('debug value:', someObject)
console.table(db.query('SELECT * FROM notes LIMIT 5'))

React DevTools

React DevTools works via the CDP connection:

1. Install the standalone React DevTools: npm install -g react-devtools
2. Run react-devtools in a terminal
3. Start your app with glyx dev --inspect

React DevTools connects automatically. Component tree inspection, props, state, and hooks all work.

Performance profiling

The Performance panel in Chrome DevTools records JS execution, React renders, and native bridge calls. Look for:

• Long tasks (>50ms) in the main thread
• Unnecessary React re-renders (use React DevTools Profiler)
• Expensive db.query calls (they appear as native bridge calls)

Logging to file

import { fs } from '@glyx-dev/react'
 
const LOG_PATH = 'data/app.log'
 
export async function log(message: string) {
  const line = `${new Date().toISOString()} ${message}\n`
  await fs.appendFile(LOG_PATH, line)
}