Dash Dev Tools is our latest effort to provide a pleasant and productive experience for Dash app developers
Dash DevTools is a built-in debugging UI that provides three main features for Dash developers:
- A visualization of the callback flow via a DAG visualization (directed acyclic graph)
- A central place to view both front-end and back-end errors
- Deep component property validation that bubbles up subtle, inconspicuous bugs
Getting Started
Try it out in the latest version:
pip install dash==0.42.0
When you run your apps, a new UI element is displayed in the bottom right corner. This element contains all the DevTools features:
Callback Graph
The callback DAG displays the relationships of inputs and outputs in your app. The green circles represent functions, the grey bounded boxes represent components, and their inner blue boxes are component properties.
Displaying Python Callback Exceptions
With Dash DevTools, we display the Python exceptions as a collapsable popup in the app. Youâll see the error right when it happens - no more context switching back and forth from to the terminal to the web browser.
The callback errors will tell you which output had the error. Crucially, the app itself will not crash - the output will simply not update. If multiple errors occur, theyâll accumulate.
No more âerror loading dependenciesâ
If youâve been working with Dash for a while, thereâs no doubt that youâve seen the dreaded âerror loading dependenciesâ or âerror loading layoutâ message.
This could happen for simple typos like setting children to html.Div(children=[['Hello Dash']])
instead of html.Div(['Hello Dash'])
.
With Dash DevTools, weâve taken care to perform some extra validation on warmup and weâll propagate any error up to the UI. Hereâs what that error looks like now:
Much better
Deep property validation
Previously in Dash, if you supply the wrong value for a property, your app might silently fail or you might not never know that there is a runtime error waiting to be thrown . With Dash DevTools, we perform deep component validation on render and we do our best to display a helpful error message.
Hereâs a quick example (quick - can you spot the error?)
dcc.Dropdown(
id='my-dropdown',
options=[
{'label': 'New York City', 'value': 'NYC'},
{'label': 'Montreal', 'value': 'MTL'},
{'label': 'San Francisco', 'value': True}
],
value='NYC'
)
With DevTools, youâll see an error popup like this:
Configuration
By default, Dash DevTools is enabled if you run your app with debug=True
. There are two additional flags that can be used to turn on/off these features:
- Hide the UI with
dev_tools_ui=False
- Turn off the component property validation with
dev_tools_props_check=False
.
You can mix-and-match. For example, the following configuration will keep the UI & the rest of the dev_tools_
features (like hot-reloading) but skip the property validation.
if __name__ == '__main__':
app.run_server(debug=True, dev_tools_ui=True, dev_tools_props_check=False)
When you run your apps in production with e.g. gunicorn app:server
, all of the dev_tools
features are disabled.
And of course, do not use run_server
in production environments!
For Component Authors
- In DevTools, if your component raises an uncaught exception, that error message will bubble up to the DevTools UI and the app will no longer function.
- Your
propTypes
definitions are important now. We use these definitions to perform the component property validation. Learn more about typechecking with PropTypes validations. - On that note, if you think you need the
.shape
prop type, you might actually be looking for the lesser-documented.exact
prop type.exact
will raise an error if an unspecified key is provided whereasshape
will allow any arbitrary keys. We found ourselves usingexact
almost exclusively. - We recently upgraded
dash-renderer
to React 16 to enable these features. So, make sure that your components are React 16 compatible. - Previously,
setProps
was only provided if the component had a property that was an input/output/state. Now,setProps
is always provided to your component. This should make component authoring much simpler: many components can be stateless & completely controlled bydash-renderer
. For example, see the implementation of ourdcc.Textarea
component (only 30 lines of React code).
Credits
Dash DevTools was a 9 months effort involving all members of Dash team. Special shout out to @rnarren1 and @valentijnnieman who bravely paved the way in the early days of the project. Curious about the details? Check out the pull request.
Dash DevTools was sponsored by an organization. If your company is making use of Dash, reach out to our team to sponsor the roadmap or to get started with our production offerings.
As always, many thanks to everyone in the community for your feedback & support and let us know if you run into any snags