网页用户界面

EduMIPS64 还提供一个完全在浏览器中运行的网页应用程序。模拟器内核由 Java 交叉编译为 JavaScript，并以 Web Worker 的形式运行，而用户界面则使用 React 构建。生产环境部署在 https://web.edumips.org。

本章介绍网页前端。关于源文件格式、指令集、浮点单元和示例程序，请参阅 本手册的其他章节：那些内容与具体的用户界面无关。

布局概览

窗口分为顶部工具栏和两个主要区域：

  • 左侧是 代码编辑器（基于 Monaco 的 MIPS64 编辑器）。

  • 右侧是一组可折叠的面板，显示模拟运行的状态： Issues、Statistics、Pipeline、Registers、Memory、 Standard Output、Cache Configuration 和 General Settings。

顶部工具栏

顶部工具栏汇集了控制模拟器的所有操作。每个按钮都有一个工具提示，描述 其作用。

  • EduMIPS64 标志和 "Web Version" 标签 — 标识当前运行的版本。当当前 版本不是生产版时，标签旁会显示一个彩色芯片：

    • 黄色 PR #N 芯片表示这是某个 pull request 的预览版，点击该芯片 会跳转到对应的 PR 页面；

    • 蓝色 dev 芯片表示这是本地开发版本。

  • CPU 状态芯片 — 显示模拟 CPU 的当前状态，并使用颜色编码：

    • READY（绿色）— 尚未加载程序，或 CPU 刚被重置；

    • RUNNING（黄色）— 已加载程序，CPU 正在执行；

    • STOPPING / STOPPED（红色）— 已读取到终止指令，流水线正在 清空；或程序已结束。

  • Load — 解析编辑器中的代码并将其加载到模拟器中。模拟器运行时 此按钮被禁用；加载成功后该按钮被隐藏。

  • Single Step — 执行一个 CPU 周期。

  • Multi Step — 一次点击执行可配置数量的 CPU 周期。当前数量会显示 在按钮的工具提示中，可在 General Settings 面板（"Multi Step Size"） 中修改。

  • Run All — 一直执行程序，直到遇到 SYSCALL 0 （或等效指令） 或 BREAK 指令，或者用户手动暂停或停止。在每两个内部批次的周期 之间，模拟器可以等待一个可配置的延迟（Execution Delay），以便 长时间运行也能在视觉上被观察到。

  • Pause — 在当前周期暂停正在执行的程序。之后可以使用 Single Step、Multi Step 或 Run All 继续执行。

  • Stop — 停止当前的执行，并将 CPU 重置到 READY 状态，同时清空 寄存器、内存和流水线。

  • Clear — 清空代码编辑器，仅保留一个空的汇编骨架（.data 和 .code 指令以及末尾的 SYSCALL 0）。CPU 运行时该按钮被禁用。

  • Restore default sample — 将编辑器的内容替换为 EduMIPS64 自带的示例程序（与全新安装时显示的程序相同）。该按钮可在实验后 恢复到一个已知可用的起点，或者用于丢弃保存在本地的编辑器内容 （见下文 保存与加载）。CPU 运行时该按钮被禁用。

  • Open Code — 打开本地文件（通常是 .s 文件），并将其内容加载 到编辑器中。

  • Save Code — 将编辑器的当前内容保存为本地文件 code.s。

  • Help (?) — 在应用内打开本手册，左侧带有导航抽屉，并提供语言 选择器，可在英语、意大利语和中文之间切换。Help 对话框中的 About 选项卡会显示模拟器版本以及当前运行版本的说明。

在当前状态下不会产生任何效果的按钮会被自动禁用。例如，Single Step、 Multi Step 和 Run All 在使用 Load 加载程序之前是禁用的， Pause 仅在长时间执行进行中时可用。

代码编辑器

代码编辑器基于 Monaco —— 即 Visual Studio Code 所使用的编辑器 —— 专门用于编写 MIPS64 汇编。 它支持所有常见的代码编辑器功能（多光标、查找替换、行号、撤销/重做、 自动布局、根据操作系统偏好自动切换浅色/深色主题），并提供下面描述的 若干 EduMIPS64 专用功能。

语法高亮

编辑器为 MIPS64 源代码提供语法高亮：

  • 标签（以标识符后跟 : 开头的行）；

  • EduMIPS64 支持的所有指令（合法指令列表在运行时由模拟器内核计算 得出）；

  • 以 . 开头的指示符，例如 .data、.code、.word；

  • 形如 rNN 的寄存器名；

  • 数字字面量；

  • 字符串字面量；

  • 以 ; 开头的注释。

实时校验

当你在编辑器中输入代码时，模拟器会在后台对其进行解析，并直接在编辑器 中报告 错误 和 警告：

  • 错误以红色波浪线标出；

  • 警告以黄色波浪线标出；

  • 将鼠标悬停在标记区域上会以工具提示形式显示问题描述；

  • 受影响的行还会在编辑器边栏中以图标标记。

相同的问题也会汇总在右侧的 Issues 面板中（见下文）。警告不会 阻止执行；错误会阻止执行 —— 在程序存在错误时点击 Load 会弹出 解析器返回的错误信息。

悬停信息

程序被解析后（即使用 Load 按钮加载之后），将鼠标悬停在编辑器中的 某条指令上会打开一个工具提示，其中包含：

  • Address — 指令所在的内存地址；

  • OpCode — 汇编操作码（例如 DADD、LD）；

  • Binary — 32 位二进制编码；

  • Hex — 同一编码的十六进制表示，左侧补零至 8 位；

  • CPU Stage — 仅当指令当前位于流水线中时显示；标识当前周期所处 的流水线阶段（例如 Instruction Fetch (IF)、Execute (EX)、 FPU Multiplier (3)）。

流水线阶段实时可视化

程序运行时，与每个流水线阶段当前所执行的指令对应的源代码行会被高亮 显示，并使用一种标识该阶段的颜色。该颜色编码与 Pipeline 面板共享：

阶段

高亮颜色

Instruction Fetch (IF)

黄色

Instruction Decode (ID)

蓝色

Execute (EX)

红色

Memory Access (MEM)

绿色

Write Back (WB)

品红

FPU Adder (1..4)

深绿色

FPU Multiplier (1..7)

青色

FPU Divider

橄榄色

随着模拟的推进，高亮会跟随指令在流水线中移动，从而让人一眼就能看出 任意周期中哪些源代码行处于哪个阶段。结合上述的悬停工具提示，可以 非常方便地在执行的任意时刻检查流水线状态。

当程序被加载到模拟器时，编辑器会变为只读。要重新编辑源代码，请使用 Stop 重置 CPU。

保存与加载

编辑器内容可以通过工具栏的 Save Code 和 Open Code 按钮持久化。 Save Code 会触发一个 code.s 文件的下载；Open Code 允许选择本地 文件，并以其内容替换编辑器中的代码。

此外，编辑器会在输入时自动将其内容保存到浏览器的 local storage 中， 这样意外刷新页面不会再把一个写到一半的程序重置回示例程序。下次在同一 浏览器中打开页面时，最后一次编辑的源代码会被恢复。如果需要丢弃保存的 内容并恢复到原始示例程序，可以使用工具栏中的 Restore default sample 按钮。

可选的 Vi 模式

可以通过 General Settings 面板切换编辑器的 Vi 模式。启用后，编辑器 会响应基本的 vi 按键绑定（模式、移动、查找），这对习惯于在终端中编辑 源代码的用户很方便。

字体大小

可以在 General Settings 面板中增大或减小编辑器的字体大小；该值同时 也用于界面中其他的等宽显示元素。

Issues 面板

右侧的 Issues 面板与编辑器中内联显示的诊断信息保持一致：

  • 每一条记录显示问题所在的行号、列号以及解析器返回的简短描述；

  • 警告图标（黄色三角形）标识警告，错误图标（红色圆形）标识错误；

  • 面板标题处会显示两个计数芯片，一个用于警告，一个用于错误。当没有 问题时这些芯片会被隐藏；

  • 每一条记录都可以点击：选中某个问题后，编辑器会滚动并将对应的代码 行居中显示，同时把光标定位到所报告的列并将焦点切换到编辑器，方便 立即修改问题。

Issues 面板默认展开，以便问题始终可见。

运行时面板

窗口右侧由若干可独立折叠的面板（accordion）堆叠而成。每个面板可以 通过点击其标题独立展开或折叠；展开状态会跨页面刷新保持。

当面板被折叠且其内容因模拟步进而发生变化时，面板标题旁会出现一个 小的脉动圆点。这样无需展开所有面板，也能轻松发现有趣的变化（例如 某个寄存器被写入）。该脉动指示器可以在 General Settings 中通过 "Accordion Change Alerts" 关闭。

Statistics

程序执行相关的计数器：

  • 已执行的周期数；

  • 已执行的指令数；

  • CPI —— 每条指令的平均周期数（cycles / instructions）；

  • RAW、WAW 和结构性停顿数；

  • L1 指令缓存的读次数和未命中次数；

  • L1 数据缓存的读次数、读未命中、写次数和写未命中（仅在配置缓存 模拟器时才有意义 —— 见 Cache Configuration）。

Pipeline

以图形化方式展示 CPU 流水线，外观参考经典的 Swing 前端的流水线 示意图。整数流水线的五个阶段（IF、ID、EX、MEM、WB）以相互连接的 方块绘制，FPU 功能单元——FP Adder（4 级）、FP Multiplier（7 级） 以及 FP Divider——围绕在它们周围。每个方块：

  • 当其中持有指令时，会以该阶段的颜色高亮，并在方块中显示指令名；

  • 当阶段空闲或仅持有流水线气泡时（例如分支冲刷的槽位、程序结束时 的排空气泡），保持为空白方框：与 Swing 流水线视图的做法一致， 气泡渲染为空阶段；

  • 当本周期内确实发生了停顿时，方块会以斜线填充、使用专用的 Stall 颜色，并标注简短的停顿类型标签。标签沿用 Swing 周期 视图的分类：

    • RAW —— Read-After-Write 数据相关（关闭 forwarding 时 通常出现在 ID 阶段）；

    • WAW —— 两条 FP 指令竞争同一目的寄存器引发的 Write-After-Write 相关；

    • Struct: Div / EX / FU —— FP 除法器、整数 EX 阶段或其他 FP 功能单元上的结构相关；

    • Struct: Mem / Add / Mul —— 由 MEM 阶段被占用、FP Adder 末级（A4）或 FP Multiplier 末级（M7）被占用引起的结构相关。

    本 MIPS 实现中**不会**出现 WAR（Write-After-Read）相关：ID 阶段 按序发射加上 WB 阶段的延迟写回，使得任意先发射的读操作总在后续 写操作之前完成，因此模拟器从不产生此类相关。

停顿由更新 CPU 停顿计数器的同一套逻辑识别，因此 Web 流水线视图所 显示的停顿与 Statistics 面板中的总数始终一致。

各阶段的颜色（包括 Stall 颜色）可在 General Settings → Pipeline Colors 中自定义（见下文），并保存在浏览器的本地存储中。

Registers

显示整数通用寄存器、浮点寄存器以及 FCSR 的值。值以十六进制形式显示； 将鼠标悬停在某个值上会以工具提示形式显示对应的十进制解释。

Memory

显示模拟主存的当前内容，按可寻址单元组织。每一行显示地址（十六进制） 以及该地址处存储的值；工具提示会显示十进制值，以及与该单元相关的 源代码标签和注释。

Standard Output

一个只读的文本区域，收集程序通过 SYSCALL 4（输出整数）和 SYSCALL 5（输出字符串）打印的所有内容。SYSCALL 3（读取 字符串）通过弹窗对话框支持：当运行的程序请求输入时，会弹出 Input 对话框要求用户输入。对话框会强制限制程序声明的最大长度，并且可以 取消。

Cache Configuration

用于配置 L1 缓存模拟器的参数：

  • Size — 缓存的总容量，单位字节；

  • Block Size — 单个缓存行的大小，单位字节；

  • Associativity — 每组的路数（1 表示直接映射，>1 表示 组相联）。

L1 指令缓存和 L1 数据缓存可以独立配置。模拟器运行时这些字段被禁用； 新的配置将在下次重置后生效。

General Settings

影响模拟器和 UI 的持久化设置。所有值都保存在浏览器的 localStorage 中，并在页面刷新后保留。

  • Editor Vi Mode — 在代码编辑器中切换基本的 vi 按键绑定。

  • Font Size — 代码编辑器以及其他等宽显示面板的字体大小；可以通过 - 和 + 按钮调整。

  • Accordion Change Alerts — 启用或禁用折叠面板内容变化时显示的 脉动指示器。

  • CPU Forwarding — 启用或禁用流水线中的转发（forwarding）。在 模拟器运行时禁用，因为更改它需要重置 CPU。

  • Multi Step Size — 工具栏 Multi Step 按钮单击一次执行的周期数。

  • Execution Delay (ms) — 在 Run All 中两个连续内部批次之间插入 的延迟。增大该值可以减慢长时间运行，使行高亮和面板更新等视觉反馈 得以实时跟踪。该更改会立即生效，即使在执行中途也是如此。

  • Pipeline Colors — Pipeline 示意图为各阶段使用的颜色。每一项 （IF、ID、EX、MEM、WB、FP Adder、 FP Multiplier、FP Divider、Stall）都可以通过取色器 修改；Reset to defaults 按钮可恢复原始配色（与 Swing 前端 默认使用的 RGB 值相同）。

将 EduMIPS64 作为桌面或命令行应用程序运行

网页前端无需安装即可使用，非常方便；但 EduMIPS64 主要以 Java 桌面 应用程序的形式发布，也可以从命令行运行。桌面 JAR 提供了额外的功能 （更丰富的设置对话框、用于缓存追踪分析的 Dinero 前端、用于批处理 / headless 执行的 CLI 选项、跟踪文件写入器），这些都记录在 Read the Docs 上的完整手册中。

要安装桌面应用程序或从命令行运行 EduMIPS64，请参阅项目的 GitHub 仓库：

如果你发现网页前端中的 bug 或希望提出改进建议，欢迎在 GitHub 上提交 issue。