mirror of https://github.com/eznix86/adonisjs-debugbar.git synced 2026-07-25 20:58:52 +00:00

No description

HTML 37%
JavaScript 34.5%
TypeScript 28.5%

Find a file

Bruno Bernard 20340b4b13 v0.1.5		2026-03-31 09:57:54 +04:00
art	docs: improve readme with image	2026-03-11 00:48:14 +04:00
src	chore: move assets	2026-03-09 18:08:26 +04:00
.gitignore	chore: add gitignore	2026-03-09 17:29:55 +04:00
package.json	v0.1.5	2026-03-31 09:57:54 +04:00
README.md	docs: Update README to specify AdonisJS versions	2026-03-21 10:57:58 +04:00
tsconfig.json	chore: update deps	2026-03-09 17:51:36 +04:00

README.md

Adonis JS Debug Bar

Debug bar for AdonisJS for adonis v6 and v7

Request View

Timeline View

Queries View

A bottom panel in development to inspect:

request details
SQL queries, bindings, duration, duplicates, and source
a timeline of the request lifecycle
previous request snapshots in the same browser session

Install

npm install @eznix/adonisjs-debugbar

Setup

1. Register the provider

In adonisrc.ts:

providers: [
  // ...
  () => import('@eznix/adonisjs-debugbar/provider'),
]

2. Register the middleware

In start/kernel.ts:

router.use([
  // ...
  () => import('@eznix/adonisjs-debugbar/middleware'),
])

If you use Inertia, place it after @adonisjs/inertia/inertia_middleware so render timings are captured.

Example with Inertia:

router.use([
  () => import('@adonisjs/core/bodyparser_middleware'),
  () => import('@adonisjs/session/session_middleware'),
  () => import('@adonisjs/shield/shield_middleware'),
  () => import('@adonisjs/inertia/inertia_middleware'),
  () => import('@eznix/adonisjs-debugbar/middleware'),
])

Example without Inertia:

router.use([
  () => import('@adonisjs/core/bodyparser_middleware'),
  () => import('@adonisjs/session/session_middleware'),
  () => import('@adonisjs/shield/shield_middleware'),
  () => import('@eznix/adonisjs-debugbar/middleware'),
])

Non-Inertia apps still get request, query, and timeline data. Only Inertia-specific render entries are unavailable.

3. Render the debug bar

Add @debugbar() near the end of your Edge layout:

<!DOCTYPE html>
<html>
  <body>
    @!section('content')
    @debugbar()
    </body>
  </html>

4. To view SQL queries

Dont forget to add debug: true to your database configuration.

Preferably, use:

const dbConfig = defineConfig({
  //...
  connections: {
    yourconnection: {
      debug: env.get('NODE_ENV') === 'development',
      // ...
    },
  },
})

Configuration

The debug bar is enabled by default when NODE_ENV=development.

You can override it with DEBUGBAR_ENABLED:

DEBUGBAR_ENABLED=true

DEBUGBAR_ENABLED=false

Extending DebugBar

Most apps only need the provider, middleware, and @debugbar().

If you need manual instrumentation, these are the useful public helpers:

isDebugBarEnabled() - check whether the debug bar is active
runWithDebugBar(fn) - run custom async work inside a debug bar context
recordDebugRender(label, startedAt, meta?) - add a custom render/timing entry to the timeline
recordDebugQuery(event) - record a custom query event when you are not using Lucid's built-in instrumentation

Types are available from @eznix/adonisjs-debugbar/types.

License

MIT