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

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

메모리 검사기 열기

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

메뉴에서 열기

1. DevTools를 엽니다.
2. More Options > More tools > Memory inspector를 클릭합니다.

디버깅 중에 열기

1. ArrayBuffer 자바스크립트로 페이지를 엽니다. 이 데모 페이지를 사용합니다.
2. DevTools를 엽니다.
3. 소스 패널에서 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 패널 (아직 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. 인코딩은 클릭할 수 있습니다. 정수의 경우 dec, 16진수, oct, 부동 소수점은 sci, dec 간에 전환할 수 있습니다.

메모리 검사

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

1. 다음 단계에 따라 디버깅을 시작하세요.
2. 주소 입력에서 주소를 0x00000027로 변경합니다.
3. ASCII 표현 및 값 해석을 관찰합니다. 현재 모든 값이 비어 있습니다.
4. Pointer 32-bit 및 Pointer 64-bit 옆에 있는 파란색 주소로 이동 버튼을 확인하세요. 이 버튼을 클릭하면 해당 주소로 이동할 수 있습니다. 주소가 유효하지 않으면 버튼이 비활성화되고 클릭할 수 없습니다.
5. 스크립트 실행 재개를 클릭하여 코드를 단계별로 실행합니다.
6. 이제 ASCII 표현이 업데이트되었습니다. 모든 값 해석도 업데이트됩니다.
7. 값 검사기를 맞춤설정하여 부동 소수점만 표시해 보겠습니다. settings 버튼을 클릭하고 Float 32-bit 및 Float 64-bit만 선택합니다.
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. 소스 패널에서 demo-cpp.cc를 열고 main() 함수의 15번 줄 x[i] = n - i - 1;에서 중단점을 설정합니다.
3. 페이지를 새로고침하여 애플리케이션을 실행합니다. 디버거가 중단점에서 일시중지됩니다.
4. Debugger 창에서 범위 > 로컬을 펼칩니다.

5. x: int[10] 배열 옆에 있는 아이콘을 클릭합니다.

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

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

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

• C/C++ 디버깅용 Memory Inspector 확장
• 최신 도구를 사용하여 WebAssembly 디버깅