dev_tools features are activated by default when you run the app with
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.
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.
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.
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.
The full set of dev tools parameters are included in
debug, bool, activate all the dev tools.
dev_tools_ui, bool, set to
Falseto explicitly disable dev tools UI in debugger mode (default=True)
dev_tools_props_check, bool, set to
Falseto explicitly disable component props validation (default=True)
dev_tools_hot_reload, bool, set to
Trueto 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)
dev_tools variables can be set with environment variables, just replace the
dash_ and convert to uppercase.
This allows you to have different run configs without changing the code.