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

Question

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

我想知道如何结合 JupyterDash 的力量和 VSCode 为了运行 .ipynb 的调试过程包含以下所有步骤的文件:

步入代码，

一行一行地运行代码，

检查变量，

设置断点，

检查回调，以及

交互式编辑变量。

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

使用 F10 进入代码

Run > Start Debugging (F5)从 VSCode 菜单

Run and Debug (ctrl+Shift+D)来自 Jupyter Notebook 菜单

通过 JUPYTER:VARIABLES 检查变量在 VSCode 调试控制台中

我仍然觉得我没有找到一个在交互性和稳定性方面 100% 令人满意的工作流程。

系统信息:

Python 3.9.6
VScode 1.60.2
Plotly 5.1.0
JupyterDash 0.4.0

Answer 1

我将根据提供的代码提出此建议 here生成一个带有交互式图形和触发回调的下拉菜单的基本破折号应用程序:


第 1 部分和第 2 部分 - 逐行进入代码并运行代码

默认情况下为 .ipynb文件，F10在 VSCode 中会触发 Step into function并在单元格的第一行放置一个黄色箭头。然后，您可以通过点击 F10 逐行浏览您的代码。再次。
图 1.1 - 使用 F10 进入代码


第 3 部分。检查变量

步进后df = px.data.tips() ，您可以在 JUPYTER:VARIABLES 下找到该变量在 Debug Console :
图 3.1 - 调试控制台和变量

您还可以检查 df 的内容单击上方突出显示的图标到 Show variable in data viewer :
图 3.2 - 数据查看器


第 4 部分 - 设置断点

如果您在回调中进行了一些数据操作，则可以在回调中设置断点:
图 4.1 - 设置断点。

第 5 部分 - 检查回调
为了使进程继续到该特定断点，您可以点击 F5甚至通过此代码示例生成的 Dash App 触发回调。例如通过选择 aggsunset从下拉菜单中:
图 5.1 - 选择触发回调调试

现在您应该注意到图形本身没有任何 react 。如果你回到 VSCode，你会看到调试过程已经转移到你的断点。
图 5.2 - 触发回调后暂停断点的代码

如您所见，在回调中定义了一个新变量为 df2 = df.copy() .奇怪的是，现在你只能看到回调的局部变量:
图 5.2 - 调试时的 Jupyter 变量

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

colorscale = 'agsunset'

更酷的是，每次更改下拉值并触发回调时，该值都会在 JUPYTER:VARIABLES 下更新。 :
第 6 节 - 交互式编辑变量
图 6.1 - 在调试回调时更改变量

如果您继续访问 DEBUG CONSOLE选项卡，您可以仔细查看 df2与 df2.tail() :
图 6.2 - 检查新变量

您甚至可以使用 df2['new_var] = 1 添加一个新列: