31 lines
1.3 KiB
Markdown
31 lines
1.3 KiB
Markdown
# @wrnexus/dev-toolbar
|
|
|
|
Development-only page quality toolbar for WRNexusJS.
|
|
|
|
## Features
|
|
|
|
- Runtime, resource and unhandled promise error capture
|
|
- Accessibility, SEO, image, media, color, HTML, form, link, responsive and security checks
|
|
- Performance and network observations
|
|
- First-class application tabs for runtime, stores, cache, accessibility, SEO, performance,
|
|
security, images, links, and JavaScript
|
|
- Plugin-contributed applications with badges, descriptions, issue feeds, and structured data
|
|
- Element highlighting and issue filtering
|
|
- Server-side issue collector
|
|
- Development-only asset strings for direct serving by `@wrnexus/dev-server`
|
|
- Safe open-in-editor helper
|
|
|
|
## Dev-server integration
|
|
|
|
Serve `DEV_TOOLBAR_RUNTIME` at `/__wrnexus/dev-toolbar.js` and `DEV_TOOLBAR_CSS` at `/__wrnexus/dev-toolbar.css`, then inject this before `</body>` in development:
|
|
|
|
```html
|
|
<script type="module" src="/__wrnexus/dev-toolbar.js" data-wrnexus-dev-toolbar></script>
|
|
```
|
|
|
|
The browser runtime exposes `window.__wrnexusDevToolbar`.
|
|
|
|
Plugin panels returned through `devToolbarPanels()` are automatically added to the application
|
|
strip. Their issue category is filterable, and structured `data` is rendered as escaped diagnostic
|
|
content so a plugin never needs to inject toolbar HTML.
|