一个小技巧轻松提升Dash应用debug效率

更多Dash应用开发干货知识、案例，欢迎关注“玩转Dash”微信公众号👇

1 简介

大家好我是费老师。Dash作为基于Python进行全栈应用开发的流行框架，具有强大的可伸缩性——这意味着在同一套基于组件+回调函数的代码组织方式下，使用Dash可以轻松覆盖从小型简单应用，到大型复杂应用，各种复杂程度的应用开发任务。这也是Dash在世界范围内，被众多的大公司用于持续开发企业级数据应用的原因之一。

而随着所开发的Dash应用功能日益增长，我们则需要学习如何在应用开发过程中，更高效准确的调试应用功能逻辑，定位异常问题所在。

今天的文章中，我们就来一起学习新版本Dash（>=3.4.0版本）中增加的一些功能特性，帮助我们更精准快速的定位常见回调函数开发问题。

2 在回调图中用hidden和hide_all_callbacks参数聚焦回调函数

虽然我之前在公众号、玩转Dash知识星球等平台发布的文章和课程中，并没有专门做过介绍，但很多同学应该对类似下面的界面有印象：我们在Dash应用开发阶段，为app.run()设置debug=True开启开发调试模式后，通过点击右下角开发模式工具条中的Callbacks按钮，可以展开一套可交互的有向图，我们可以将其称作回调图。

默认情况下，它记录并呈现当前Dash应用中全部的回调函数编排关系，这对于小型的Dash应用很直观明了，因为图中的节点和边比较少。但是对于页面众多、功能逻辑众多的中大型Dash应用来说，当你打开回调图时，看到的可能是下面这样庞大复杂的景象：

😅这种情况下我们大概率会当做什么都没看见，默默的关闭回调图面板。。。

那么有没有办法在这个回调图中默认不展示全部的回调关系，只针对目前关注的部分回调函数进行展示呢？

有的兄弟，有的，首先我们直接将Dash升级到>=3.4.0版本：

pip install dash -U

以实现“拼接两个输入框内容”的简单应用功能为例：

import dash
from dash import html
import feffery_antd_components as fac
from dash.dependencies import Input, Output
from feffery_dash_utils.style_utils import style

app = dash.Dash(__name__, suppress_callback_exceptions=True)

app.layout = html.Div(
    [
        fac.AntdSpace(
            [
                fac.AntdInput(id="input1", placeholder="请输入内容"),
                fac.AntdInput(id="input2", placeholder="请输入内容"),
                fac.AntdText(id="output-texxt"),
            ]
        )
    ],
    style=style(padding=50),
)

@app.callback(
    Output("output-text", "children"),
    Input("input1", "value"),
    Input("input2", "value"),
)
def combine_inputs(input1, input2):
    """拼接输入的内容"""
    return "拼接结果：" + (input1 or "") + (input2 or "")

if __name__ == "__main__":
    app.run(debug=True)

在上面的示例代码中，我们“不小心”地把用于显示拼接内容结果的组件id参数写成了output-texxt🤯，这也是比较常见的导致回调函数不生效的原因之一：

这种情况下，当我们在浏览器中发现相关功能没有如期运作时：

就可以优先考虑通过回调图查看对应回调函数的执行情况，可以看到虽然我们在相关输入框里输入了一些内容，但对应的回调函数一次都没执行（count 0）：

这种情况下，我们首先就可以想到是不是对应回调函数中有Output角色的id，与对应组件定义的id参数不一样，经过修正，功能正确运作的情况下，在回调图结果中就可以看到该回调函数执行了多少次、执行耗时等有用的信息：

此时，我们再联想到上文中展示过的，对应中大型Dash应用的非常庞杂的回调图，假如上面这个回调函数debug的场景出现在类似规模的应用中，我们就可以基于Dash>=3.4.0版本，首先在app.run()中设置hide_all_callbacks=True，这将在回调图中强制隐藏所有的回调函数：

然后再为对应的回调函数callback()中设置hidden=False：

这将以更高的优先级，在回调图中强制展示当前回调函数关系，这样无论是再复杂的Dash应用，我们都可以在回调图中只聚焦于我们关注的那些回调函数，大幅度提升应用功能调试效率🚀：

大家可以在日常开发Dash应用的过程中，多多利用今天介绍的技巧，开发出更稳健的应用💪~

---

更多有关Dash应用开发的干货内容，欢迎持续关注我们❤️