如何使用VSCode调试JupyterDash应用程序？

Question

我将会为自己回答的这篇文章进行翻译，但这只是表示我有一个解决方案的想法，并且我非常渴望听到更高效和稳定的方法来应对所面临的挑战。

---

我想知道如何将 JupyterDash 和 VSCode 的功能结合起来，以便运行一个 .ipynb 文件的调试过程，其中包括以下所有步骤：

1. 逐行执行代码，

2. 运行代码，

3. 检查变量，

4. 设置断点，

5. 检查回调函数，和

6. 交互式编辑变量。

我相信我已经尝试了各种组合：

• 使用 F10 进入代码
• 从 VSCode 菜单中选择 Run > Start Debugging (F5)
• 从 Jupyter Notebook 菜单中选择 Run and Debug (ctrl+Shift+D)
• 通过在 VSCode 调试控制台中使用 JUPYTER:VARIABLES 检查变量

我仍然觉得没有找到一个100%令人满意的交互和稳定的工作流程。也许这根本不是最好的方法？因此，不包括 JupyterDash 的建议更加受欢迎。

---

系统信息：

Python 3.9.6
VScode 1.60.2
Plotly 5.1.0
JupyterDash 0.4.0

- vestland

Answer 1

我将基于此处呈现的代码提出建议，以生成一个基本的交互式图形和触发回调的下拉菜单的Dash应用程序：

---

第一部分和第二部分 - 踏入代码并逐行运行代码

---

默认情况下，对于一个 .ipynb 文件，在 VSCode 中按下 F10 将触发 Step into function 并在单元格的第一行放置黄色箭头。然后，您可以通过再次按下 F10 逐行执行代码。

图1.1 - 使用 F10 步入代码

---

第三部分。检查变量

---

在执行df = px.data.tips()之后，您可以在Debug Console中的JUPYTER:VARIABLES下找到该变量：

图3.1 - Debug控制台和变量

你可以通过点击上面突出显示的图标来检查df的内容，以Show variable in data viewer为例：

图3.2 - 数据查看器

---

第四部分 - 设置断点

---

如果在回调函数中进行数据操作，您可以在回调函数内设置断点：

图4.1 - 设置断点。

第五部分 - 检查回调函数

为了使程序进入特定的断点，您可以按下 F5 或通过这个代码示例生成的 Dash 应用程序触发回调函数。例如，通过从下拉菜单中选择 aggsunset 来触发：

图 5.1 - 进行选择以触发回调函数调试

现在你应该注意到图形本身没有发生任何变化。如果你回到VSCode，你会看到调试过程已经进入了断点。

图5.2 - 在回调触发后停止断点的代码

正如您所看到的，回调函数内定义了一个新的变量，df2 = df.copy()。尽管有些奇怪，现在您只能看到回调函数的本地变量：

图5.2 - 在Jupyter中调试时的变量

但这里有一个很棒的功能，你可以检查应用程序中下拉菜单的输入内容，即：

colorscale = 'agsunset'

更酷的是，每次更改下拉列表的值并触发回调时，该值都会在JUPYTER:VARIABLES下更新：

第6节 - 交互式编辑变量

图6.1 - 调试回调函数时更改变量

如果您切换到“DEBUG CONSOLE”选项卡，您可以使用“df2.tail（）”更仔细地查看“df2”，如下所示：

图6.2-检查新变量

你甚至可以使用 df2['new_var'] = 1 添加一个新的列：

- vestland

---

嗨，vestland，我正在尝试使用您的代码并按照您的调试过程进行操作，但为什么在按下F5后，调试过程会自动终止？它从未移动到断点？有什么建议可以检查吗？我可以运行您的代码而不出现任何错误。但是调试不起作用，这正是我想要做的。谢谢。 - roudan