Skip to main content

Dash Devtools Plus logo

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.

Dash Devtools Plus main panel in English

⚡ 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)

Source distribution for dash-devtools-plus 0.1.1
File Size Uploaded
dash_devtools_plus-0.1.1.tar.gz 732.0 kB Details

Built distribution (wheel)

Table of built distributions (wheels) for dash-devtools-plus 0.1.1
File Interpreter ABI Platform
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

Release history Release notifications | RSS feed

0.1.4

2 release files

0.1.3

2 release files

0.1.2

2 release files

This release

0.1.1 This release

2 release files

0.1.0

2 release files

Anthropic, PBC Visionary sponsor Bloomberg Visionary sponsor Hudson River Trading Visionary sponsor Meta Visionary sponsor NVIDIA Visionary sponsor Microsoft Sustainability sponsor Depot Continuous Integration AWS Cloud computing and Security Sponsor Datadog Monitoring Fastly CDN Google Download Analytics Sentry Error logging StatusPage Status page