Dash Devtools Plus
A Dash development and debugging enhancement plugin ✨, powered by Dash Hooks.
English | 简体中文
✨ Dash Devtools Plus adds a focused drawer to Dash's native Dev Tools: trace callbacks, inspect components, capture state, understand direct imports, watch server resources, and tailor the toolbar—all while keeping the running app in view. It is available only in an explicitly debug-enabled Dash session, so development metadata stays out of ordinary production use.
🚀 Open Devtools Plus
Start a Dash application in debug mode, then select Devtools Plus from the native toolbar in the lower-right corner. The drawer opens over the application, ready for a closer look.
⚡ Quick start
pip install dash-devtools-plus -U
from dash import Dash, html
from dash_devtools_plus import configure_devtools_plus
configure_devtools_plus(default_locale="en")
app = Dash(__name__)
app.layout = html.Div("Hello, Dash Devtools Plus")
if __name__ == "__main__":
app.run(debug=True)
The package is discovered through Dash Hooks after installation. When configuration is needed, call configure_devtools_plus before creating the Dash instance. The panel appears only when debug mode and Dash's native Dev Tools UI are both enabled.
For full installation notes, see Quick start.
🧭 Workspaces
| Workspace | What it provides | Documentation |
|---|---|---|
| Server resource monitor | Live CPU, memory, disk, and host/runtime information. | Open guide |
| Callback relationships | Searchable callback graph data, source locations, role lists, docstrings, and execution metadata. | Open guide |
| Component inspector | Click a rendered page element and map it to its Dash component, layout path, and current props. | Open guide |
| State snapshots | Capture selected component props and restore them within the current browser tab. | Open guide |
| Imported dependencies | Direct project imports grouped as standard library, Dash components, Dash Hooks, or other libraries. | Open guide |
| Toolbar skins | Preview and apply native Dash Dev Tools toolbar and error-display themes. | Open guide |
⚙️ Configuration
from pathlib import Path
from dash_devtools_plus import configure_devtools_plus
configure_devtools_plus(
default_locale="en",
accent_color="#119DFF",
editor="vscode",
project_root=Path(__file__).resolve().parent,
)
| Parameter | Default | Summary |
|---|---|---|
default_locale |
"en" |
Initial interface language: "en" or "zh-CN". |
accent_color |
"#119DFF" |
Primary UI accent color. |
editor |
"vscode" |
Preferred source editor: "vscode", "cursor", "pycharm", or None. |
project_root |
None |
Existing project directory used as the server-side source and direct-import boundary. |
editor_project_root |
None |
Editor-visible root when the browser/IDE and Dash server use different paths. |
See Configuration for behavior, validation rules, and container-to-local editor examples.
🧪 Example applications
Three applications in examples/ cover increasingly complex use cases:
| Example | Focus | Run |
|---|---|---|
simple |
One server callback and one clientside callback. | python examples/simple/app.py |
intermediate |
A travel-budget planner built with Dash core components. | python examples/intermediate/app.py |
comprehensive |
A large callback laboratory for acceptance testing all workspaces. | python examples/comprehensive/app.py |
They share port 8050; run one at a time. Read Example applications before using the comprehensive callback laboratory.
🛠️ Development
Use the project environments described by the repository setup, then run:
python -m pytest
npm run test:frontend
npm run build
Python code is checked with Ruff:
ruff check .
ruff format --check .
The frontend build writes distributable assets to dash_devtools_plus/assets/; commit those generated files whenever frontend source changes.
🗺️ Documentation map
📄 License
Released under the MIT License.
Release files for dash-devtools-plus 0.1.1
For a detailed explanation of source distributions (sdists) and built distributions (wheels), please see the package formats documentation.
Source distribution (sdist)
| File | Size | Uploaded | |
|---|---|---|---|
| dash_devtools_plus-0.1.1.tar.gz | 732.0 kB | Details |
Built distribution (wheel)
| File | Interpreter | ABI | Platform | Reset |
|---|---|---|---|---|
| dash_devtools_plus-0.1.1-py3-none-any.whl | Python 3 | none | any | Details |
Total release size: 1.5 MB
Release files / dash_devtools_plus-0.1.1.tar.gz
| Download URL | dash_devtools_plus-0.1.1.tar.gz |
|---|---|
| Size | 732.0 kB |
| Tags | Source |
|
SHA-256 checksum How to use checksums |
33744c8afebb6e1080aa21c0f12c26259dd8f479728eb8ce385444d5b2faa44e
|
|
BLAKE2b-256 checksum How to use checksums |
83e2cb44edf45cb6e3cc960010c220a01d1793d3988d2723ddcf0f7904f3d112
|
| Upload date | |
|
Uploaded using Trusted Publishing? What is trusted publishing? |
No |
| Uploaded via |
twine/6.2.0 CPython/3.12.13
|
Release files / dash_devtools_plus-0.1.1-py3-none-any.whl
| Download URL | dash_devtools_plus-0.1.1-py3-none-any.whl |
|---|---|
| Size | 726.1 kB |
| Tags | Python 3 |
|
SHA-256 checksum How to use checksums |
cb8f8e7e496e4d509bf377c776929492da0b2572b33cc34de88d761a7f7af9ab
|
|
BLAKE2b-256 checksum How to use checksums |
ca16a8d5da7edd32dfb5523bbd29cbcfb5a2d8dc7d02c6ded1a779fc0d6c9662
|
| Upload date | |
|
Uploaded using Trusted Publishing? What is trusted publishing? |
No |
| Uploaded via |
twine/6.2.0 CPython/3.12.13
|