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

Question

这将是一篇自我回答的帖子，但这仅意味着我已经有了解决方案的想法，并且我非常渴望听到更有效、更稳定的方法来应对相关挑战。

---

我想知道如何结合 和 的功能JupyterDash，VSCode以便对.ipynb涉及以下所有步骤的文件运行调试过程：

1. 单步执行代码，

2. 逐行运行代码，

3. 检查变量，

4. 设置断点，

5. 检查回调，以及

6. 交互式编辑变量。

我相信我已经尝试了所有可以想象的组合：

• 单步执行代码F10
• Run > Start Debugging (F5)从 VSCode 菜单
• Run and Debug (ctrl+Shift+D)从 Jupyter Notebook 菜单
• JUPYTER:VARIABLES通过VSCode 调试控制台检查变量

不过，我认为我还没有找到一个在交互性和稳定性方面 100% 令人满意的工作流程。也许这根本不是最好的方法？因此，不包括在内的建议JupyterDash非常受欢迎。

---

系统信息：

Python 3.9.6
VScode 1.60.2
Plotly 5.1.0
JupyterDash 0.4.0

Answer 1

我将根据此处提供的代码提出此建议，以生成一个基本的破折号应用程序，其中包含交互式图形和触发回调的下拉列表：

第 1 部分和第 2 部分 - 单步执行代码并逐行运行代码

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

图 1.1 - 单步执行代码F10

第 3 部分：检查变量

单步执行后，您可以在以下位置df = px.data.tips()找到该变量：JUPYTER:VARIABLESDebug Console

图 3.1 - 调试控制台和变量

df您还可以通过单击上面突出显示的图标来检查内容Show variable in data viewer：

图 3.2 - 数据查看器

第 4 部分 - 设置断点

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

图 4.1 - 设置断点。

第 5 部分 - 检查回调

为了使进程继续到该特定断点，您可以F5通过此代码示例生成的 Dash 应用程序命中甚至触发回调。例如，通过aggsunset从下拉菜单中选择：

图 5.1 - 选择触发回调调试

现在您应该注意到图形本身没有任何反应。如果您返回 VSCode，您将看到调试过程已移至您的断点。

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

正如您所看到的，一个新变量在回调中定义为 df2 = df.copy()。奇怪的是，现在你只能看到回调的局部变量：

图 5.2 - 调试时的 Jupyter 变量

但这里的一件好事是，您可以检查应用程序中下拉列表中的输入，即：

colorscale = 'agsunset'

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

第 6 节 - 交互式编辑变量

图 6.1 - 在调试回调时更改变量

如果您继续查看该选项卡，您可以使用以下命令DEBUG CONSOLE仔细查看：df2df2.tail()

图 6.2 - 检查新变量

您甚至可以使用以下命令添加新列df2['new_var] = 1：