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, collect runtime context, 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

This checkout and its documentation describe 0.1.4 (unreleased). The command below installs the latest published release; to try the current development version, follow the source installation instructions.

pip install dash-devtools-plus -U

After installation, Dash automatically discovers and registers Devtools Plus through its dash_hooks entry point. No dash_devtools_plus import or configure_devtools_plus() call is needed when the default settings are sufficient.

from dash import Dash, html

app = Dash(__name__)
app.layout = html.Div("Hello, Dash Devtools Plus")

if __name__ == "__main__":
    app.run(debug=True)

The panel appears only when debug mode and Dash's native Dev Tools UI are both enabled. To override the defaults, call configure_devtools_plus() before creating the Dash instance.

For full installation notes, see Quick start.

🧭 Workspaces

⚙️ Optional configuration

Use configure_devtools_plus() only when you need to override the defaults, such as the language, accent color, editor, or project roots.

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

Five applications in examples/ cover focused and 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.