如何使用VSCode调试JupyterDash应用程序？ [英] How to debug a JupyterDash app using VSCode?

问题描述

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

---

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

1. 单步执行代码，

2. 逐行运行代码，

3. 检查变量，

4. 设置断点，

5. 检查回调，

6. 交互编辑变量。

我相信我已经尝试了所有能想到的组合：

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

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

---

系统信息：

Python 3.9.6
VScode 1.60.2
Plotly 5.1.0
JupyterDash 0.4.0

推荐答案

我将根据提供的代码here来生成一个基本的Dash应用程序，该应用程序带有一个交互式图形和一个触发回调的下拉列表：

---

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

---

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

图1.1-使用F10单步执行代码

---

第3部分.检查变量

---

单步执行df = px.data.tips()后，可以在Debug Console：

中找到JUPYTER:VARIABLES下的变量

图3.1-调试控制台和变量

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

图3.2-数据查看器

---

第4部分-设置断点

---

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

图4.1-设置断点。

第5部分-检查回调

为了使流程移动到该特定断点，您可以点击F5，甚至通过此代码样例生成的Dash App触发回调。例如，从下拉菜单中选择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：

添加新列

这篇关于如何使用VSCode调试JupyterDash应用程序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！