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

⚙️ 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,
)

See Configuration for behavior, validation rules, and container-to-local editor examples.

🧪 Example applications

Four applications in examples/ cover increasingly complex use cases:

They share port 8050; run one at a time. Read Example applications before using the comprehensive callback laboratory.

FastAPI backend

Dash's FastAPI backend requires Dash 4.2 or later. Install the optional extra, then construct Dash with backend="fastapi" or provide an existing FastAPI server:

pip install "dash-devtools-plus[fastapi]"

See the fastapi example for a small server-time stream that uses websocket_callbacks=True, ctx.websocket.get_prop, and set_props, alongside custom asynchronous FastAPI APIs.

🛠️ 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

• English documentation index
• Quick start
• Configuration
• Example applications
• 中文文档中心

📄 License

Released under the MIT License.