Hi Dash community!
I’m excited to introduce the first public release of Dash Devtools Plus, an open-source development and debugging enhancement for Dash applications, powered by Dash Hooks.
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 normal production use.
Project repository: github.com/CNFeffery/dash-devtools-plus
Quick start
pip install dash-devtools-plus -U
Dash discovers and registers the package automatically through its dash_hooks entry point after installation. If the defaults suit your app, there is no need to import dash_devtools_plus or call configure_devtools_plus(). The panel appears only when debug mode and Dash’s native Dev Tools UI are both enabled. Call configure_devtools_plus(...) before creating the Dash instance only when you need to override the defaults.
Smallest working app
Here is the smallest complete Dash app that enables Devtools Plus with its default settings:
from dash import Dash, html
app = Dash(__name__)
app.layout = html.Div("Hello, Dash Devtools Plus")
if __name__ == "__main__":
app.run(debug=True)
Once the app is running, select Devtools Plus from Dash’s native toolbar in the lower-right corner.
A closer look at the workspaces
Callback relationships
Turn Dash’s registered callbacks into a searchable development view. Filter by callback name, docstring, source file, inputs, outputs, and state; then inspect source locations, dependency roles, topology, registration details, and runtime metadata.
Server resource monitor
Keep a compact live pulse on the development machine: CPU, memory, system-disk usage, recent CPU and memory trends, plus host, operating-system, Python, processor, core-count, and uptime details.
Component inspector
Click what you see and trace it back to the Dash component that owns it. The inspector highlights the nearest supported component and reports its identity, DOM mapping, layout path, current props, and nested component-valued props.
State snapshots
Capture selected component properties while exploring an app, name the snapshot, and restore it later in the same browser tab. This is especially handy for returning to a useful debugging state without rebuilding it manually.
Imported dependencies
See what the project actually imports rather than every package in the environment. Dependencies are grouped into the standard library, Dash components, Dash Hooks, and other libraries, with versions, imported modules, and expandable Dash-component/Hook details where available. The inventory respects the configured project_root boundary, keeps project-local modules—including manually registered Hooks—out of the external-dependency list, and requires third-party imports to map to installed Python distributions.
Toolbar skins
Give Dash’s native Dev Tools toolbar and error display a look that suits your development desk. Built-in options include Native style, Luminous Dock, Paper Atelier, Mint Circuit, and Coral Workbench—without changing the native toolbar’s workflow.
Runtime environment
Collect the key context needed to reproduce an issue in one concise view: Dash and Dash Devtools Plus versions, Python version and implementation, server operating system and architecture, browser version/platform/language/viewport, and installed third-party packages directly imported by the app.
Use Copy environment report to copy a complete, issue-ready Markdown report for a GitHub issue, support ticket, or debugging note. Refresh reads the server details again and captures the current browser window dimensions. The report deliberately omits the hostname, full user agent, project paths, standard-library modules, and project-local modules.
Practical workflows: from the browser back to your code
Open a callback’s source in your local IDE
For a local Dash project, configure Devtools Plus before constructing Dash. The example below is a complete runnable app with a callback that will appear in the Callback relationships workspace.
from pathlib import Path
from dash import Dash, Input, Output, dcc, html
from dash_devtools_plus import configure_devtools_plus
PROJECT_ROOT = Path(__file__).resolve().parent
configure_devtools_plus(
default_locale="en",
accent_color="#119DFF",
editor="vscode",
project_root=PROJECT_ROOT,
)
app = Dash(__name__)
app.layout = html.Div(
[
html.H2("Callback source-jump demo"),
dcc.Slider(
id="value", min=0, max=100, step=1, value=50,
marks={0: "0", 50: "50", 100: "100"},
),
html.Div(id="message"),
],
style={"maxWidth": "680px", "margin": "3rem auto"},
)
@app.callback(Output("message", "children"), Input("value", "value"))
def show_value(value):
return f"The current value is {value}."
if __name__ == "__main__":
app.run(debug=True)
Open the app, select Devtools Plus in Dash’s lower-right toolbar, and choose Callback relationships. The callback row includes its project-relative source location and an editor action; using that action opens the corresponding file and location in the configured IDE.
The key parameters are:
editor="vscode"selects the IDE used by source-opening actions."cursor"and"pycharm"are also supported; useNoneto avoid selecting a preferred editor.project_root=PROJECT_ROOTdefines the server-side project boundary. It must be an existing directory, and only files under it are exposed as project callback sources or direct imports.default_localeandaccent_colortailor the initial UI language and highlight color.
When the Dash server runs in a container but your editor is on the host machine, keep the server-side boundary and the editor-visible path distinct:
configure_devtools_plus(
project_root="/app",
editor_project_root=r"C:\projects\my-dash-app",
editor="cursor",
)
Here, project_root is the path visible to the server, while editor_project_root is the matching local checkout that Cursor should open.
Inspect a rendered component, then preserve a debugging state
Using the same app, open Component inspector, choose Start component inspection, hover the slider or output text, and click it. The panel maps the rendered element back to the owning Dash component and shows its ID, layout path, DOM mapping, and live props. Press Esc at any time to exit inspection without making a selection.
When you reach a useful test state, open State snapshots, choose New snapshot, select the component props to capture, and save it with a meaningful name. You can restore that state later in the same browser tab—useful when iterating on a complex callback flow. A restore can trigger callbacks, and snapshots intentionally remain scoped to browser-session storage rather than becoming server-side persisted data.
Understand the project around the app
Set project_root once and the Imported dependencies workspace can inventory direct project imports within that boundary, rather than dumping the entire Python environment. In the same debug-only session, the Server resource monitor gives a quick view of CPU, memory, and runtime information while you reproduce a local performance issue.
Useful links:
- Project repository —
If Dash Devtools Plus looks useful to you, a GitHub star would mean a lot. - English documentation
- Runtime environment guide
- Project releases
I’d love to hear which development and debugging workflows you would find most valuable. Looking ahead, the next phase is to bring more Agent-integrated capabilities into Dash Devtools Plus, helping accelerate the development and iteration of Dash applications.
