本页下面的内容是用户指南的图文版，如果您更喜欢看视频，可以前往我们的 Youtube 频道： RuntimeHub 观看这个视频。

我们开始吧！

首先让我们打开 RuntimeHub 网站主页，只需在浏览器中输入 runtimehub.com 就能打开网站并进入主页了。您也可以在 Google 搜索框中输入 runtimehub 来找到 RuntimeHub 的官方网站并进入主页，如下图所示:

在主页，我们可以看到左侧栏分别有 About，Blog，White Paper，Recommend，以及许多不同的编程语言列表。如下图所示：

在右侧我们会看到推荐（Recommend）的部分运行时示例。接下来我们将通过第一个 Python Demo 来快速了解本站上每个 runtime 示例的基本使用方法。点击它即可前往 Python Demo 页面。

进入 Python Demo 后，打开的是 pydemo 程序运行时 或 runtime 的第一步的执行状态，这个页面看起来还比较简单。我们看到页面分为5个区域，我们可以将它们看成是子窗口，因为每个子窗口的大小都可以通过鼠标拖拽相应的分隔条来自由调整，就像桌面程序的子窗口一样。

首先我们看当前页面顶部导航栏的右侧部份，即当前页面右上角的三个按钮。从右到左依次是：问号图标，下载图标和播放器图标。接下来分别介绍下它们：
    1. 问号图标，表示使用帮助信息，点击它会弹出子窗口展示有导航功能列表及相应的快捷键。
    2. 下载图标，用于跳转到 Github 去下载或克隆当前项目的离线 HTML 版本到到您的电脑中后，只需双击打开“version.”开头的文件夹中的 `index.html` 文件即可在本地查看整个流程。离线浏览可以免受网速的影响以保证流畅的性能。然而这种离线浏览虽然方便，并且大多数情况下可以很好的工作，但在页面跳转之间会有短暂的空白出现，我们可以更进一步来拥有更佳的无缝体验：将这些 html 部署到您的电脑中的 Web 服务器（例如 Apache 或 Nginx）中，然后用浏览器来访问它们，这样在不同的页面之间跳转时浏览器会自动优化画面的渲染效果而不会再出现前述的短暂空白的情况，这样，我们就可以在本地电脑中获得与在线相同的无缝体验！
    3. 播放器图标，用于查看整个运行过程的录制视频。该视频位于我们的 Youtube 频道： RuntimeHub，可以直观地看到程序运行的每一步。另外，视频中的“哔哔”声只是为了增加互动效果，如果您觉得不需要，可以静音观看，或前往 RuntimeHub.com 在线体验其交互版本（在 RuntimeHub.com 浏览过程中，不会有任何声音）：每个视频的描述中提供了在线版本的链接。

然后我们再看当前页面顶部导航栏的左侧部份，其最左侧是 "RuntimeHub" 的 Logo，点击它可以返回主页，并自动在主页高亮当前打开的运行时项目对应的条目。然后在 Logo 右边，我们可以看到当前 runtime 的名称。点击它会出现下拉浮动窗口并显示该 runtime 相关的详细信息。

然后我们看到下拉浮动窗口中有以下信息：
    1. Project 表示当前 runtime 所属的软件项目名称。
    2. Update 表示当前 runtime 示例生成时所属软件项目的源代码最后一次更新的时间。
    3. Commit 表示当前 runtime 示例生成时所属软件项目的源代码最后一次提交ID(Commit ID)。
    4. Source 表示当前 runtime 示例生成时所属软件项目的源代码在 Github 上的路径。
    5. Runtime 表示当前 runtime 的运行时环境，由于当前正在执行的程序是 Python 程序，其运行时环境就是 Python 虚拟机，这里的 Python3.12 就表示当前的 Python 的虚拟机是系统中安装的 Python3.12 中包含的虚拟机。同理，如果是 Java 项目，Runtime 会显示 JVM 的版本号。注意：对于 C/C++ 或 Rust 程序来说， Runtime 显示的是编译器的版本号或者不显示，不显示的原因是因为它们直接在操作系统上运行，不需要额外的所谓 Runtime。
    6. System 表示当前操作系统环境，比如这里 MySystemD 表示一个定制的基于 SystemD 服务框架的 Linux 发行版。
    7. Kernel 表示当前操作系统使用的 Linux kernel 的版本号，这里是 Linux5.10.211 。

到这时，有人可能会问这个下拉浮动窗口怎么收起来呢？其实很简单，只需要再点击它上面的工程名字就可以把它收起来了。

然后，我们看当前页面顶部中央的导航栏，其中有比较多的按钮，用来在运行时的不同阶段间跳转。鼠标悬停在每个按钮上时会自动提示当前导航按钮的功能说明和快捷键。

我们先看左边第一个导航按钮： “Begin” 。它表示运行的起始步。为了方便介绍其右侧的其它导航按钮，我们点击下右上角的问号按钮来打开 导航命令和快捷键表格，如下图所示：

从该表格中可以看到其它导航键的说明：
    01. GB 导航按钮，表示 Go Back globally 或 Global Back，也就是全局上下文的后退一步。
    02. GF 导航按钮，表示 Go Forward globally 或 Global Forward，也就是全局上下文的前进一步。
    03. PPE 导航按钮，表示 Previous Process End，也就是跳到上一个进程的 最后被执行的位置。
    04. NPS 导航按钮，表示 Next Process Start，也就是跳到下一个进程的最先被执行的位置。
    05. PB 导航按钮，表示 current Process Backward，也就是在当前进程上下文中后退一步。
    06. PF 导航按钮，表示 current Process Foreward，也就是在当前进程上下文中前进一步。
    07. PPTE 导航按钮，表示 go to current Process's Previous Thread's End，也就跳到当前进程的上一个线程的 最后被执行的位置。
    08. PNTS 导航按钮，表示 go to current Process's Next Thread's Start，也就跳到当前进程的下一个线程的最先被执行的位置。
    09. TB 导航按钮，表示 current Thread Backward，也就是在当前线程上下文中后退一步。
    10. TF 导航按钮，表示 current Thread Foreward，也就是在当前线程上下文中前进一步。
    11. LU 导航按钮，表示 go Line Up of current code block in current thread，也就是跳到当前线程上下文中当前函数或方法的上一行代码处。
    12. LD 导航按钮，表示 S go Line Down of current code block in current thread，也就是跳到当前线程上下文中当前函数或方法的下一行代码处。
    13. LP 导航按钮，表示 go to the occurrence of current line in Previous Loop，也就是在当前线程中跳到此行的上一个循环。
    14. LD 导航按钮，表示 go to the occurrence of current line in Next Loop，也就是在当前线程中跳到此行的下一个循环。
    15. BS 导航按钮，表示 go to code Block Start，也就跳到当前线程上下文中当前函数或方法的第一行语句处。
    16. BE 导航按钮，表示 go to code Block End，也就跳到当前线程上下文中当前函数或方法的最后一行语句处，如果当前函数或方法有 return 语句，则是跳到 return 所在的行。
    注意：当以上导航按钮为呈灰色的不可点击状态时，表示相应的跳转目标不存在，故不能点击。

好了，以上我们就介绍完了所有导航按钮了，对于程序员来说应该都不难理解。除了这些位于导航栏中的 导航按钮 ，在界面中还有其它用于导航或跳转的途径，下面分别介绍下。
    1. 在输出子窗口中的输出格表的每一行都可以被双击来快速跳到输出该行的打印语句被执行前的位置。例如，我们可以双击第33行来跳转到输出该行的执行位置。注意，双击第33行，需要双击该行的空白处而不是双击文字部分，因为双击文字部分只会选中文字而不会触发跳转。在双击该行的空白处后会自动跳转到打印该33行的打印语句所在的行的被执行前的状态。
    

    2. 在线程子窗口中的各个线程栈的栈帧（每个栈帧表示调用了某个函数）后面的文件名和行号如果是一个超链接，则说明可以被点击来跳转到相应的执行位置。这种用法与 IDE 中的调试器的原理相类似，就不举例说明了。
    

    3. 在源代码子窗口中显示的源码中被高亮的行可以被双击来直接跳转到被点击的行。某行代码背景被高亮的含义是表示是当前线程在执行被高亮的行所在的函数时经过了这些被高亮的行。也就是说那些没有被高亮的行在当前线程里面调用这个函数的时候没有被执行到。这里有一种比较特殊情况，那就是如果一个被高亮的行位于一个循环内，并且它在当前函数的执行过程中会被多次执行到，此时双击它后会弹出一个列表，从该列表中可以看到该行在当前的循环中一共执行了多少次，然后当前是在哪一次的循环里面，然后可以点击相应的次数来跳到相应次数表示的循环过程里去，非常的方便。例如，我们这里再次双击源码的第 175 行，就会弹出 "Choose an occurrence index of current line" 对话框，从中可以看到当前位置是循环语句的第二次循环过程，并且可以点击1，3，4，5 分别跳到当前被高亮的行在相应次数的循环中的执行位置。

    

有了以上介绍的导航快捷方式，即使某个 runtime 过程包含数百万次执行步骤，我们仍然可以在该 runtime 表示的执行过程中快速地跳到我们想要去的执行位置。

接下来，我们再讲下 Output 子窗口，其左边有 Colorful 和 Plain 2个标签。如下图所示：

Colorful 是当前被选中的标签，它表示是有颜色的输出信息表格，表格的每一行表示一行输出，其背景色表示相应的线程，与 Threads 子窗口中拥有相同颜色的线程对应（源代码子窗口中默认的背景被高亮的行的背景色也是表示的当前线程的颜色）。

Plain 标签表示是当前 runtime 的正常输出，没有背景色，并且只包含当前执行位置之前由进程输出的信息。

一般我们只需要看 Colorful 标签被选中时的输出表格即可，因为它更直观，并且包含所有已输出和将来会输出的所有日志信息。注意：已输出的日志用粗体表示，已输出和将来会输出的日志行之间有一道红色粗线，该红线表示当前的执行位置。

目前这个页面看起来可能有些简单，所以我们接下来可以演示一个更复杂的情况：一个多线程交替运行的场景。当前的 pydemo 程序运行时中恰好有多个线程，这也体现在 Colorful 标签下的输出表格中。我们只需在该表格区域向下滑动鼠标滚轮，就可找到一个交替运行的多线程情况。这里我们看到第85行输出的位置点是一个相对复杂的场景。双击该行空白处（注意不要双击文字部分，否则会只会选中文字而不会触发跳转）会跳转到打印第85行的打印语句所在行被执行前的状态。

另外，在上面的图片中，我们可以看到在输出表格上面还有一个过滤器表格，该表格的每一行表示一个进程，该进程的所有线程位于线程列中。如果某行表示的进程有多个线程的话，我们可以通过点击各线程前的复选框来显示或隐藏该线程在下方的输出表格中的所有输出。这在输出日志量非常大时很有用，因为我们可以选择只显示感兴趣的线程的输出。如果我们只允许显示最后2个线程，则输出表格的内容会变和很少，如下图所示：

注意：过滤器表格可以由 Output 子窗口右上角的 Filter 开关来显示或隐藏。而 Filter 开关右侧的 Merge 开关用来合并或取消合并输出表格中属于相同线程的、内容相同的列。

接下来，我们看下位于页面右上方的 Variables 子窗口用来显示当前线程在调用当前函数或方式过程中的变量信息，主要包含输入参数和局部变量的列表和对应的值，变量列表是累加的，方便浏览和对比所有变量的信息。

好了，以上就是界面中各个功能点的简介了。如果您有任何问题，欢迎发送邮件到 runtimehub.com@gmail.com 或者前往我们的 Youtube 频道： RuntimeHub 上的这个视频下方留言反馈。

感谢您的观看，再见！