# 📣 Announcing Dash Dev Tools

**URL:** <https://community.plotly.com/t/announcing-dash-dev-tools/22481>\
**Category:** Dash Python\
**Tags:** announcements\
**Created:** [April 19, 2019, 3:58am UTC](https://community.plotly.com/t/announcing-dash-dev-tools/22481 "2019-04-19T03:58:36Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [April 19, 2019, 3:58am UTC](https://community.plotly.com/t/announcing-dash-dev-tools/22481/1 "2019-04-19T03:58:36Z")

</div>

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:

1. A visualization of the callback flow via a **DAG** visualization (directed acyclic graph)
2. A central place to view both **front-end** and **back-end** errors
3. Deep component property validation that bubbles up subtle, _inconspicuous_ bugs 🐛

## Getting Started

Try it out in the latest version:

```auto
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:

 ![dev-tools-getting-started](https://user-images.githubusercontent.com/1280389/56402356-fdefa400-622a-11e9-9466-82747ebd6599.gif)

## 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.

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/d/d313d704d6894fcc003adbfb57e3db73dd15efce.png)

* * *

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/e/e5f70399a2b66ba9b5b5db4d2ddec82defe7fea9.png)

## 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.

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/5/5c1faa1ce2c76de459bffb44e7efe2ae9cedd79f.png)

## 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:

 ![image](https://user-images.githubusercontent.com/1280389/56400519-52daec80-6222-11e9-8281-a7dd2a43f34b.png)

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

```python
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:  
 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/e/e5b4b763578f92d6d4fe0d2d57e169237241b090.png)

## 🔧 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](https://community.plotly.com/t/announcing-hot-reload/14177)) but skip the property validation.

```python
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](https://reactjs.org/docs/typechecking-with-proptypes.html).
- On that note, if you think you need the `.shape` prop type, you might actually be looking for the [lesser-documented `.exact` prop type](https://github.com/facebook/prop-types/#usage). `exact` will raise an error if an unspecified key is provided whereas `shape` will allow any arbitrary keys. We found ourselves using `exact` 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 by `dash-renderer`. For example, see the implementation of our [`dcc.Textarea` component](https://github.com/plotly/dash-core-components/blob/43d2420a6dd56e5ef93d84ceb8e86d1c11b5629f/src/components/Textarea.react.js) (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](https://github.com/plotly/dash-renderer/pull/100/).

Dash DevTools was sponsored by an organization. If your company is making use of Dash, reach out to our team to [sponsor the roadmap](https://plot.ly/products/consulting-and-oem/) or to [get started with our production offerings](https://plot.ly/dash/pricing/).

As always, many thanks to everyone in the community for your feedback & support and let us know if you run into any snags ❤

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [April 19, 2019, 4:01am UTC](https://community.plotly.com/t/announcing-dash-dev-tools/22481/2 "2019-04-19T04:01:44Z")

</div>



---

<div class="post-metadata">

**Author:** ![tcbegley](https://avatars.discourse-cdn.com/v4/letter/t/46a35a/32.png) [@tcbegley](https://community.plotly.com/u/tcbegley)\
**Post date:** [April 19, 2019, 7:32am UTC](https://community.plotly.com/t/announcing-dash-dev-tools/22481/3 "2019-04-19T07:32:01Z")

</div>

This is really really good. I just tried it out and instantly resolved a bug in one of my apps that was confusing me last night. Thanks Dash devs!

---

<div class="post-metadata">

**Author:** ![David22](https://avatars.discourse-cdn.com/v4/letter/d/439d5e/32.png) [@David22](https://community.plotly.com/u/David22)\
**Post date:** [April 19, 2019, 1:19pm UTC](https://community.plotly.com/t/announcing-dash-dev-tools/22481/4 "2019-04-19T13:19:53Z")

</div>

> [@chriddyp](#):
>
> built-in debugging UI that provides three main f

Great job, thank you guys!

---

<div class="post-metadata">

**Author:** ![byronz](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/byronz/32/5727_2.png) [@byronz](https://community.plotly.com/u/byronz)\
**Post date:** [April 19, 2019, 2:23pm UTC](https://community.plotly.com/t/announcing-dash-dev-tools/22481/5 "2019-04-19T14:23:17Z")

</div>

[![](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/d/db86c6fe37dce2d3ec88fe34b3784b5333a2b1a6.gif) ](https://media.giphy.com/media/l2QZYZx0GNjGpAaPe/giphy.gif)

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [April 22, 2019, 6:11pm UTC](https://community.plotly.com/t/announcing-dash-dev-tools/22481/6 "2019-04-22T18:11:20Z")

</div>

- 📣 `0.43.0rc2` is now available: `pip install dash==0.43.0rc3`
- 📝 I added a note about `setProps` for component authors in the announcement above.

---

<div class="post-metadata">

**Author:** ![Damian](https://avatars.discourse-cdn.com/v4/letter/d/34f0e0/32.png) [@Damian](https://community.plotly.com/u/Damian)\
**Post date:** [April 22, 2019, 7:31pm UTC](https://community.plotly.com/t/announcing-dash-dev-tools/22481/7 "2019-04-22T19:31:12Z")

</div>

Thanks as ever! I will be trying this out this week, but I wanted to thank you all for thinking of mix and matching.

I have one app in particular that does not play well with Flasks debug mode, so being able to turn these features on without having to turn on Flask debug mode is really helpful!

---

<div class="post-metadata">

**Author:** ![Berry](https://avatars.discourse-cdn.com/v4/letter/b/b782af/32.png) [@Berry](https://community.plotly.com/u/Berry)\
**Post date:** [April 24, 2019, 10:26am UTC](https://community.plotly.com/t/announcing-dash-dev-tools/22481/8 "2019-04-24T10:26:40Z")

</div>

Thanks for this guys, hopefully it will be a great help to all the devs out there. I am however struggling to run it on my Dash app. I cannot run on localhost due to hosting on a cloud server so I have to expose the app to the public IP, maybe this is the issue?  
Here is the error I get:

```
    Running on http://0.0.0.0:8050/
Debugger PIN: 925-302-811
 * Serving Flask app "test_app" (lazy loading)
 * Environment: production
   WARNING: Do not use the development server in a production environment.
   Use a production WSGI server instead.
 * Debug mode: on
Traceback (most recent call last):
  File "test_app.py", line 23, in <module>
    app.run_server(debug=True, dev_tools_ui=True, dev_tools_props_check=False, host='0.0.0.0')
  File "/home/lcm_fuelquality/web_app/venv/local/lib/python2.7/site-packages/dash/dash.py", line 1285, in run_server
    **flask_run_options)
  File "/home/lcm_fuelquality/web_app/venv/local/lib/python2.7/site-packages/flask/app.py", line 943, in run
    run_simple(host, port, self, **options)
TypeError: run_simple() got an unexpected keyword argument 'dev_tools_props_check'

```

Any ideas would be greatly appreciated,  
Tom

---

<div class="post-metadata">

**Author:** ![byronz](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/byronz/32/5727_2.png) [@byronz](https://community.plotly.com/u/byronz)\
**Post date:** [April 24, 2019, 5:07pm UTC](https://community.plotly.com/t/announcing-dash-dev-tools/22481/9 "2019-04-24T17:07:55Z")

</div>

@Berry

from the error, it seems the dash version is old, which doesn’t contain the latest code about two dev\_tools flags.

cheers,  
Byron

---

<div class="post-metadata">

**Author:** ![klnrdknt](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/klnrdknt/32/3758_2.png) [@klnrdknt](https://community.plotly.com/u/klnrdknt)\
**Post date:** [April 25, 2019, 7:10am UTC](https://community.plotly.com/t/announcing-dash-dev-tools/22481/10 "2019-04-25T07:10:06Z")

</div>

This stuff is amazing! Thanks a lot. ☀

---

<div class="post-metadata">

**Author:** ![Berry](https://avatars.discourse-cdn.com/v4/letter/b/b782af/32.png) [@Berry](https://community.plotly.com/u/Berry)\
**Post date:** [April 25, 2019, 10:32am UTC](https://community.plotly.com/t/announcing-dash-dev-tools/22481/11 "2019-04-25T10:32:08Z")

</div>

Apologies Byron, I sudo pip installed the pre-release by accident.

It’s all working as expected now and looks great. A couple of points to note:

1. Is there a way to copy an image of the callback graph? I had to screen grab multiple sections as my graph fills an A3 page
2. Since upgrading to this Dash pre-release all my inline-style margins are not passing through to the browser. Other inline-styles are working as expected.

Regards,  
Tom

---

<div class="post-metadata">

**Author:** ![byronz](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/byronz/32/5727_2.png) [@byronz](https://community.plotly.com/u/byronz)\
**Post date:** [April 25, 2019, 12:58pm UTC](https://community.plotly.com/t/announcing-dash-dev-tools/22481/12 "2019-04-25T12:58:12Z")

</div>

@Berry thanks for the feedbacks. could you be more specific about which component you had issue about inline-style, or a snippet of code would be more helpful. thanks

---

<div class="post-metadata">

**Author:** ![Berry](https://avatars.discourse-cdn.com/v4/letter/b/b782af/32.png) [@Berry](https://community.plotly.com/u/Berry)\
**Post date:** [April 25, 2019, 1:36pm UTC](https://community.plotly.com/t/announcing-dash-dev-tools/22481/13 "2019-04-25T13:36:33Z")

</div>

@byronz It is happening with buttons, inputs dropdowns and paragraphs.

Example code for button:

```
                html.Button( #Button to configure alerts
                id='alert-button',
                children=['Configure Alerts'],
                className='logout_button',
                style={
                    'float': 'top',
                    'position': 'relative',
                    'height': 'auto',
                    'width': '170',
                    'max-width': '100%',
                    'margin-top': '10'
                }
            ),

```

Button styles from within Chrome Dev Tools:

 ![11](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/3/3bc6e7bc746a512603f7e19358db7cd33b07661d.png)

As you can see no margin-top styles are being applied.

If it helps I think I was on Dash 0.30.0 before this pre-release update.

---

<div class="post-metadata">

**Author:** ![byronz](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/byronz/32/5727_2.png) [@byronz](https://community.plotly.com/u/byronz)\
**Post date:** [April 25, 2019, 3:12pm UTC](https://community.plotly.com/t/announcing-dash-dev-tools/22481/14 "2019-04-25T15:12:09Z")

</div>

@berry

the upgrade to React 16 has some breaking changes about the component props attributes, in short, it’s much more stricter than before.

if you change your `margin-top: '10'` into `marginTop: 10` as specified [here](https://reactjs.org/docs/dom-elements.html#style), it should fix your issue.

regarding the callback graph snapshot, we had some internal design discussion about this, it’s one of the further enhancement in the road map, but unfortunately it will be included in the next release.

Byron

---

<div class="post-metadata">

**Author:** ![Damian](https://avatars.discourse-cdn.com/v4/letter/d/34f0e0/32.png) [@Damian](https://community.plotly.com/u/Damian)\
**Post date:** [April 25, 2019, 5:25pm UTC](https://community.plotly.com/t/announcing-dash-dev-tools/22481/15 "2019-04-25T17:25:18Z")

</div>

> [@byronz](#):
>
> if you change your `margin-top: '10'` into `marginTop: 10` as specified [here](https://reactjs.org/docs/dom-elements.html#style), it should fix your issue.

Thanks for this note! I need to change a significant amount of my code base before updating.

---

<div class="post-metadata">

**Author:** ![mbkupfer](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/mbkupfer/32/4334_2.png) [@mbkupfer](https://community.plotly.com/u/mbkupfer)\
**Post date:** [April 25, 2019, 6:33pm UTC](https://community.plotly.com/t/announcing-dash-dev-tools/22481/16 "2019-04-25T18:33:04Z")

</div>

> [@Damian](#):
>
> I need to change a significant amount of my code base before updating.

While this isn’t directly relevant to plotly or dash, I thought I would point out that you can use a python script to do all the heavy lifting for you.

Here is a quick script I put together

```python
import re

# Created a fairly specific pattern using your example code. 
# You might need to modify for alternative quoting cases.
# Also, afaik, there aren't css styles with more than one hyphen, are there? 
# No problem to add that but then the regex pattern gets ugly.

pat = re.compile(r"('\w+)(-)(\w+')(: '.*')") 

def reactStylesRepl(match):
    return f'{match.group(1)}{match.group(3).capitalize()}{match.group(4)}'

with open('your_file.py', 'rt') as f:
    replacedString = re.sub(pat, reactStylesRepl, f.read())

# Example:
string = """
html.Button( #Button to configure alerts
                id='alert-button',
                children=['Configure Alerts'],
                className='logout_button',
                style={
                    'float': 'top',
                    'position': 'relative',
                    'height': 'auto',
                    'width': '170',
                    'max-width': '100%',
                    'margin-top': '10'
                }
            ),
"""
print(re.sub(pat, reactStylesRepl, string))

# output
>>> html.Button( #Button to configure alerts
                id='alert-button',
                children=['Configure Alerts'],
                className='logout_button',
                style={
                    'float': 'top',
                    'position': 'relative',
                    'height': 'auto',
                    'width': '170',
                    'maxWidth': '100%',
                    'marginTop': '10'
                }
            ),

```

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [April 25, 2019, 10:38pm UTC](https://community.plotly.com/t/announcing-dash-dev-tools/22481/17 "2019-04-25T22:38:44Z")

</div>

Thanks for the feedback everyone! `0.42.0` has been released 🎉

---

<div class="post-metadata">

**Author:** ![collerek](https://avatars.discourse-cdn.com/v4/letter/c/9f8e36/32.png) [@collerek](https://community.plotly.com/u/collerek)\
**Post date:** [April 26, 2019, 7:42am UTC](https://community.plotly.com/t/announcing-dash-dev-tools/22481/18 "2019-04-26T07:42:10Z")

</div>

HI I have problem with visualizing app callback - I have like a lot of callbacks in my app and when I click on graph callback buton this is the message I get:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/c/c5c035ad5ec0de8e1c07576fb824802073fd0ec8.png)

How can I fix this?

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [April 26, 2019, 1:50pm UTC](https://community.plotly.com/t/announcing-dash-dev-tools/22481/19 "2019-04-26T13:50:04Z")

</div>

YIkes!

> [@collerek](#):
>
> a lot of callbacks

How many callbacks?

---

<div class="post-metadata">

**Author:** ![collerek](https://avatars.discourse-cdn.com/v4/letter/c/9f8e36/32.png) [@collerek](https://community.plotly.com/u/collerek)\
**Post date:** [April 26, 2019, 2:03pm UTC](https://community.plotly.com/t/announcing-dash-dev-tools/22481/20 "2019-04-26T14:03:48Z")

</div>

Around 270, some of which are multi output 😉

[Next page](https://community.plotly.com/t/announcing-dash-dev-tools/22481.md?page=2)