Dash Dev Tools

Dash Dev Tools is an initiative to make debugging and developing Dash apps more pleasant. This initiative was sponsored by an organization and you can see our work in our GitHub project.

dev_tools features are activated by default when you run the app with app.run_server(debug=True)

Hot Reloading

New in dash 0.30.0 and dash-renderer 0.15.0

By default, Dash includes “hot-reloading”. This means that Dash will automatically refresh your browser when you make a change in your Python or CSS code.

Hot reloading works by running a “file watcher” that examines your working directory to check for changes. When a change is detected, Dash reloads your application in an efficient way automatically. A few notes:
- Hot reloading is triggered when you save a file.
- Dash examines the files in your working directory.
- CSS files are automatically “watched” by examining the assets/ folder. Learn more about css
- If only CSS changed, then Dash will only refresh that CSS file.
- When your Python code has changed, Dash will re-run the entire file and then refresh the application in the browser.
- If your application initialization is slow, then you might want to consider how to save certain initialization steps to file. For example, if your app initialization downloads a static file from a remote service, perhaps you could include it locally.
- Hot reloading will not save the application’s state. For example, if you’ve selected some items in a dropdown, then that item will be cleared on hot-reload.
- Hot reloading is configurable through a set of parameters. See the Reference section at the end of this page.

Serving the dev bundles

Component library bundles are minified by default, if you encounter a front-end error in your code, the variables names will be mangled.
By serving the dev bundles, you will get the full names.

Dev Tools UI

New in dash 0.42.0 and dash-renderer 0.23.0

The new Dev Tools UI provides a simple interface, which consolidates both frontend and backend errors into an “error popup” at the top-right corner.
This could reduce your context switch among terminal, code editor, browser and browser debug console while developping a dash app.

To better understand the interaction of callbacks, we visualize the callback function definitions into
a DAG (Directed Acyclic Graph). A Callback Graph icon is available after clicking the debug icon at the bottom-right corner.

As upgrading to React 16 since dash-renderer 0.22.0, we also leverage the new
Error Handling feature so that all
Dash React Components get free Component Props check
from dash-renderer.

Note: You can disable the check by setting dev_tools_props_check=False. But we strongly recommended to fix the props errors:

As of React 16, errors that were not caught by any error boundary will result in
unmounting of the whole React component tree.

Reference

The full set of dev tools parameters are included in app.run_server or app.enable_dev_tools:

  • debug, bool, activate all the dev tools.
  • dev_tools_ui, bool, set to False to explicitly disable dev tools UI in debugger mode (default=True)
  • dev_tools_props_check, bool, set to False to explicitly disable component props validation (default=True)
  • dev_tools_hot_reload, bool, set to True to enable hot reload (default=False).
  • dev_tools_hot_reload_interval, float, interval in seconds at which the renderer will request the reload hash and update the browser page if it changed. (default=3).
  • dev_tools_hot_reload_watch_interval, float, delay in seconds between each walk of the assets folder to detect file changes. (default=0.5 seconds)
  • dev_tools_hot_reload_max_retry, int, number of times the reloader is allowed to fail before stopping and sending an alert. (default=8)
  • dev_tools_silence_routes_logging, bool, remove the routes access logging from the console.
  • dev_tools_serve_dev_bundles, bool, serve the dev bundles.
  • dev_tools_prune_errors, bool, simplify tracebacks to just user code, omitting stack frames from Dash and Flask internals. (default=True)

Settings with environment variables

All the dev_tools variables can be set with environment variables, just replace the dev_tools_ with dash_ and convert to uppercase.
This allows you to have different run configs without changing the code.

Linux/macOS:

export DASH_HOT_RELOAD=false

Windows:

set DASH_DEBUG=true