内存检查器:检查 ArrayBuffer、TypedArray、DataView 和 Wasm 内存。

Sofia Emelianova
Sofia Emelianova

使用内存检查器检查采用 JavaScript 的 ArrayBufferTypedArrayDataView 内存,以及使用 C++ 编写的 Wasm 应用的 WebAssembly.Memory

概览

内存检查器可整理内存内容,并帮助您快速浏览大型数组。您可以直接在字节旁边查看内存内容的 ASCII 值,并选择不同的字节序。您可以在调试 Web 应用时使用内存检查器,以确保工作流的执行效率。

打开内存检查器

您可以通过多种方式打开内存检查器

从菜单打开

  1. 打开开发者工具
  2. 点击更多选项 展开 >更多工具 >内存检查器内存检查器菜单

在调试期间打开

  1. 使用 JavaScript ArrayBuffer 打开一个网页。我们将使用此演示页面
  2. 打开开发者工具
  3. Sources 面板中打开 demo-js.js 文件,在第 18 行设置断点。
  4. 刷新页面。
  5. 展开右侧 Debugger 窗格中的 Scope 部分。
  6. 您可以打开内存检查器

    • 通过图标。点击 buffer 属性旁边的图标,或者
    • 从上下文菜单中。右键点击 buffer 属性,然后选择 Reveal in Memory Inspector

    在“内存检查器”面板中显示

检查多个对象

  1. 您也可以检查 DataViewTypedArray。例如,b2TypedArray。如需检查这一点,请右键点击 b2 属性,然后选择 Reveal in Memory Inspector(尚未显示 TypedArrayDataView 的图标)。
  2. 系统随即会在内存检查器中打开一个新标签页。请注意,您可以一次检查多个对象。 内存检查器中的新标签页

内存检查器

内存检查器

内存检查器包含 3 个主要区域:

导航栏

  1. 地址输入部分以十六进制格式显示当前字节地址。您可以输入新值,跳转到内存缓冲区中的新位置。例如,尝试输入 0x00000008
  2. 内存缓冲区可能比页面长。您可以使用向左向右按钮进行导航,而不是滚动浏览。
  3. 使用左侧按钮可向前/向后导航。
  4. 默认情况下,缓冲区会在步进时自动更新。如果不是,您可以使用刷新按钮刷新内存并更新其内容。

内存缓冲区

内存缓冲区

  1. 在左侧,地址以十六进制格式显示。
  2. memory 也以十六进制格式显示,每个字节之间用空格分隔。当前选定的字节会突出显示。您可以点击字节或使用键盘(向左、向右、向上、向下)导航。
  3. 右侧显示了内存的 ASCII 表示法。系统会突出显示与字节上所选位对应的值。与内存类似,您可以点击字节或使用键盘(向左、向右、向上、向下)导航。

值检查器

值检查器

  1. 顶部的工具栏包含一个按钮,用于在大端序和小端序之间切换,以及打开设置。打开 settings,选择他们想在检查器中默认显示的值类型。 工具栏按钮
  2. 主区域会显示根据设置的所有值解释。默认情况下,系统会显示所有渠道。
  3. 编码是可点击的。您可以在 dec、十六进制、oct(整数)和 sci(浮点数)之间切换。 编码开关

检查内存

我们一起检查一下内存。

  1. 请按照以下步骤开始调试。
  2. 地址输入中的地址更改为 0x00000027地址输入
  3. 请遵守 ASCII 表示法值解释。目前所有值均为空。
  4. 请注意 Pointer 32-bitPointer 64-bit 旁边有一个蓝色的跳到地址按钮。点击该链接,即可跳转到相应地址。如果地址无效,这些按钮就会灰显且无法点击。 “跳转到地址”按钮
  5. 点击继续执行脚本以逐步检查代码。 继续执行脚本
  6. 请注意,ASCII 表示法现已更新。所有值解释也会一并更新。 已更新所有值解释
  7. 我们来自定义值检查器,使其仅显示浮点数。点击 settings 按钮,然后仅选中 Float 32-bitFloat 64-bit用于自定义值检查器的设置
  8. 我们将编码从 dec 更改为 sci。请注意,值的表示法会相应更新。 更改编码。
  9. 尝试使用键盘或导航栏在内存缓冲区中导航。重复第 4 步,观察值的变化。

WebAssembly 内存检查

WebAssembly.Memory 对象是用于存储对象内存的原始字节的 ArrayBuffer。借助 Memory Inspector 面板,您可以在使用 C++ 编写的 Wasm 应用中检查此类对象。

如需充分利用 WebAssembly.Memory 检查,请执行以下操作:

  • 使用 Chrome 107 或更高版本。请前往 chrome://version/ 查看您的版本。
  • 安装 C/C++ DevTools Support (DWARF) 扩展程序。这是一个使用 DWARF 调试信息调试 C/C++ WebAssembly 应用的插件。

如需检查对象的 WebAssembly.Memory,请执行以下操作:

  1. 此演示页面打开开发者工具
  2. Sources 面板中,打开 demo-cpp.cc 并在 main() 函数中的第 15 行 x[i] = n - i - 1;设置断点
  3. 请重新加载页面以运行该应用。调试程序在断点处暂停。
  4. Debugger 窗格中,展开 Scope >Local
  5. 点击 x: int[10] 数组旁边的 在内存检查器中显示。 图标。

    或者,右键点击该数组,然后选择 Reveal in Memory Inspector

在内存检查器中打开的 x 数组。

如需停止突出显示对象内存,请在 Memory Inspector 面板中,将鼠标悬停在对象标记上,然后点击 x 按钮。

停止突出显示对象内存。

如需了解详情,请参阅: