✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚾️ It's finally Baseball season! Root for the home team... & Register for our Sports Analytics Webinar!

📣 Dash Dev Tools and Interactive Debugger

:wave: Dash Community

We’re working on a really cool new addition to Dash: An in-browser interactive debugger.

The idea is to make debugging your callbacks easier: whenever an exception occurs, we’ll popup the exception and display an interactive debugger so that you can introspect the variables. We’ll also display front-end error messages to you, so that you don’t need to check the browser’s console.

To start, we’re using the same debugger as Flask (the Werkzeug Debugger)

This work is part of our “Dash - A Pleasant and Productive Developer Experience” project (https://github.com/orgs/plotly/projects) which has been funded by an organization (see https://plot.ly/products/consulting-and-oem/ for more details about sponsoring dash development).

Here’s a simple example of what this looks like:


and the example:

# Playing around with "Dash Dev Tools":
# https://github.com/plotly/dash/issues/292

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()

app.layout = html.Div([
    html.H1('Dash Dev Tools'),
    dcc.Dropdown(
        options=[
            {'label': i, 'value': i}
            for i in ['nyc', 'la', 'mtl']
        ],
        value='nyc',
        id='dropdown'
    ),
    html.Div(id='output')
])


@app.callback(Output('output', 'children'), [Input('dropdown', 'value')])
def update_output(value):
    1/0


if __name__ == '__main__':
    app.run_server(debug=True)

We need your feedback! Please take it for a spin and let us know what you think :slight_smile: To get started, see https://github.com/plotly/dash/issues/292#issuecomment-411951942

:beers:

4 Likes

This looks Awesome! A welcome addtion

1 Like

Hi,
is there any progress on this? Any step-by-step howto or alike. Based on the provided links I did not manage ad-hoc to get it running.

Or has anyone been successful integrating React Error Boundaries. All I need is to inform the user about an error, so they can inform us. Don’t need real debugging at this stage just forwarding the error to Dash. Any hints? Thanks.