在 App Inventor 中调试代码

学习在 MIT App Inventor 中调试代码和修复错误的技巧

什么是调试?

调试调试是编码员用来找出代码无法运行的原因,然后进行修复使其正常运行的过程。

调试一词来自计算机领域的先驱格蕾丝-霍珀上将。20 世纪 40 年代,她在哈佛大学研究 Mark II 计算机时,一只飞蛾卡在计算机里,导致计算机无法工作。

摆脱飞蛾后,她说他们正在 "调试 "系统。程序员现在用这个词来表示 "修正我代码中的错误"。

格蕾丝-霍珀

编码提示

狗看电脑

调试通常是编码过程中最令人沮丧和耗时的部分,因此留出充足的时间非常重要!

还要有耐心!

小块

有时,程序员会倾向于一次性编写整个应用程序的代码,然后进行测试。

不要被诱惑所迷惑!..!

如果有些东西无法正常工作(这很有可能),就很难找出从哪里开始尝试修复错误。 

巧克力块

将应用程序的编码分成小块。 

先做好一件事,再开始下一件事。 

编写一点代码,测试一点,确认可以工作,然后再编写一点代码,再测试一点,等等。 

例如,如果您的应用程序有 5 个按钮,它们都有不同的功能、

  1. 为第一个按钮编写操作代码
  2. 然后进行测试,确保它能正常工作。
  3. 转到第二个按钮
  4. 重复。

如果代码中出现错误,在一个地方修正代码总比在 5 个地方修正代码要好。

带有 5 个按钮的应用程序

版本控制

误打误撞

比方说,您遵循 "小块 "原则,已经构建并运行了应用程序的一部分。

你添加了一些新代码后,突然一切都停止工作了。 

哦,不!

您尝试删除新代码,但应用程序仍然无法运行。您不知道哪里出了问题,希望有一个 "撤销 "按钮。

为避免出现类似情况,您可以保存 版本版本。 

这样,如果你犯了错误,又不知道如何补救,你就可以回到上次保存的工作版本。

您还可以使用版本控制来试验新功能,而不必担心会破坏正在运行的应用程序。

在 App Inventor 中保存不同版本有两种方法,即使用 "另存为 "和 "检查点"。

检查站检查点"选项会保存一个副本,名字随你取,但你可以继续在原版中工作。这样做的目的是 "检查点 "运行正常的版本,然后继续在项目的主版本中进行开发。

项目菜单,已选择检查点

保存项目为 "将项目另存为 选项将创建一份你正在处理的代码副本,并以新名称保存。你所做的任何编辑都将保存在新副本中。

项目菜单,保存为选定的

崩溃块

当你的代码工作区开始挤满代码块时,折叠代码块是一种让你的代码井井有条的方法。

如果右键单击一个区块,你会看到一个折叠它的选项。

要再次展开图块,请右键单击它们并选择展开图块。

应用程序发明者扩展一个区块

折叠块会将其压缩到屏幕上的一个条形图。

它们的工作原理与普通图块相同,只是占用的空间更少。如果你有一些不再需要编辑的图块,而又想清理屏幕,这将很有帮助。

塌陷区块

禁用块

您还可以禁用区块。

它们会保留在屏幕上,但不会在应用程序中运行。

通过禁用代码块,您可以在没有某些代码块的情况下测试应用程序。您可以稍后启用它们,它们就会运行。

您还可以禁用仅用于测试的区块,如 "通知"。

在 App Inventor 中禁用区块有两种方法

只需将程序块拖出事件处理程序块,就能禁用它们,防止它们运行。因为它们不是任何事件的一部分,所以不可能执行。你可以随时将它们拉回来使用。

从事件块中拖出禁用块

您也可以右键单击一个或一组程序块,然后选择 "禁用程序块"。这些程序块将显示为灰色,表明它们不会执行。这样就可以禁用整组程序块。

要重新启用区块,只需右击并选择 "启用区块 "即可。

评论

程序员通常会在代码中留下注释,解释代码的作用。 

当其他人(如队友、导师和评委)查看您的代码时,评论会很有帮助。

如果您日后返回到代码中,却忘记了代码的某些部分是做什么的,注释也能帮到您。

要添加评论,请右击图块并选择 "添加评论"。

之后,该区块的角落会出现一个问号,您可以添加文字。点击问号即可查看评论。

最佳最佳实践: 注释是编程中最有用的东西。

有很多次,编码员编完代码后就去睡觉了,第二天早上回来时却对前一天晚上的工作一无所知。一定要写注释!

It’s also a great way to check your knowledge, because if your coding blocks are easy to comment on then you must understand them really well! Another thing to be aware of is that <, >, =, ≤, ≥ are hard for students for the first time (and for programmers who are years into their careers). When we set a math statement to < when it should be ≤ this is called an “off by one” error and this is a problem that happens to developers with 20 years of experience 😛 It is a very popular problem so be on the lookout for that. 

最好的调试类型是橡皮鸭调试!这是指你的代码真的卡住了,而且毫无道理可言。你想花点时间和别人讨论一下,看看他们能否发现问题所在,但不幸的是,周围没有人!于是,你在办公桌前放了一只值得信赖的橡皮鸭,大声向你的鸭子朋友解释问题。不过,你必须用非常简单的语言让他们听懂,然后你再自己找出问题所在!我所有的同事都在办公桌上放了一只橡皮鸭,而且经常这样做!

向学生提出指导性问题:你认为有经验的程序员需要多长时间来调试错误?你会认为他们的调试速度非常快,但是每个大型网站都有专门的页面来查看 bug 存在的时间(例如 Facebook),他们还会显示是否有任何页面宕机/损坏以及他们目前正在调试(例如 Facebook)。

你如何发现错误? 你认为你应该做多少测试?你应该让其他人做多少测试?

如何知道自己发现了错误?有时,你可能会一直点击图片,却发现你应该点击的按钮在图片下面。这是错误吗?这是应用程序制造商的一种设计选择,他们不认为这是一个错误,但你可能会认为这是一个错误。

导师提示由 AmeriCorps 提供支持。

风格化的 A,海军蓝的 AmeriCorps 徽标

调试技巧

标记和标签

警报器 Notifier组件可以帮你找出代码损坏的原因。 

要在 App Inventor 应用程序中放置通知器,请从用户界面调板拖动它。

ShowAlert 示例

使用通知器的最简单方法是添加ShowAlert块,让您可以看到某些块已运行(或未运行)的信息。

除信息外,您还可以显示变量值或 ImageSprite 位置等信息。

您还可以添加 标签来显示应用程序中的当前信息。 

例如,当应用程序运行时发生某些事件,您可能想知道变量的值。 

您可以将 Label.Text 设置为您想知道的任何内容,它就会显示在您的应用程序上。 

调试出错后,您可以让标签不可见,或者将其从应用程序中彻底删除。

动手

 做它执行 功能是另一个出色的调试工具。

在使用手机和 AI Companion 应用程序或模拟器对应用程序进行实时测试时,您可以使用新命令 "执行"。

在通过 "连接 "菜单连接手机或模拟器之前,该命令是灰色的。

这样,您就可以查看变量或元素的当前值。 

 

只需拖出一个 "获取全局 "变量块并单击右键。从下拉菜单中选择 "执行",该代码块就会执行。

在下拉菜单中进行

结果框上方会出现一个黄色的 "执行 "框。这也适用于任何组件属性!

执行结果

您还可以使用 Do It 更改应用程序中的某些内容。例如,您可能想更改列表中的某个项目。拖出一个块,然后选择 "执行"。虽然看不到结果,但列表会在应用中更新。

 

设置列表值

您也可以运行应用程序中的现有代码块。 

例如,这里的 ListView 元素将使用 Do It 进行更新。这将反映在应用程序中。ListView 将显示用 Do It 命令设置的新元素。

更新列表视图

使用测试数据

如果要在应用程序中使用大量信息,使用测试数据可能会有所帮助。测试数据是一种更简单、更小的数据集,您可以使用它来确保应用程序正常运行。

假设您正在制作一个显示附近餐馆的应用程序。您使用 Google Sheets 来存储餐厅信息。

您可以从一两家测试餐厅开始,测试您的应用程序,以确保其正常运行。

测试完成并正常工作后,就可以将整套餐厅数据添加到谷歌工作表中。

更改属性

如果您正在对应用程序进行实时测试,您可以在运行应用程序时更改设计器中的属性值,并查看其效果。

有时这有助于发现问题。

例如,您可能正在编写一款游戏。当精灵运行时,您在手机上看到的精灵位置并不正确。

在现场测试时,您可以

  1. 转到设计器
  2. 更改雪碧的 X 和 Y 值
  3. 运行中的应用程序中,屏幕上的精灵位置会发生变化。 

用它来测试和理解屏幕上的坐标。

精灵游戏

活动 1:修复错误

预计时间:20 分钟

修复计时器应用程序中的错误

计时器应用程序 有几个错误。

  1. 将应用程序载入 App Inventor。
  2. 连接模拟器或设备以测试应用程序。
  3. Try pressing Start without typing anything into the textbox. What happens?
  4. 尝试输入 0 或负数表示秒数。会发生什么?
  5. 使用条件块修复错误!

活动 2:添加评论

预计时间:10 分钟

为您的 App Inventor 项目添加评论

如果您已经启动了 Technovation 的最后一个应用程序,请在此活动中使用该应用程序。否则,请使用活动 1 中的计时器应用程序。

在您的应用程序中至少添加一条注释,解释一组图块的作用。选择一组你认为最难理解的图块,因为这些图块可能是其他人(如团队成员)最难理解的。

反思

在您开始为 Technovation 项目编写移动应用程序代码时,这些技巧可以为您提供帮助。

但请记住

照片提供:DKJS Franziska Schmitt
编码并非易事。
您的应用程序很可能一开始就无法完美运行!
小块代码
当你的应用程序有一小部分能正常运行时,就应该庆祝一下。
休息一下!有时,只要离开电脑几分钟,就能给你带来所需的新视角。
上一张幻灯片
下一张幻灯片

关键术语回顾

  • 调试- 代码编写者找出代码无法运行的原因并进行修复的过程
  • 版本控制在取得进展时保存应用程序的工作版本
  • 测试数据- 一组较简单的数据,用于确保应用程序正常运行
  • 注释代码中包含的文本,用于解释代码的作用

其他资源