动画图解程序?这个可视化运行环境太方便了

简介: 一个熟练的编程老手只需要用肉眼看着代码,就能对其运行的过程有所了解。然而对于刚接触编程不久的新手来说,这种事情就没那么显而易见了。于是在编写代码和调试代码时,一旦程序的逻辑有些复杂,就像掉进代码的迷宫,完全不知道东南西北。

入门教程、案例源码、学习资料、读者群

请访问: python666.cn

大家好,欢迎来到 Crossin的编程教室 !

了解代码的执行过程是编程的基本要求。

一个熟练的编程老手只需要用肉眼看着代码,就能对其运行的过程有所了解。然而对于刚接触编程不久的新手来说,这种事情就没那么显而易见了。于是在编写代码和调试代码时,一旦程序的逻辑有些复杂,就像掉进代码的迷宫,完全不知道东南西北。

所以,每当有人对自己的代码没有给出预想结果而百思不得其解,无奈寻求帮助时,我都会建议在程序中增加输出,一方面是根据不同输出的先后顺序来判断程序的运行路径,另一方面则是观察各变量在运行过程中的实际数值,确认是在哪里发生了错误。(参考前文:新手上路,如何debug调试程序?

还有种方法就是使用 IDE 提供的调试功能,通过添加断点和单步运行,了解程序的运行状态。Visual Studio、Eclipse、xCode 等常见的 IDE 几乎都提供了调试工具。对于 Python,也可以使用 pdb 库来实现断点调试。

上述两种途径应该是大部分程序员 debug 时候的基本套路。但同样的,对于新手来说,即使这样的工具,用起来仍然有些费力。

有时我会选择在纸上画出一些流程和图形来向人解释程序,虽然效果会好些,但显然不是一种可以广泛推广的方式。后来意外发现有一款工具满足了此类需求,非常适合新手,可以让你直观地“看”出程序是怎么运行的。对于初学编程,难以理解程序运行过程的苦手来说,绝对可称之为“神器”。

这就是 Online Python Tutor。一款免费的在线代码运行及演示工具。

项目地址:pythontutor.com

关于此项目的介绍(摘自网络):

Online Python Tutor 是由 Philip Guo 开发的一个免费教育工具,可帮助学生攻克编程学习中的基础障碍,理解每一行源代码在程序执行时在计算机中的过程。通过这个工具,教师或学生可以直接在 Web 浏览器中编写 Python 代码,并一步一步可视化地执行程序。

截至 2013 年 12 月,来自 165 个国家和地区共 50 万多人使用了这个在线工具,通常是用作教材、讲义或在线编程指南的补充。每天共执行和演示超过 6,000 段 Python 程序。除了自学的初学者,Online Python Tutor 的用户还包括了那些参加 Coursera、edX 和 Udacity 等在线课程的学生,还有诸如 MIT、UC 伯克利等高校的教师。

  • Python Tutor 支持 Python 3.6。
  • 除了 Python 外,还可运行 Java、JavaScript、TypeScript、Ruby,另外也有支持 C、C++ 的版本。
  • 可以通过一行 JS 代码,把此工具嵌入到你自己的页面中。
  • 也可以生成链接,把你的代码直接分享给别人。
  • 附带单元测试功能。
  • 网站上还提供了很多的实例,其中包括一些比较经典的算法。


再来体验一下其使用过程:

在编辑器里输入代码,点击 “Visualize Execution” 即可运行并演示。


import random
def fn(x):
    return x**2
result = []
for i in range(3):
    t = random.randint(1, 10)
    print(t)
    r = fn(t)
    result.append(r)
print(result)

我用了段包含循环、列表、函数、模块的代码片段。看看效果如何:


左边是代码,箭头表示当前运行到的位置。

通过下面的按钮和进度条可以直接控制程序的进行。

右上是输出。

右下就是程序的可视化模拟。在这个例子里,可以清楚地看到过程中变量的变化,何时调用了函数等信息。

借助 Python Tutor,除了可以让编程新手更容易理解程序的运行过程,还能可视化地展示算法执行,如排序、链表插入等。大家可以把比较难以理解的算法代码贴进去,直观地观察,更好地理解。

相关文章
|
4月前
|
C# 开发者 数据处理
WPF开发者必备秘籍:深度解析数据网格最佳实践,轻松玩转数据展示与编辑大揭秘!
【8月更文挑战第31天】数据网格控件是WPF应用程序中展示和编辑数据的关键组件,提供排序、筛选等功能,显著提升用户体验。本文探讨WPF中数据网格的最佳实践,通过DevExpress DataGrid示例介绍其集成方法,包括添加引用、定义数据模型及XAML配置。通过遵循数据绑定、性能优化、自定义列等最佳实践,可大幅提升数据处理效率和用户体验。
68 0
|
7月前
|
监控 Dart
Dart编程技术分享:构建响应式屏幕监控软件界面
本文介绍了使用Dart和Flutter构建响应式屏幕监控软件的方法。首先,创建Dart项目并建立基本的Flutter应用结构,包括`MonitorScreen` widget。接着,引入HTTP库以获取服务器状态数据,并实现实时显示在界面上。最后,展示了如何在获取数据后自动提交到指定网址。通过这个教程,读者可以学习到构建监控界面及数据交互的基本步骤,为不同领域的监控需求提供便利。
124 1
|
7月前
|
数据可视化 Python
【PyQt5桌面应用开发】2.可视化界面编程步骤(超级详细)
【PyQt5桌面应用开发】2.可视化界面编程步骤(超级详细)
431 1
|
数据可视化 JavaScript
可视化拖拽组件库一些技术要点原理分析(二)(上)
可视化拖拽组件库一些技术要点原理分析(二)
110 1
|
数据可视化 API
可视化拖拽组件库一些技术要点原理分析(三)(二)
可视化拖拽组件库一些技术要点原理分析(三)(二)
108 0
|
前端开发 C# 开发工具
Unity快手上手【熟悉unity编辑器,C#脚本控制组件一些属性之类的】
Unity快手上手【熟悉unity编辑器,C#脚本控制组件一些属性之类的】
160 0
|
数据可视化 JavaScript
可视化拖拽组件库一些技术要点原理分析(四)(上)
可视化拖拽组件库一些技术要点原理分析(四)
97 0
可视化拖拽组件库一些技术要点原理分析(四)(上)
|
数据可视化 前端开发 JavaScript
可视化拖拽组件库一些技术要点原理分析(四)(下)
可视化拖拽组件库一些技术要点原理分析(四)(下)
78 0
|
数据可视化 API
可视化拖拽组件库一些技术要点原理分析(三)(一)
可视化拖拽组件库一些技术要点原理分析(三)
107 0
|
JSON 数据可视化 前端开发
可视化拖拽组件库一些技术要点原理分析(二)(下)
可视化拖拽组件库一些技术要点原理分析(二)(下)
112 0

热门文章

最新文章