Trình kiểm tra bộ nhớ: Kiểm tra ArrayBuffer, TypedArray, DataView và wasm Memory.

Jecelyn Yeen

Sofia Emelianova

Sử dụng Trình kiểm tra bộ nhớ để kiểm tra bộ nhớ ArrayBuffer, TypedArray và DataView trong JavaScript cũng như WebAssembly.Memory của các ứng dụng Wasm được viết bằng C++.

Tổng quan

Trình kiểm tra bộ nhớ sắp xếp nội dung bộ nhớ và giúp bạn điều hướng các mảng lớn một cách nhanh chóng. Bạn có thể xem giá trị ASCII của nội dung bộ nhớ ngay bên cạnh các byte và chọn nội dung cụ thể khác. Sử dụng Trình kiểm tra bộ nhớ khi bạn gỡ lỗi ứng dụng web để có quy trình làm việc hiệu quả.

Mở Trình kiểm tra bộ nhớ

Có một số cách để mở Trình kiểm tra bộ nhớ.

Mở từ trình đơn

1. Mở Công cụ cho nhà phát triển.
2. Nhấp vào biểu tượng Tuỳ chọn khác > Công cụ khác > Trình kiểm tra bộ nhớ.

Mở trong khi gỡ lỗi

1. Mở một trang bằng JavaScript ArrayBuffer. Chúng tôi sẽ sử dụng trang minh hoạ này.
2. Mở Công cụ cho nhà phát triển.
3. Mở tệp demo-js.js trong bảng điều khiển Sources (Nguồn), đặt điểm ngắt ở dòng 18.
4. Hãy làm mới trang.
5. Mở rộng phần Scope (Phạm vi) trên ngăn Debugger (Trình gỡ lỗi) bên phải.

6. Bạn có thể mở Trình kiểm tra bộ nhớ:

   • Từ biểu tượng. Nhấp vào biểu tượng bên cạnh tài sản buffer, hoặc
   • Trong trình đơn theo bối cảnh. Nhấp chuột phải vào thuộc tính buffer rồi chọn Reveal in Memory Inspector Panel (Khám phá trong bảng điều khiển Trình kiểm tra bộ nhớ).

   

Kiểm tra nhiều đối tượng

1. Bạn cũng có thể kiểm tra DataView hoặc TypedArray. Ví dụ: b2 là một TypedArray. Để kiểm tra việc này, hãy nhấp chuột phải vào thuộc tính b2 rồi chọn Hiển thị trong bảng điều khiển Trình kiểm tra bộ nhớ (Chưa có biểu tượng nào cho TypedArray hoặc DataView).
2. Một thẻ mới sẽ mở trong Memory Inspector (Trình kiểm tra bộ nhớ). Xin lưu ý rằng bạn có thể kiểm tra nhiều đối tượng cùng một lúc.

Trình kiểm tra bộ nhớ

Trình kiểm tra bộ nhớ bao gồm 3 khu vực chính:

Thanh điều hướng

1. Dữ liệu đầu vào của địa chỉ cho thấy địa chỉ byte hiện tại ở định dạng hex. Bạn có thể nhập một giá trị mới để chuyển đến một vị trí mới trong vùng đệm bộ nhớ. Ví dụ: hãy thử nhập 0x00000008.
2. Vùng đệm bộ nhớ có thể dài hơn một trang. Thay vì cuộn qua, bạn có thể sử dụng nút trái và phải để điều hướng.
3. Các nút ở bên trái cho phép di chuyển tiến/lùi.
4. Theo mặc định, vùng đệm được tự động cập nhật khi chạy. Trong trường hợp không phải, nút refresh cho phép bạn làm mới và cập nhật nội dung của bộ nhớ.

Vùng đệm bộ nhớ

1. Ở phần bên trái, address hiển thị ở định dạng hex.
2. memory (Bộ nhớ) cũng hiển thị ở định dạng hex, mỗi byte được phân tách bằng một dấu cách. byte hiện được chọn được làm nổi bật. Bạn có thể nhấp vào byte hoặc điều hướng bằng bàn phím (trái, phải, lên, xuống).
3. Giá trị đại diện ASCII của bộ nhớ được hiển thị ở phía bên phải. Một phần được đánh dấu sẽ hiện giá trị tương ứng với các bit đã chọn trên byte. Tương tự như bộ nhớ, bạn có thể nhấp vào byte hoặc điều hướng bằng bàn phím (trái, phải, lên, xuống).

Công cụ kiểm tra giá trị

1. Thanh công cụ trên cùng có nút để chuyển đổi giữa endian lớn và nhỏ, cũng như để mở cài đặt. Mở phần cài đặt để chọn loại giá trị mà họ muốn xem theo mặc định trong công cụ kiểm tra.
2. Khu vực chính hiện tất cả cách diễn giải giá trị theo chế độ cài đặt. Theo mặc định, tất cả đều hiển thị.
3. Mã hoá có thể nhấp vào được. Bạn có thể chuyển đổi giữa dec, hex, oct cho số nguyên và sci, dec cho số thực có độ chính xác đơn.

Kiểm tra bộ nhớ

Hãy cùng kiểm tra bộ nhớ.

1. Làm theo các bước sau để bắt đầu gỡ lỗi.
2. Thay đổi địa chỉ thành 0x00000027 trong mục nhập địa chỉ.
3. Quan sát cách trình bày ASCII và diễn giải giá trị. Tất cả giá trị đều trống tại thời điểm này.
4. Hãy lưu ý nút Jump to address (Chuyển tới địa chỉ) màu xanh dương bên cạnh Pointer 32-bit và Pointer 64-bit. Bạn có thể nhấp vào địa chỉ đó để chuyển đến địa chỉ. Các nút chuyển sang màu xám và không nhấp vào được nếu địa chỉ không hợp lệ.
5. Nhấp vào Tiếp tục thực thi tập lệnh để duyệt qua mã.
6. Lưu ý rằng nội dung trình bày ASCII hiện đã được cập nhật. Tất cả cách diễn giải giá trị cũng được cập nhật.
7. Hãy tuỳ chỉnh Trình kiểm tra giá trị để chỉ hiển thị dấu phẩy động. Nhấp vào nút settings và chỉ chọn Float 32-bit và Float 64-bit.
8. Hãy thay đổi phương thức mã hoá từ dec thành sci. Lưu ý rằng các phần trình bày giá trị sẽ được cập nhật tương ứng.
9. Thử điều hướng vùng đệm bộ nhớ bằng bàn phím hoặc sử dụng thanh điều hướng. Lặp lại bước 4 để quan sát các thay đổi về giá trị.

Kiểm tra bộ nhớ WebAssembly

Đối tượng WebAssembly.Memory là một ArrayBuffer chứa các byte thô của bộ nhớ đối tượng. Bảng điều khiển Memory Inspector (Trình kiểm tra bộ nhớ) cho phép bạn kiểm tra các đối tượng như vậy trong các ứng dụng Wasm được viết bằng C++.

Cách khai thác tối đa tính năng kiểm tra WebAssembly.Memory:

• Sử dụng Chrome 107 trở lên. Kiểm tra phiên bản của bạn tại chrome://version/.
• Cài đặt tiện ích Hỗ trợ C/C++ cho Công cụ cho nhà phát triển (DWARF). Đây là trình bổ trợ để gỡ lỗi ứng dụng C/C++ WebAssembly bằng thông tin gỡ lỗi DWARF.

Cách kiểm tra WebAssembly.Memory của một đối tượng:

1. Mở Công cụ cho nhà phát triển trên trang minh hoạ này.
2. Trong bảng điều khiển Sources (Nguồn), hãy mở demo-cpp.cc và đặt điểm ngắt trong hàm main() ở dòng 15: x[i] = n - i - 1;.
3. Hãy tải lại trang để chạy ứng dụng. Trình gỡ lỗi tạm dừng tại điểm ngắt.
4. Trong ngăn Debugger (Trình gỡ lỗi), hãy mở rộng Scope (Phạm vi) > Địa phương.

5. Nhấp vào biểu tượng bên cạnh mảng x: int[10].

   Hoặc nhấp chuột phải vào mảng rồi chọn Reveal in Memory Inspector panel (Hiển thị trong bảng điều khiển Trình kiểm tra bộ nhớ).

Để dừng đánh dấu bộ nhớ đối tượng, trong bảng điều khiển Memory Inspector (Trình kiểm tra bộ nhớ), hãy di chuột qua huy hiệu đối tượng rồi nhấp vào nút x.

Để tìm hiểu thêm, hãy xem:

• Mở rộng Trình kiểm tra bộ nhớ để gỡ lỗi C/C++
• Gỡ lỗi WebAssembly bằng các công cụ hiện đại.