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

Jecelyn Yeen

Sofia Emelianova

Lưu ý: Bảng điều khiển Trình kiểm tra bộ nhớ có trong Chrome 91. Bạn có thể kiểm tra phiên bản của mình tại chrome://version/.

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 nhanh chóng điều hướng các mảng lớn. Bạn có thể xem các giá trị ASCII của nội dung bộ nhớ ngay bên cạnh các byte và chọn các kiểu endian khác nhau. Sử dụng Trình kiểm tra bộ nhớ trong khi 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ở Công cụ kiểm tra bộ nhớ.

Mở trong trình đơn

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

Mở trong quá trình gỡ lỗi

1. Mở một trang bằng JavaScript ArrayBuffer. Chúng ta 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 mục Phạm vi trên ngăn 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 thuộc tính 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 (Hiển thị 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à TypedArray. Để kiểm tra điều đó, hãy nhấp chuột phải vào thuộc tính b2 rồi chọn Reveal in Memory Inspector panel (Hiện trong bảng điều khiển Trình kiểm tra bộ nhớ) (Chưa có biểu tượng cho TypedArray hoặc DataView).
2. Một thẻ mới sẽ mở ra trong Công cụ 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. address input (phần nhập địa chỉ) hiển thị địa chỉ byte hiện tại ở định dạng thập lục phân. 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. Bộ nhớ đệm 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 để di chuyển.
3. Các nút ở bên trái cho phép điều hướng tiến/lùi.
4. Theo mặc định, vùng đệm được tự động cập nhật khi thực hiện bước. Trong trường hợp không có, nút refresh (làm mới) sẽ cho phép bạn làm mới bộ nhớ và cập nhật nội dung của bộ nhớ đó.

Vùng đệm bộ nhớ

1. Ở bên trái, address (địa chỉ) hiển thị ở định dạng hex.
2. 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 đang được chọn sẽ được làm nổi bật. Bạn có thể nhấp vào byte hoặc di chuyển bằng bàn phím (trái, phải, lên, xuống).
3. Biểu diễn ASCII của bộ nhớ hiển thị ở bên phải. Một điểm nổi bật cho thấy 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 di chuyển bằng bàn phím (trái, phải, lên, xuống).

Trình kiểm tra giá trị

1. Thanh công cụ trên cùng có một nút để chuyển đổi giữa big và little endian và để mở chế độ cài đặt. Mở chế độ cài đặt để chọn loại giá trị mà họ muốn xem theo mặc định trong trình kiểm tra.
2. Khu vực chính cho thấy 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. Bạn có thể nhấp vào mã hoá. Bạn có thể chuyển đổi giữa dec, hex, oct cho số nguyên và sci, dec cho số thực.

Kiểm tra bộ nhớ

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

1. Hãy làm theo các bước sau để bắt đầu gỡ lỗi.
2. Thay đổi địa chỉ thành 0x00000027 trong phần nhập địa chỉ.
3. Quan sát biểu diễn ASCII và giải thích giá trị. Tất cả các giá trị đều trống tại thời điểm này.
4. Hãy chú ý đến nút Jump to address (Chuyển đến đị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 sẽ chuyển sang màu xám và không thể nhấp 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 để xem từng bước trong mã.
6. Lưu ý rằng biểu diễn ASCII hiện đã được cập nhật. Tất cả nội dung 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 (cài đặt) và chỉ đánh dấu vào Float 32-bit (Số thực 32 bit) và Float 64-bit (Số thực 64 bit).
8. Hãy thay đổi phương thức mã hoá từ dec thành sci. Lưu ý rằng nội dung trình bày giá trị sẽ được cập nhật cho phù hợp.
9. Hãy 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 sự 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 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 tận dụng 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ông cụ phát triển C/C++ (DWARF). Đây là trình bổ trợ để gỡ lỗi các ứng dụng WebAssembly C/C++ 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() tại dòng 15: x[i] = n - i - 1;.
3. 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 Trình gỡ lỗi, hãy mở rộng Phạm vi > Cục bộ.

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

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

Lưu ý: Kể từ Chrome phiên bản 107, Trình kiểm tra bộ nhớ sẽ làm nổi bật tất cả các byte của đối tượng bộ nhớ C/C++. Điều này giúp bạn phân biệt các vùng nhớ này với bộ nhớ xung quanh.

Để ngừng làm nổi bật bộ nhớ đối tượng, trong bảng điều khiển 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.