이 도움말에서는 Chrome 91에 출시된 메모리 검사기를 소개합니다. 이를 통해 ArrayBuffer, TypedArray, DataView, Wasm 메모리를 검사할 수 있습니다.
소개
ArrayBuffer의 데이터를 이해하고 싶으신가요? 메모리 검사기 이전에는 DevTools에서 ArrayBuffer에 대한 정보를 제한적으로만 확인할 수 있었습니다. 디버깅 세션 중에 범위 뷰에서의 검사는 배열 버퍼 내 단일 값 목록을 보는 것으로 제한되어 데이터를 전체적으로 파악하기 어려웠습니다. 예를 들어 아래 예에서는 범위 뷰에 버퍼가 확장 가능한 배열 범위로 표시됩니다.
버퍼 내 특정 범위로 이동하는 것이 불편했습니다. 사용자가 아래로 스크롤해야 해당 색인이 표시되었습니다. 하지만 위치로 이동하는 것은 쉽지만 값을 실제로 검사하는 이 방법은 번거롭습니다. 이러한 숫자의 의미를 파악하기 어렵기 때문입니다. 특히 단일 바이트가 아닌 32비트 정수로 해석되어야 하는 경우는 어떻게 해야 하나요?
메모리 검사기를 사용하여 값 검사
Chrome 91에서는 배열 버퍼를 검사하는 도구인 메모리 검사기를 도입합니다. 이전에 바이너리 데이터를 보려면 메모리 검사 도구를 사용했을 수 있습니다. 이 도구는 바이너리 콘텐츠를 주소와 함께 그리드에 표시하고 기본 값을 해석하는 다양한 방법을 제공합니다. 메모리 검사기에서 제공하는 기능은 다음과 같습니다. 이제 메모리 검사기를 사용하여 콘텐츠를 보고, 탐색하고, 현재 값을 해석하는 데 사용할 유형을 선택할 수 있습니다. 바이트 옆에 ASCII 값을 바로 표시하고 사용자가 다른 엔디언을 선택할 수 있도록 합니다. 아래에서 메모리 검사기를 사용해 보세요.
이용해 보시겠습니까? 메모리 검사기를 열고 배열 버퍼 (또는 TypedArray, DataView, Wasm 메모리)를 확인하는 방법과 사용 방법에 관한 자세한 내용은 메모리 검사기에 관한 문서를 참고하세요. 이러한 장난감 예시 (JS, Wasm, C++)를 사용해 보세요.
메모리 검사기 디자인
이 부분에서는 웹 구성요소를 사용하여 메모리 검사기가 설계된 방식을 살펴보고 설계 목표 중 하나와 이를 구현한 방법을 보여줍니다. 메모리 검사기의 설계 문서를 살펴보면서 자세한 내용을 알아보세요.
잭이 웹 구성요소를 사용하여 UI 구성요소를 빌드하는 방법에 관한 내부 가이드를 게시한 웹 구성요소로 이전에 관한 블로그 게시물을 보셨을 수도 있습니다. 웹 구성요소로의 이전이 메모리 검사기 작업과 일치하여 새로운 시스템을 사용해 보기로 결정했습니다. 다음은 메모리 검사기를 만들기 위해 빌드한 구성요소를 보여주는 다이어그램입니다 (내부적으로는 선형 메모리 검사기라고 함).
LinearMemoryInspector 구성요소는 메모리 검사기의 모든 요소를 빌드하는 하위 구성요소를 결합하는 상위 구성요소입니다. 기본적으로 Uint8Array 및 address를 사용하며, 둘 중 하나가 변경될 때마다 데이터를 하위 요소에 전파하여 렌더링 재개를 트리거합니다. LinearMemoryInspector 자체는 다음 세 가지 하위 구성요소를 렌더링합니다.
LinearMemoryViewer(값 표시)LinearMemoryNavigator(탐색 허용)LinearMemoryValueInterpreter(기본 데이터의 다양한 유형 해석을 표시함)
후자는 자체적으로 ValueInterpreterDisplay (값 표시) 및 ValueInterpreterSettings (디스플레이에 표시할 유형 선택)를 렌더링하는 상위 구성요소입니다.
각 구성요소는 필요한 경우 구성요소를 재사용할 수 있도록 UI의 작은 구성요소 하나만 나타내도록 설계되었습니다. 구성요소에 새 데이터가 설정될 때마다 재렌더링이 트리거되어 구성요소에 설정된 데이터에 반영된 변경사항이 표시됩니다. 구성요소가 포함된 워크플로의 한 가지 예는 아래와 같습니다. 여기서 사용자가 주소 표시줄에서 주소를 변경하면 새 데이터(이 경우 표시할 주소)를 설정하여 업데이트가 트리거됩니다.
LinearMemoryInspector는 LinearMemoryNavigator에 리스너로 자신을 추가합니다. addressChanged 함수는 address-changed 이벤트에서 트리거됩니다. 이제 사용자가 주소 입력을 수정하는 즉시 앞서 언급한 이벤트가 전송되어 addressChanged 함수가 호출됩니다. 이제 이 함수는 주소를 내부적으로 저장하고 data(address, ..) setter를 사용하여 하위 구성요소를 업데이트합니다. 하위 구성요소는 주소를 내부적으로 저장하고 뷰를 다시 렌더링하여 특정 주소에 콘텐츠를 표시합니다.
설계 목표: 성능 및 메모리 사용량을 버퍼 크기와 독립적으로 만들기
메모리 검사기를 설계할 때 고려한 한 가지 측면은 메모리 검사기의 성능이 버퍼 크기와 무관해야 한다는 점입니다.
이전 부분에서 보았듯이 LinearMemoryInspector 구성요소는 UInt8Array를 사용하여 값을 렌더링합니다. 동시에 메모리 검사기에서 전체 데이터를 보관할 필요가 없도록 했습니다. 메모리 검사기에서는 데이터의 일부만 표시하기 때문입니다 (예: Wasm 메모리는 최대 4GB까지 될 수 있으며 메모리 검사기 내에 4GB를 저장하고 싶지 않음).
따라서 메모리 검사기의 속도와 메모리 소비량이 표시되는 실제 버퍼와 무관하도록 LinearMemoryInspector 구성요소가 원래 버퍼의 하위 범위만 유지하도록 합니다.
이렇게 하려면 먼저 LinearMemoryInspector가 memoryOffset 및 outerMemoryLength라는 두 가지 인수를 더 받아야 합니다. memoryOffset는 전달된 Uint8Array가 시작되는 오프셋을 나타내며 올바른 데이터 주소를 렌더링하는 데 필요합니다. outerMemoryLength는 원래 버퍼의 길이이며 표시할 수 있는 범위를 파악하는 데 필요합니다.
이 정보를 사용하면 모든 데이터가 실제로 준비되지 않은 상태에서도 이전과 동일한 뷰 (address 주변 콘텐츠)를 렌더링할 수 있습니다. 다른 주소가 요청되었는데 다른 범위에 해당하는 경우 어떻게 해야 하나요? 이 경우 LinearMemoryInspector는 유지되는 현재 범위를 업데이트하는 RequestMemoryEvent를 트리거합니다. 예는 아래와 같습니다.
이 예에서 사용자는 메모리 페이지 (메모리 검사기가 데이터 청크를 표시하기 위해 페이징을 사용함)를 탐색하여 PageNavigationEvent를 트리거하고, PageNavigationEvent가 RequestMemoryEvent를 트리거합니다.
이 이벤트는 새 범위 가져오기를 시작하고, 이는 데이터 설정을 통해 LinearMemoryInspector 구성요소에 전파됩니다. 따라서 새로 가져온 데이터가 표시됩니다.
그리고 알고 계셨나요? Wasm 및 C/C++ 코드에서 메모리를 검사할 수도 있습니다.
메모리 검사기는 JavaScript의 ArrayBuffers에 사용할 수 있을 뿐만 아니라 Wasm 메모리와 C/C++ 참조/포인터가 가리키는 메모리를 검사하는 데도 사용할 수 있습니다 (DWARF 확장 프로그램을 사용). 아직 사용해 보지 않았다면 최신 도구로 WebAssembly 디버깅을 참고하세요. 웹에서 C++의 네이티브 디버깅을 위해 메모리 검사기가 작동하는 방식을 간략히 살펴보겠습니다.
결론
이 도움말에서는 메모리 검사기를 소개하고 디자인을 간략하게 살펴봤습니다. 메모리 검사기가 ArrayBuffer에서 어떤 일이 일어나고 있는지 이해하는 데 도움이 되기를 바랍니다. :-) 개선을 위한 제안이 있으면 알려주시고 버그를 신고해 주세요.
미리보기 채널 다운로드
Chrome Canary, Dev 또는 베타를 기본 개발 브라우저로 사용하는 것이 좋습니다. 이러한 미리보기 채널을 사용하면 최신 DevTools 기능에 액세스하고, 최신 웹 플랫폼 API를 테스트하고, 사용자가 문제를 발견하기 전에 사이트에서 문제를 찾을 수 있습니다.
Chrome DevTools팀에 문의하기
다음 옵션을 사용하여 DevTools와 관련된 새로운 기능, 업데이트 또는 기타 사항을 논의하세요.
- crbug.com에서 의견 및 기능 요청을 제출하세요.
- DevTools에서 옵션 더보기 > 도움말 > DevTools 문제 신고를 사용하여 DevTools 문제를 신고합니다.
- @ChromeDevTools에 트윗하세요.
- DevTools의 새로운 기능 YouTube 동영상 또는 DevTools 도움말 YouTube 동영상에 댓글을 남겨주세요.