메모리 검사기: ArrayBuffer, TypedArray, DataView, Wasm 메모리를 검사합니다.

Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

새로운 메모리 검사기를 사용하여 JavaScript의 ArrayBuffer, TypedArray, DataView 메모리와 C++로 작성된 Wasm 애플리케이션의 WebAssembly.Memory를 검사합니다.

Memory Inspector 열기

Memory Inspector를 여는 방법에는 여러 가지가 있습니다.

메뉴에서 열기

  1. DevTools를 엽니다.
  2. More Options 더보기 > More tools > Memory inspector를 클릭합니다.메모리 검사기 메뉴

디버깅 중에 열기

  1. JavaScript ArrayBuffer을 사용하여 페이지를 엽니다. 이 데모 페이지를 사용하겠습니다.
  2. DevTools를 엽니다.
  3. Sources 패널에서 demo-js.js 파일을 열고 18행에 중단점을 설정합니다.
  4. 페이지를 새로고침합니다.
  5. 오른쪽 Debugger 창에서 Scope 섹션을 펼칩니다.

  6. Memory Inspector를 열 수 있습니다.

    • 아이콘 사용: buffer 속성 옆의 아이콘을 클릭하거나
    • 컨텍스트 메뉴 buffer 속성을 마우스 오른쪽 버튼으로 클릭하고 Reveal in Memory Inspector 패널을 선택합니다.

    메모리 검사기 패널에서 보기

여러 객체 검사

  1. DataView 또는 TypedArray도 검사할 수 있습니다. 예를 들어 b2는 TypedArray입니다. 이를 검사하려면 b2 속성을 마우스 오른쪽 버튼으로 클릭하고 Reveal in Memory Inspector Panel을 선택합니다 (아직 TypedArray 또는 DataView 아이콘이 없음).
  2. Memory Inspector에 새 탭이 열립니다. 한 번에 여러 객체를 검사할 수 있습니다. 메모리 검사기의 새 탭

메모리 검사기

메모리 검사기

Memory Inspector는 3가지 기본 영역으로 구성됩니다.

탐색 메뉴

  1. 주소 입력에는 현재 바이트 주소가 16진수 형식으로 표시됩니다. 새 값을 입력하여 메모리 버퍼의 새 위치로 이동할 수 있습니다. 예를 들어 0x00000008를 입력해 봅니다.
  2. 메모리 버퍼가 페이지보다 길 수 있습니다. 스크롤하는 대신 왼쪽 및 오른쪽 버튼을 사용하여 탐색할 수 있습니다.
  3. 왼쪽 버튼을 사용하면 앞으로/뒤로 탐색할 수 있습니다.
  4. 기본적으로 버퍼는 걷기 시 자동으로 업데이트됩니다. 그렇지 않은 경우 refresh 버튼을 사용하면 메모리를 새로고침하고 콘텐츠를 업데이트할 수 있습니다.

메모리 버퍼

메모리 버퍼

  1. 왼쪽에 주소가 16진수 형식으로 표시됩니다.
  2. memory도 16진수 형식으로 표시되며 각 바이트는 공백으로 구분됩니다. 현재 선택된 바이트가 강조표시됩니다. 바이트를 클릭하거나 키보드 (왼쪽, 오른쪽, 위쪽, 아래쪽)로 탐색할 수 있습니다.
  3. 메모리는 ASCII 표현으로 오른쪽에 나와 있습니다. 강조표시는 바이트에서 선택된 비트에 해당하는 값을 보여줍니다. 메모리와 마찬가지로 바이트를 클릭하거나 키보드 (왼쪽, 오른쪽, 위쪽, 아래쪽)로 탐색할 수 있습니다.

값 검사기

값 검사기

  1. 상단 툴바에는 빅 앤 리틀 엔디언 간에 전환하고 설정을 열 수 있는 버튼이 있습니다. 설정을 열고 검사기에서 기본값으로 확인할 값 유형을 선택합니다. 툴바 버튼
  2. 기본 영역에는 설정에 따른 모든 값 해석이 표시됩니다. 기본적으로 모두 표시됩니다.
  3. encoding을 클릭할 수 있습니다. 정수 및 sci의 경우 dec, 16진수, oct, 부동 소수점의 경우 dec를 전환할 수 있습니다. 인코딩 전환

메모리 검사

함께 메모리를 검사해 보겠습니다.

  1. 다음 단계에 따라 디버깅을 시작하세요.
  2. 주소 입력에서 주소를 0x00000027(으)로 변경합니다. 주소 입력
  3. ASCII 표현 및 값 해석을 확인합니다. 현재 모든 값이 비어 있습니다.
  4. Pointer 32-bit 및 Pointer 64-bit 옆에 있는 파란색 Jump to address 버튼을 확인하세요. 이 버튼을 클릭하여 해당 주소로 이동할 수 있습니다. 주소가 유효하지 않으면 버튼이 비활성화되어 클릭할 수 없습니다. 주소로 이동 버튼
  5. 스크립트 실행 재개를 클릭하여 코드를 단계별로 실행합니다. 스크립트 실행 재개
  6. 이제 ASCII 표현이 업데이트되었습니다. 모든 값 해석도 업데이트됩니다. 모든 값 해석이 업데이트됩니다.
  7. 부동 소수점만 표시되도록 값 검사기를 맞춤설정해 보겠습니다. settings 버튼을 클릭하고 Float 32-bit 및 Float 64-bit만 선택합니다. Value Inspector를 맞춤설정하기 위한 설정
  8. 인코딩을 dec에서 sci로 변경해 보겠습니다. 이에 따라 값 표현이 업데이트됩니다. 인코딩을 변경합니다.
  9. 키보드나 탐색 메뉴를 사용하여 메모리 버퍼를 탐색해 보세요. 4단계를 반복하여 값의 변화를 관찰합니다.

WebAssembly 메모리 검사

WebAssembly.Memory 객체는 객체 메모리의 원시 바이트를 보유하는 ArrayBuffer입니다. Memory Inspector 패널을 사용하면 C++로 작성된 Wasm 애플리케이션에서 이러한 객체를 검사할 수 있습니다.

WebAssembly.Memory 검사를 최대한 활용하려면 다음 안내를 따르세요.

  • Chrome 107 이상을 사용해야 합니다. chrome://version/에서 버전을 확인하세요.
  • C/C++ DevTools 지원 (DWARF) 확장 프로그램을 설치합니다. DWARF 디버그 정보를 사용하여 C/C++ WebAssembly 애플리케이션을 디버깅하기 위한 플러그인입니다.

객체의 WebAssembly.Memory를 검사하는 방법은 다음과 같습니다.

  1. 이 데모 페이지에서 DevTools를 엽니다.
  2. Sources 패널에서 demo-cpp.cc를 열고 15행의 main() 함수에 중단점을 설정합니다(x[i] = n - i - 1;).
  3. 페이지를 새로고침하여 애플리케이션을 실행합니다. 중단점에서 디버거가 일시중지됩니다.
  4. Debugger 창에서 Scope > Local을 펼칩니다.

  5. x: int[10] 배열 옆에 있는 메모리 검사기에서 표시합니다. 아이콘을 클릭합니다.

    또는 배열을 마우스 오른쪽 버튼으로 클릭하고 Reveal in Memory Inspector Panel을 선택합니다.

메모리 검사기에서 x 배열이 열렸습니다.

객체 메모리 강조표시를 중지하려면 Memory Inspector 패널에서 객체 배지 위로 마우스를 가져간 후 x 버튼을 클릭합니다.

객체 메모리 강조표시를 중지합니다.

자세한 내용은 다음을 참고하세요.