Проверка массива JavaScriptBuffer с помощью инспектора памяти

  • Статья

Используйте инспектор памяти для просмотра объектов следующих типов и взаимодействия с ними:

С помощью инспектора памяти можно просматривать различные типы объектов памяти, перемещаться и выбирать типы, которые будут использоваться для интерпретации значений. Он отображает значения ASCII непосредственно рядом с байтами и позволяет выбрать различные значения эндианности.

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

Средство "Инспектор памяти " предоставляет больше возможностей, чем средство "Источники" , для проверки ArrayBuffers при отладке. В представлении Область в инструменте Источники отображается список отдельных значений в буфере массива, что затрудняет просмотр всех данных. Кроме того, переход к определенному диапазону в буфере требует прокрутки до определенного индекса, и значения всегда отображаются в виде одного байта, даже если вы хотите видеть их в другом формате, например 32-разрядных целых чисел.

Инструмент

Открытие инспектора памяти во время отладки

  1. Запустите Microsoft Edge.

  2. Откройте тестовый сайт Проверка arrayBuffers в JS (память в JS).

  3. Откройте devTools, нажав клавишу F12 или CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS).

  4. Щелкните Источники и откройте demo-js.js файл.

  5. Установите точку останова в строке 18 , как показано на следующем рисунке.

    Установка точки останова инспектора памяти в файле JavaScript

  6. Обновите веб-страницу. Он не отображается, так как JavaScript приостанавливается в точке останова.

  7. На правой панели Отладчик в разделе Область найдите buffer строку.

  8. В строке buffer можно открыть инспектор памяти одним из следующих методов:

    • Щелкните значок Показать в панели инспектора памяти (значок Показать в панели инспектора памяти) в конце buffer строки свойства или

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

    Открытие инспектора памяти в контекстном меню строки свойств буфера

    Массив JavaScript Откроется в инспекторе памяти.

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

Проверка нескольких объектов

Можно одновременно проверять несколько объектов, таких как DataView и TypedArray.

Когда демонстрационная веб-страница приостановлена в точке останова, объект b2 в представлении Область представляет собой TypedArray. Щелкните правой b2 кнопкой мыши объект и выберите Показать на панели инспектора памяти.

Рядом с первой вкладкой b2 откроется новая вкладка для объекта , представляющая объект в инспекторе buffer памяти.

Две вкладки ArrayBuffer, открытые на панели инспектора памяти

Панель "Инспектор памяти" включает три типа содержимого:

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

В текстовом поле Ввод адреса отображается текущий байтовый адрес в шестнадцатеричном формате. Значение можно изменить, чтобы перейти к новому расположению в буфере памяти. Щелкните текстовое поле и измените значение на 0x00000008. Буфер памяти немедленно переходит на этот байтовый адрес.

Буферы памяти могут быть длиннее одной страницы. Используйте кнопки со стрелками влево и вправо для перехода на предыдущую страницу (<) и следующую страницу (>) соответственно. Если имеется только одна страница данных буфера памяти, стрелки перенастрачиваются в начало и конец страницы.

Используйте стрелки журнала влево, чтобы Назад в журнале адресов (Назад в журнале адресов) и Перейти вперед в журнале адресов (Вперед в журнале адресов).

Если буфер памяти не обновляется автоматически при пошаговом выполнении значений, нажмите кнопку Обновить (обновление буфера памяти).

Буфер памяти

Буфер памяти на панели инспектора памяти

С левой стороны панели адрес отображается в шестнадцатеричном формате. Текущий выбранный адрес выделен полужирным шрифтом.

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

В правой части панели отображается представление ASCII памяти. Выделенный символ соответствует выбранному байту. Вы можете щелкнуть любой символ или перейти с помощью клавиш со стрелками (влево, вправо, вверх и вниз).

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

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

Щелкните текущий тип Endian, чтобы переключиться между big endian и Little endian.

В области main отображаются каждое значение и интерпретация на основе параметров. По умолчанию отображаются все значения.

Щелкните Переключить параметры типа значений (Переключить параметры типа значений), чтобы выбрать типы значений, которые должны отображаться в инспекторе. Это становится новым параметром типа значения по умолчанию.

Параметры типа значения

Представление кодирования можно изменить с помощью раскрывающегося списка. Для целых чисел можно выбрать десятичные dec, шестнадцатеричные hexи восьмеричные oct. Для с плавающей запятой можно выбрать между десятичной нотацией dec и научной нотацией sci.

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

Выполните следующие действия, чтобы отладить веб-страницу в инспекторе памяти.

  1. На панели навигации измените адрес на 0x00000027.

  2. Просмотрите представление ASCII и интерпретации значений. Все значения должны быть пустыми или нулевыми.

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

  3. Нажмите кнопку Возобновить выполнение скрипта (возобновить выполнение скрипта) или нажмите клавишу F8 или CTRL +\ для пошагового выполнения кода.

    Обновлены представление ASCII и интерпретации значений.

    Обновлены значения адресов инспектора памяти

  4. Нажмите кнопку Перейти к адресу (кнопка Перейти к адресу) для 32-разрядного или64-разрядного указателя , чтобы перейти к следующему активному адресу памяти. Если следующий адрес памяти недоступен, кнопка отключается (Адрес из диапазона памяти) с подсказкой Адрес из диапазона памяти.

  5. Настройте инспектор значений так, чтобы он отображал только значения с плавающей запятой. Щелкните Переключить параметры типа значения (переключить параметры типа значений серый) и снимите все флажки, кроме двух значений с плавающей запятой .

    Параметр типа значения с плавающей точкой

  6. Щелкните Переключить параметры типа значений (переключить параметры типа значений синим цветом), чтобы закрыть параметры типа значений.

  7. Используйте раскрывающийся список, чтобы изменить кодировку с dec на sci. Представления значений обновляются.

    Обновлено представление значений адресов инспектора памяти

  8. Изучите буфер памяти с помощью клавиатуры или панели навигации.

  9. Повторите шаги 3 и 4 , чтобы наблюдать за изменениями значений.

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

При проверке памяти WebAssembly (Wasm) процесс аналогичен проверке памяти JavaScript.

  1. Откройте тестовый сайт Wasm Проверка памяти Wasm (память в Wasm).

  2. Откройте devTools, нажав клавишу F12 или CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS).

  3. Щелкните Источники и откройте memory-write.wasm файл.

  4. Установите точку останова в первой строке цикла, шестнадцатеричное значение 0x03c.

  5. Обновите страницу.

  6. В области отладчика в разделе Область разверните модуль.

    Установка точки останова инспектора памяти в файле Wasm

  7. В конце строки свойства щелкните значок Показать в панели инспектора памяти (значок Показать на панели инспектора$imports.memory памяти).

    Wasm ArrayBuffer откроется в инспекторе памяти.

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

Примечание.

Части этой страницы являются изменениями, основанными на работе, созданной и совместно используемой Google и используемой в соответствии с условиями, описанными в международной лицензии Creative Commons Attribution 4.0. Исходная страница находится здесь и автор Ким-Ань Тран (Chrome DevTools).

Creative Commons License Эта работа лицензируется по международной лицензии Creative Commons Attribution 4.0.