使用内存检查器检查 JavaScript ArrayBuffer

使用 内存检查器 查看以下类型的对象并与之交互:

使用 内存检查器 ,可以查看不同类型的内存对象、导航和选择要用于解释值的类型。 它直接在字节旁边显示 ASCII 值,并允许你选择不同的结束度。

内存检查器面板

与源工具相比,内存检查器工具在调试时提供更大的检查ArrayBuffers能力。 “源”工具中的 “作用域 ”视图显示数组缓冲区内单个值的列表,这使得很难查看所有数据。 此外,导航到缓冲区中的特定范围需要滚动到特定的索引,并且值始终显示为单个字节,即使你想要以另一种格式(如 32 位整数)查看它们也是如此。

源工具范围面板提供有限的内存检查功能

调试时打开内存检查器

例如:

  1. 启动 Microsoft Edge。

  2. 在 JS) () (404) 中打开测试站点检查 JS http://memory-inspector.glitch.me/demo-js.html (内存中的 ArrayBuffers。 (Glitch.me 项目托管于 2025 年 7 月 8 日结束。此测试站点计划迁移到 https://github.com/MicrosoftEdge/Demos,包括托管在 github.io.)

  3. 按 F12 或 Ctrl+Shift+I (Windows、Linux) 或 Command+Option+I (macOS) 打开 DevTools。

  4. 单击“ 源 ”并打开 demo-js.js 该文件。

  5. 在第 18 行设置断点,如下图所示。

    内存检查器在 JavaScript 文件中设置断点

  6. 刷新网页。 它无法显示,因为 JavaScript 在断点处暂停。

  7. 在“ 作用域”下的右侧“调试器”窗格中,找到行 buffer 。

  8. 在 行中 buffer ,可以使用以下方法之一打开内存检查器:

    • 单击属性行末尾buffer的“在内存中显示”检查器面板图标 (“在内存中显示”检查器面板“图标) ,或

    • 从上下文菜单中。 右键单击该属性, buffer 然后选择“ 在内存检查器面板中显示”。

    从缓冲区属性行上下文菜单打开内存检查器

    JavaScript ArrayBuffer 将在内存检查器中打开。

    ArrayBuffer 在内存检查器面板中打开

检查多个对象

可以同时检查多个对象,例如 DataView 和 TypedArray。

在断点处暂停演示网页时,“作用域”视图中的对象b2是 TypedArray。 右键单击对象,b2然后选择“在内存检查器面板中显示”

对象的新选项卡将在第一个选项卡 b2 旁边打开,该选项卡代表 buffer 内存检查器中的对象。

在内存检查器面板中打开两个 ArrayBuffer 选项卡

“内存检查器”面板包括三种类型的内容:

内存检查器面板导航栏

“ 输入地址 ”文本框以十六进制格式显示当前字节地址。 可以更改值以跳转到内存缓冲区中的新位置。 在文本框中单击,并将值更改为 0x00000008。 内存缓冲区会立即跳转到该字节地址。

内存缓冲区可能长于一页。 使用向左键和向右键按钮分别导航 上一页 (<) 和 下一页 (>) 。 如果只有一页内存缓冲区数据,则箭头将你带到页面的开始和结束位置。

使用最左侧的历史记录箭头返回地址历史记录 (地址历史记录) 中的返回,在地址历史记录 (在地址历史记录) 中前进。

如果单步执行值时内存缓冲区未自动更新,请单击“ 刷新 (内存缓冲区刷新) 。

内存缓冲区

内存检查器面板内存缓冲区

从面板左侧读取, 地址 以十六进制格式显示。 当前所选地址为粗体。

内存还以十六进制格式显示,每个字节用空格分隔。 突出显示了当前所选的字节。 可以单击任何字节,或使用向左、向右、向上和向下) (箭头键进行导航。

内存的 ASCII 表示形式 显示在面板的右侧。 突出显示的字符对应于所选字节。 可以单击任意字符或使用向左、向右、向上和向下) (箭头键导航。

值检查器

内存检查器面板值检查器

单击当前 Endian 类型可在 Big endian 和 Little endian 之间切换。

主区域根据设置显示每个值和解释。 默认情况下,将显示所有值。

单击“ 切换值类型设置 (切换值类型设置) 以选择要在检查器中看到的值类型。 这将成为新的默认值类型设置。

值类型设置

可以使用下拉列表更改编码视图。 对于整数,可以从十进制 dec、十六进制 hex和八进制 oct中进行选择。 对于浮点数,可以在十进制表示法 dec 和科学表示法 sci之间进行选择。

检查内存

完成以下步骤以在内存检查器中调试网页。

  1. 在 导航栏 中,将地址更改为 0x00000027。

  2. 查看 ASCII 表示形式和值解释。 所有值都应为零或空。

    内存检查器地址更改

  3. 单击“ 恢复脚本执行 (恢复脚本执行) 或按 F8 或 Ctrl +\ 单步执行代码。

    将更新 ASCII 表示形式和值解释。

    内存检查器地址值已更新

  4. 单击“ 跳转到地址 ”按钮 (“ 跳转到地址”按钮 ,) “ 指针 32 位 ”或“ 指针 64 位 ”(根据需要)跳转到下一个活动内存地址。 如果下一个内存地址不可用, (使用工具提示“ 内存范围外地址 ”) “ 地址”关闭按钮。

  5. 自定义 值检查器 以仅显示浮点值。 单击“ 切换值类型设置 (切换值类型设置灰色) 并清除除两个 浮点 值以外的所有复选框。

    值类型设置浮点数

  6. 单击“ 切换值类型设置 (切换值类型设置蓝色) 关闭值类型设置。

  7. 使用下拉列表将编码从 decsci更改为 。 值表示形式已更新。

    内存检查器地址值更新视图

  8. 使用键盘或导航栏浏览内存缓冲区。

  9. 重复步骤 3 和 4 以观察值更改。

WebAssembly 内存检查

对于 WebAssembly (Wasm) 内存检查,此过程类似于检查 JavaScript 内存。

例如:

  1. 打开测试站点“在 Wasm) () ( 404) 中检查 Wasm http://memory-inspector.glitch.me/demo-wasm.html 内存 (内存。 (Glitch.me 项目托管于 2025 年 7 月 8 日结束。此测试站点计划迁移到 https://github.com/MicrosoftEdge/Demos,包括托管在 github.io.)

  2. 按 F12 或 Ctrl+Shift+I (Windows、Linux) 或 Command+Option+I (macOS) 打开 DevTools。

  3. 单击“ 源 ”并打开 memory-write.wasm 该文件。

  4. 在循环中的第一行设置断点,十六进制值 0x03c。

  5. 刷新页面。

  6. 在“ 作用域”下的调试器窗格中,展开“ 模块”。

    内存检查器在 Wasm 文件中设置断点

  7. 单击“ 在内存中显示”检查器面板 图标 (“ 在内存中显示”检查器面板图标) 属性行末尾 $imports.memory 。

    Wasm ArrayBuffer 在 内存检查器中打开。

    内存检查器面板 Wasm

注意

此页面的某些部分是根据 Google 创建和共享的作品所做的修改,并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。 原始页面 在此处 找到,由 Kim-Anh Tran 创作。

Creative Commons 许可证 本作品根据 Creative Commons Attribution 4.0 International License 获得许可。