How to configure a debugger for dash in VS Code?

Dash Python
1

In VS Code, you can configure a launch.json file for a python file, a Django app, or a Flask app (for example) that VS Code will use for an interactive debugger session. I am wondering if there is a way to configure something similar for Dash.

For reference, here is template launch.json for a Flask app.

{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
“version”: “0.2.0”,
“configurations”: [
{
“name”: “Python: Flask”,
“type”: “python”,
“request”: “launch”,
“module”: “flask”,
“env”: {
“FLASK_APP”: “app.py”,
“FLASK_ENV”: “development”,
“FLASK_DEBUG”: “0”
},
“args”: [
“run”,
“–no-debugger”,
“–no-reload”
],
“jinja”: true
}
]
}

2 Likes
2

Hi toddabrams,
I’ve just recently started with VS code and the debugger. I am not sure how to do it directly with dash, but i’ve managed to be able to use the default Flask debugger on a dash app by just pulling out the flask object like this for the first example from here, placed in a file called app.py :

import dash
import flask
import dash_core_components as dcc
import dash_html_components as html

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

f_app = flask.Flask(__name__)
app = dash.Dash(__name__, external_stylesheets=external_stylesheets, server=f_app)

app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

    html.Div(children='''
        Dash: A web application framework for Python.
    '''),

    dcc.Graph(
        id='example-graph',
        figure={
            'data': [
                {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
                {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
            ],
            'layout': {
                'title': 'Dash Data Visualization'
            }
        }
    )
])

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

here is how my default flask debugger looks:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Python: Flask",
            "type": "python",
            "request": "launch",
            "module": "flask",
            "env": {
                "FLASK_APP": "app.py",
                "FLASK_ENV": "development",
                "FLASK_DEBUG": "0"
            },
            "args": [
                "run",
                "--no-debugger",
                "--no-reload"
            ],
            "jinja": true
        }
    ]
}

That seems to work well for me, also enabling debugging of callbacks when they are clicked etc.
But as i said, I’ve only played with it for a couple of minutes.

2 Likes
3

Hi toddabrams,
maybe you have already solved this.

Without changing your launch.json file you just need to add this to your code

application = app.server

Here it is a basic example of app.py

import dash
import dash_html_components as html 

app = dash.Dash(__name__)
application = app.server

app.layout = html.H1('Hello Dash')

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