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

Jecelyn Yeen

Sofia Emelianova

Используйте инспектор памяти для проверки памяти 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 .

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

• Расширение инспектора памяти для отладки C/C++
• Отладка WebAssembly современными инструментами .