Инспектор памяти: проверьте ArrayBuffer, TypedArray, DataView и Wasm Memory.

Используйте инспектор памяти для проверки памяти ArrayBuffer , TypedArray и DataView в JavaScript, а также WebAssembly.Memory приложений Wasm, написанных на C++.

Обзор

Инспектор памяти упорядочивает содержимое памяти и помогает быстро перемещаться по большим массивам. Вы можете просмотреть значения ASCII содержимого памяти непосредственно рядом с байтами и выбрать другой порядок байтов. Используйте инспектор памяти во время отладки веб-приложения, чтобы повысить эффективность рабочего процесса.

Откройте инспектор памяти

Открыть инспектор памяти можно несколькими способами.

Открыть из меню

  1. Откройте Инструменты разработчика .
  2. Нажмите «Дополнительные параметры». Более > Дополнительные инструменты > Инспектор памяти . Меню инспектора памяти

Открыть во время отладки

  1. Откройте страницу с помощью JavaScript ArrayBuffer . Мы будем использовать эту демонстрационную страницу .
  2. Откройте Инструменты разработчика .
  3. Откройте файл demo-js.js на панели «Источники» , установите точку останова в строке 18.
  4. Обновите страницу.
  5. Разверните раздел Область на правой панели Отладчика .
  6. Вы можете открыть инспектор памяти :

    • Из значка . Нажав на значок рядом со свойством buffer , или
    • Из контекстного меню . Щелкните правой кнопкой мыши свойство buffer и выберите «Показать на панели инспектора памяти» .

    Показать на панели инспектора памяти

Осмотрите несколько объектов

  1. Вы также можете проверить DataView или TypedArray . Например, b2 — это TypedArray . Чтобы проверить это, щелкните правой кнопкой мыши свойство b2 и выберите «Показать на панели инспектора памяти» (значка для TypedArray или DataView пока нет).
  2. В Инспекторе памяти откроется новая вкладка. Обратите внимание, что вы можете проверять несколько объектов одновременно. Новая вкладка в инспекторе памяти.

Инспектор памяти

Инспектор памяти

Инспектор памяти состоит из 3 основных областей:

Панель навигации

  1. Ввод адреса показывает текущий адрес байта в шестнадцатеричном формате. Вы можете ввести новое значение, чтобы перейти к новому месту в буфере памяти. Например, попробуйте ввести 0x00000008 .
  2. Буферы памяти могут быть длиннее страницы. Вместо прокрутки вы можете использовать левую и правую кнопку для навигации.
  3. Кнопки слева позволяют осуществлять навигацию вперед/назад .
  4. По умолчанию буфер автоматически обновляется при шаге. В противном случае кнопка обновления дает вам возможность обновить память и обновить ее содержимое.

Буфер памяти

Буфер памяти

  1. Слева адрес отображается в шестнадцатеричном формате.
  2. Память также отображается в шестнадцатеричном формате, где каждый байт разделен пробелом. Текущий выбранный байт выделяется. Вы можете нажать на байт или перемещаться с помощью клавиатуры (влево, вправо, вверх, вниз).
  3. Представление памяти в формате ASCII показано справа. Подсветка показывает значение, соответствующее выбранным битам в байте. Как и в случае с памятью, вы можете нажимать на байт или перемещаться с помощью клавиатуры (влево, вправо, вверх, вниз).

Инспектор значений

Инспектор значений

  1. На верхней панели инструментов имеется кнопка для переключения между прямым и прямым порядком байтов и открытия настроек . Откройте настройки , чтобы выбрать, какие типы значений они хотят видеть по умолчанию в инспекторе. кнопка на панели инструментов
  2. В основной области отображаются все интерпретации значений в соответствии с настройками . По умолчанию показаны все.
  3. Кодировка кликабельна. Вы можете переключаться между dec, hex, Oct для целых чисел и sci, dec для чисел с плавающей запятой. Переключатель кодирования

Проверка памяти

Давайте вместе проверим память.

  1. Выполните следующие действия, чтобы начать отладку.
  2. Измените адрес на 0x00000027 во входном адресе . ввод адреса
  3. Обратите внимание на представление ASCII и интерпретацию значений . На данный момент все значения пусты.
  4. Обратите внимание на синюю кнопку Перейти к адресу рядом с Pointer 32-bit и Pointer 64-bit . Вы можете нажать на нее, чтобы перейти по адресу. Кнопки неактивны и недоступны для нажатия, если адреса недействительны. Кнопка перехода к адресу
  5. Нажмите «Возобновить выполнение сценария» , чтобы выполнить код. Возобновить выполнение скрипта
  6. Обратите внимание , что представление ASCII теперь обновлено. Все интерпретации значений также обновляются. Все интерпретации значений обновлены.
  7. Давайте настроим инспектор значений так, чтобы он отображал только числа с плавающей запятой . Нажмите кнопку настроек и отметьте только Float 32-bit и Float 64-bit . настройки для настройки инспектора значений
  8. Давайте изменим кодировку с dec на sci . Обратите внимание, что представления значений соответствующим образом обновляются. Измените кодировку.
  9. Попробуйте перемещаться по буферу памяти с помощью клавиатуры или панели навигации. Повторите шаг 4, чтобы наблюдать за изменением значений.

Проверка памяти WebAssembly

Объект WebAssembly.Memory представляет собой ArrayBuffer , содержащий необработанные байты памяти объекта. Панель «Инспектор памяти» позволяет проверять такие объекты в приложениях Wasm, написанных на C++.

Чтобы в полной мере воспользоваться преимуществами проверки WebAssembly.Memory :

  • Используйте Chrome 107 или более позднюю версию. Проверьте свою версию на chrome://version/ .
  • Установите расширение поддержки C/C++ DevTools (DWARF) . Это плагин для отладки приложений C/C++ WebAssembly с использованием отладочной информации DWARF.

Чтобы проверить WebAssembly.Memory объекта:

  1. Откройте DevTools на этой демонстрационной странице .
  2. На панели «Источники» откройте demo-cpp.cc и установите точку останова в функции main() в строке 15: x[i] = n - i - 1; .
  3. Перезагрузите страницу, чтобы запустить приложение. Отладчик приостанавливает работу в точке останова.
  4. На панели «Отладчик» разверните «Область» > «Локальный» .
  5. Нажмите кнопку Показать в инспекторе памяти. значок рядом с массивом x: int[10] .

    Либо щелкните массив правой кнопкой мыши и выберите «Показать на панели инспектора памяти» .

Массив x открыт в инспекторе памяти.

Чтобы прекратить выделение памяти объекта, на панели «Инспектор памяти» наведите указатель мыши на значок объекта и нажмите кнопку x .

Перестаньте выделять память объекта.

Чтобы узнать больше, см.: