> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/honojs/hono/llms.txt
> Use this file to discover all available pages before exploring further.

# Dev

> Development utilities for inspecting and debugging routes

The Dev helper provides utilities for inspecting and visualizing your application's routes during development. These tools help you understand your route structure, debug routing issues, and display route information.

## Import

```typescript theme={null}
import { showRoutes, inspectRoutes, getRouterName } from 'hono/dev'
```

## Display Routes

### showRoutes

Print all registered routes to the console in a formatted table:

```typescript theme={null}
import { Hono } from 'hono'
import { showRoutes } from 'hono/dev'

const app = new Hono()

app.get('/', (c) => c.text('Home'))
app.get('/posts', (c) => c.json([]))
app.post('/posts', (c) => c.json({}))
app.get('/posts/:id', (c) => c.text('Post'))

showRoutes(app)
```

Output:

```
GET  /
GET  /posts
POST /posts
GET  /posts/:id
```

**Parameters**:

<ParamField path="hono" type="Hono" required>
  The Hono application instance
</ParamField>

<ParamField path="options" type="ShowRoutesOptions">
  Optional configuration object
</ParamField>

### Options

<ParamField path="options.verbose" type="boolean" default="false">
  When `true`, displays all middleware in addition to handlers
</ParamField>

<ParamField path="options.colorize" type="boolean">
  Enable or disable colored output. Auto-detects terminal support by default.
</ParamField>

### Verbose Mode

Show all middleware and handlers:

```typescript theme={null}
import { showRoutes } from 'hono/dev'

app.use('*', logger())
app.use('/api/*', authenticate)
app.get('/api/users', getUsers)

showRoutes(app, { verbose: true })
```

Output:

```
GET  /api/users
     logger
     authenticate
     getUsers
```

### Colorization

Control colored output:

```typescript theme={null}
import { showRoutes } from 'hono/dev'

// Force colors on
showRoutes(app, { colorize: true })

// Force colors off
showRoutes(app, { colorize: false })

// Auto-detect (default)
showRoutes(app)
```

## Inspect Routes

### inspectRoutes

Get route information as a data structure for programmatic use:

```typescript theme={null}
import { inspectRoutes } from 'hono/dev'

const app = new Hono()

app.get('/', (c) => c.text('Home'))
app.post('/posts', (c) => c.json({}))

const routes = inspectRoutes(app)
console.log(routes)
```

Output:

```javascript theme={null}
[
  {
    path: '/',
    method: 'GET',
    name: '[handler]',
    isMiddleware: false
  },
  {
    path: '/posts',
    method: 'POST',
    name: '[handler]',
    isMiddleware: false
  }
]
```

**Parameters**:

<ParamField path="hono" type="Hono" required>
  The Hono application instance
</ParamField>

**Returns**: `RouteData[]` - Array of route information objects

### RouteData Type

```typescript theme={null}
interface RouteData {
  path: string           // Route pattern (e.g., '/posts/:id')
  method: string         // HTTP method (e.g., 'GET', 'POST')
  name: string          // Handler or middleware name
  isMiddleware: boolean // Whether this is middleware or a handler
}
```

## Get Router Name

### getRouterName

Get the name of the router being used:

```typescript theme={null}
import { getRouterName } from 'hono/dev'

const app = new Hono()
const routerName = getRouterName(app)
console.log(routerName) // 'SmartRouter', 'RegExpRouter', 'TrieRouter', etc.
```

**Parameters**:

<ParamField path="app" type="Hono" required>
  The Hono application instance
</ParamField>

**Returns**: `string` - The name of the router implementation

## Named Functions

Use named functions to get meaningful output:

```typescript theme={null}
import { showRoutes } from 'hono/dev'

const authenticateUser = (c, next) => {
  // Auth logic
  return next()
}

const getUsers = (c) => {
  return c.json({ users: [] })
}

app.use('/api/*', authenticateUser)
app.get('/api/users', getUsers)

showRoutes(app, { verbose: true })
```

Output:

```
GET  /api/users
     authenticateUser
     getUsers
```

<Note>
  Named functions provide better debugging information than anonymous functions. The helper will show `[middleware]` or `[handler]` for unnamed functions.
</Note>

## Use Cases

### Startup Logging

Display routes when the server starts:

```typescript theme={null}
import { serve } from '@hono/node-server'
import { Hono } from 'hono'
import { showRoutes } from 'hono/dev'

const app = new Hono()

// Define routes...
app.get('/', (c) => c.text('Hello'))
app.get('/api/users', (c) => c.json([]))

if (process.env.NODE_ENV === 'development') {
  showRoutes(app)
}

serve(app)
```

### Generate Documentation

Generate route documentation from your app:

```typescript theme={null}
import { inspectRoutes } from 'hono/dev'
import { writeFileSync } from 'fs'

const app = new Hono()

// Define routes...

const routes = inspectRoutes(app)
const markdown = routes
  .filter(r => !r.isMiddleware)
  .map(r => `- \`${r.method} ${r.path}\``)
  .join('\n')

writeFileSync('ROUTES.md', `# API Routes\n\n${markdown}`)
```

### Testing Routes

Validate expected routes in tests:

```typescript theme={null}
import { inspectRoutes } from 'hono/dev'
import { describe, it, expect } from 'vitest'

describe('Routes', () => {
  it('should have all expected routes', () => {
    const routes = inspectRoutes(app)
    const paths = routes.map(r => `${r.method} ${r.path}`)
    
    expect(paths).toContain('GET /')
    expect(paths).toContain('GET /api/users')
    expect(paths).toContain('POST /api/users')
  })
})
```

### Route Comparison

Compare routes between different configurations:

```typescript theme={null}
import { inspectRoutes } from 'hono/dev'

const appV1 = new Hono()
const appV2 = new Hono()

// Define routes for each version...

const routesV1 = inspectRoutes(appV1).map(r => `${r.method} ${r.path}`)
const routesV2 = inspectRoutes(appV2).map(r => `${r.method} ${r.path}`)

const newRoutes = routesV2.filter(r => !routesV1.includes(r))
const removedRoutes = routesV1.filter(r => !routesV2.includes(r))

console.log('New routes:', newRoutes)
console.log('Removed routes:', removedRoutes)
```

### Debug Middleware Order

Visualize middleware execution order:

```typescript theme={null}
import { showRoutes } from 'hono/dev'

const requestId = (c, next) => {
  c.set('requestId', crypto.randomUUID())
  return next()
}

const logger = (c, next) => {
  console.log(`${c.get('requestId')}: ${c.req.method} ${c.req.path}`)
  return next()
}

app.use('*', requestId)
app.use('*', logger)
app.use('/admin/*', authenticate)
app.get('/admin/users', getUsers)

showRoutes(app, { verbose: true })
```

Output:

```
GET  /admin/users
     requestId
     logger
     authenticate
     getUsers
```

## Router Detection

Identify which router implementation is being used:

```typescript theme={null}
import { getRouterName } from 'hono/dev'

const app = new Hono()
const router = getRouterName(app)

console.log(`Using ${router} for routing`)

if (router === 'RegExpRouter') {
  console.log('Consider using SmartRouter for better performance')
}
```

## Filtering Routes

Filter routes programmatically:

```typescript theme={null}
import { inspectRoutes } from 'hono/dev'

const routes = inspectRoutes(app)

// Get only API routes
const apiRoutes = routes.filter(r => r.path.startsWith('/api/'))

// Get only POST routes
const postRoutes = routes.filter(r => r.method === 'POST')

// Get only handlers (no middleware)
const handlers = routes.filter(r => !r.isMiddleware)

console.log('API Routes:', apiRoutes.length)
console.log('POST Routes:', postRoutes.length)
console.log('Handlers:', handlers.length)
```

## Type Definitions

```typescript theme={null}
interface ShowRoutesOptions {
  verbose?: boolean
  colorize?: boolean
}

interface RouteData {
  path: string
  method: string
  name: string
  isMiddleware: boolean
}

function showRoutes<E extends Env>(
  hono: Hono<E>,
  opts?: ShowRoutesOptions
): void

function inspectRoutes<E extends Env>(
  hono: Hono<E>
): RouteData[]

function getRouterName<E extends Env>(
  app: Hono<E>
): string
```

## Best Practices

<CardGroup cols={2}>
  <Card title="Development Only" icon="flask">
    Use these utilities in development only. Avoid in production for performance.
  </Card>

  <Card title="Named Functions" icon="signature">
    Use named functions for better debugging and route inspection output
  </Card>

  <Card title="Verbose for Debug" icon="bug">
    Enable verbose mode when debugging middleware order or execution flow
  </Card>

  <Card title="Test Route Coverage" icon="list-check">
    Use `inspectRoutes` in tests to validate expected routes are registered
  </Card>
</CardGroup>

<Warning>
  These helpers are intended for development and debugging. Avoid using them in production code as they may impact performance.
</Warning>

<Info>
  The `showRoutes` function automatically detects color support in your terminal. You can override this with the `colorize` option.
</Info>