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

Jecelyn Yeen
Jecelyn Yeen
Twitter GitHub Trang chủ
Sofia Emelianova
Sofia Emelianova
GitHub

Sử dụng Memory Inspector (Trình kiểm tra bộ nhớ) mới để 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++.

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 Thêm > Công cụ khác > Trình kiểm tra bộ nhớ. Trình đơn của công cụ kiểm tra bộ nhớ

Mở trong khi 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 phần 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 thuộc tính buffer, hoặc
    • Từ 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 Hiển thị trong bảng điều khiển Trình kiểm tra bộ nhớ.

    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à một TypedArray. Để kiểm tra nội dung đó, 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 cho TypedArray hoặc DataView).
  2. Một thẻ mới sẽ mở trong 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. Thẻ mới trong Trình kiểm tra bộ nhớ

Trình kiểm tra bộ nhớ

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. Phương thức nhập địa chỉ hiển thị đị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 sẽ tự động cập nhật khi bước. Trong trường hợp không, nút refresh sẽ cung cấp cho bạn tuỳ chọn làm mới bộ nhớ và cập nhật nội dung trong đó.

Vùng đệm bộ nhớ

Vùng đệm bộ nhớ

  1. Ở bên trái, address sẽ xuất hiện ở định dạng hex.
  2. Memory (bộ nhớ) cũng được hiển thị ở định dạng hex, mỗi byte được phân tách bằng một dấu cách. Byte đang được chọn sẽ được đánh dấu. 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. Bản trình bày ASCII của bộ nhớ sẽ xuất hiện ở bên phải. Phần được đánh dấu sẽ hiển thị giá trị tương ứng với các bit được 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ị

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ở phần cài đặt. Mở chế độ cài đặt để chọn loại giá trị họ muốn xem theo mặc định trong công cụ kiểm tra. nút trên thanh công cụ
  2. Khu vực chính hiển thị tất cả diễn giải giá trị theo chế độ cài đặt. Theo mặc định, tất cả thẻ sẽ hiển thị.
  3. Mã hoá có thể nhấp vào được. Bạn có thể chuyển đổi giữa tháng 12, hex, oct cho số nguyên và sci, dec cho số thực.Chuyển đổi mã hoá

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ỉ. nhập địa chỉ
  3. Quan sát bản trình bày ASCII và diễn giải giá trị. Hiện tại, tất cả giá trị đều trống.
  4. Hãy lưu ý 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 nút đó để chuyển đến địa chỉ đó. Các nút này sẽ chuyển sang màu xám và không thể nhấp vào được nếu địa chỉ không hợp lệ. Nút Chuyển đến địa chỉ
  5. Nhấp vào Tiếp tục thực thi tập lệnh để duyệt qua mã. Tiếp tục thực thi tập lệnh
  6. Lưu ý rằng tính năng biểu diễn ASCII hiện đã được cập nhật. Tất cả các diễn giải giá trị cũng được cập nhật. Tất cả diễn giải giá trị đã được cập nhật
  7. Hãy tuỳ chỉnh Công cụ 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 chọn Float 32-bit và Float 64-bit.chế độ cài đặt để tuỳ chỉnh công cụ kiểm tra giá trị
  8. Hãy thay đổi phương thức mã hoá từ dec thành sci. Hãy lưu ý rằng cách biểu diễn giá trị được cập nhật tương ứng. Thay đổi phương thức mã hoá.
  9. Thử di chuyển trong vùng đệm bộ nhớ bằng bàn phím hoặc 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++.

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

  • Sử dụng Chrome 107 trở lên. Vui lòng 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ụ cho nhà phát triển C/C++ (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 Sources (Nguồn), hãy mở demo-cpp.cc rồi đặt mộ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 sẽ 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) > Local (Cục bộ).

  5. Nhấp vào biểu tượng Hiển thị trong Trình kiểm tra bộ nhớ. 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 Hiển thị trong bảng điều khiển Trình kiểm tra bộ nhớ.

Mảng x được mở trong 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.

Dừng đánh dấu bộ nhớ đối tượng.

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