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
- Mở Công cụ cho nhà phát triển.
- 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
- Mở một trang bằng JavaScript
ArrayBuffer
. Chúng ta sẽ sử dụng trang minh hoạ này. - Mở Công cụ cho nhà phát triển.
- Mở tệp demo-js.js trong bảng điều khiển Sources (Nguồn), đặt điểm ngắt ở dòng 18.
- Hãy làm mới trang.
- Mở rộng mục Phạm vi trên ngăn Trình gỡ lỗi bên phải.
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ớ).
- Từ biểu tượng. Nhấp vào biểu tượng bên cạnh thuộc tính
Kiểm tra nhiều đối tượng
- 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ínhb2
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 choTypedArray
hoặcDataView
). - 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
- 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
. - 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.
- Các nút ở bên trái cho phép điều hướng tiến/lùi.
- 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ớ
- Ở bên trái, address (địa chỉ) hiển thị ở định dạng hex.
- 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).
- 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ị
- 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.
- 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ị.
- 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ớ.
- Hãy làm theo các bước sau để bắt đầu gỡ lỗi.
- Thay đổi địa chỉ thành
0x00000027
trong phần nhập địa chỉ. - 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.
- 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ệ. - Nhấp vào Tiếp tục thực thi tập lệnh để xem từng bước trong mã.
- 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.
- 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).
- Hãy thay đổi phương thức mã hoá từ
dec
thànhsci
. Lưu ý rằng nội dung trình bày giá trị sẽ được cập nhật cho phù hợp. - 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:
- Mở Công cụ cho nhà phát triển trên trang minh hoạ này.
- Trong bảng điều khiển Sources (Nguồn), hãy mở
demo-cpp.cc
và đặt điểm ngắt trong hàmmain()
tại dòng 15:x[i] = n - i - 1;
. - 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.
- Trong ngăn Trình gỡ lỗi, hãy mở rộng Phạm vi > Cục bộ.
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ớ).
Để 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: