Bài viết này giới thiệu Trình kiểm tra bộ nhớ đã có trong Chrome 91. API này cho phép bạn kiểm tra ArrayBuffer, TypedArray, DataView và Wasm Memory của bạn.
Giới thiệu
Bạn đã bao giờ muốn hiểu rõ dữ liệu trong ArrayBuffer của mình chưa? Trước khi có Trình kiểm tra bộ nhớ, Công cụ cho nhà phát triển chỉ cho phép cung cấp thông tin chi tiết có giới hạn về ArrayBuffers. Hoạt động kiểm tra qua chế độ xem Scope (Phạm vi) trong một phiên gỡ lỗi chỉ xem được danh sách các giá trị đơn lẻ trong vùng đệm mảng. Điều này gây khó khăn cho việc hiểu toàn bộ dữ liệu. Ví dụ: chế độ xem Phạm vi hiển thị vùng đệm dưới dạng dải ô có thể mở rộng trong ví dụ dưới đây:
Việc điều hướng đến một phạm vi nhất định trong vùng đệm là một vấn đề, đòi hỏi người dùng phải cuộn xuống để cuối cùng đến được chỉ mục đó. Nhưng ngay cả khi việc di chuyển đến một vị trí có thể dễ dàng, việc thực sự inspecting các giá trị này lại rất cồng kềnh: rất khó để cho biết ý nghĩa của những con số này. Đặc biệt, điều gì sẽ xảy ra nếu chúng không nên được hiểu là các byte đơn, mà ví dụ: là Số nguyên 32 bit?
Kiểm tra các giá trị bằng Trình kiểm tra bộ nhớ
Với Chrome 91, chúng tôi sẽ giới thiệu Trình kiểm tra bộ nhớ, một công cụ kiểm tra vùng đệm mảng. Trước đây, có thể bạn đã từng thấy các công cụ kiểm tra bộ nhớ để xem dữ liệu nhị phân. Dữ liệu này hiển thị nội dung nhị phân trong lưới cùng với địa chỉ của chúng, đồng thời cung cấp nhiều cách diễn giải các giá trị cơ bản. Đây là nội dung mà Trình kiểm tra bộ nhớ mang đến cho bạn. Với Trình kiểm tra bộ nhớ, giờ đây, bạn có thể xem nội dung, điều hướng và chọn các kiểu được dùng để diễn giải các giá trị có sẵn. Mã này hiển thị các giá trị ASCII trực tiếp bên cạnh các byte và cho phép người dùng chọn độ cuối khác nhau. Xem cách hoạt động của Trình kiểm tra bộ nhớ dưới đây:
Bạn muốn dùng thử? Để tìm hiểu cách mở Trình kiểm tra bộ nhớ và xem vùng đệm mảng (hoặc TypedArray, DataView hoặc Wasm Memory) cũng như biết thêm thông tin về cách sử dụng Trình kiểm tra bộ nhớ, hãy chuyển đến tài liệu của chúng tôi về Trình kiểm tra bộ nhớ. Hãy thử dùng các ví dụ về đồ chơi này (dành cho JS, Wasm và C++).
Thiết kế Trình kiểm tra bộ nhớ
Trong phần này, chúng ta sẽ tìm hiểu cách thiết kế Trình kiểm tra bộ nhớ bằng cách sử dụng Thành phần web. Sau đó, chúng ta sẽ chỉ ra một trong những mục tiêu thiết kế của mình cũng như cách triển khai chúng. Nếu bạn tò mò và muốn tìm hiểu thêm, hãy xem tài liệu thiết kế của chúng tôi về Trình kiểm tra bộ nhớ.
Bạn có thể đã xem bài đăng trên blog của chúng tôi về Di chuyển sang thành phần web, trong đó Jack đã xuất bản hướng dẫn nội bộ về cách xây dựng thành phần giao diện người dùng bằng Thành phần web. Quá trình di chuyển sang Cấu phần web trùng với công việc của chúng tôi trong Trình kiểm tra bộ nhớ. Do đó, chúng tôi quyết định dùng thử hệ thống mới này. Dưới đây là sơ đồ cho thấy các thành phần mà chúng tôi đã xây dựng để tạo Trình kiểm tra bộ nhớ (lưu ý rằng trong nội bộ chúng tôi gọi công cụ này là Trình kiểm tra bộ nhớ tuyến tính):
Thành phần LinearMemoryInspector là thành phần mẹ kết hợp các thành phần phụ tạo nên tất cả phần tử trong Trình kiểm tra bộ nhớ. Về cơ bản, phương thức này sẽ lấy Uint8Array và address. Cứ mỗi lần thay đổi, hàm này sẽ truyền dữ liệu đến các phần tử con, kích hoạt quá trình kết xuất lại. Bản thân LinearMemoryInspector hiển thị 3 thành phần phụ:
LinearMemoryViewer(hiển thị các giá trị),LinearMemoryNavigator(cho phép điều hướng) vàLinearMemoryValueInterpreter(cho thấy nhiều cách diễn giải dữ liệu cơ bản).
Thành phần sau chính là thành phần mẹ, kết xuất ValueInterpreterDisplay (hiện các giá trị) và ValueInterpreterSettings (chọn loại cần xem trong màn hình).
Mỗi thành phần được thiết kế để chỉ đại diện cho một thành phần nhỏ của giao diện người dùng, sao cho có thể sử dụng lại các thành phần nếu cần. Bất cứ khi nào dữ liệu mới được đặt trên một thành phần, quá trình kết xuất lại được kích hoạt để cho thấy thay đổi được phản ánh trên dữ liệu được đặt trên thành phần đó. Dưới đây là ví dụ về một quy trình công việc có các thành phần, trong đó người dùng thay đổi địa chỉ trong thanh địa chỉ, kích hoạt quá trình cập nhật bằng cách đặt dữ liệu mới, trong trường hợp này là địa chỉ để xem:
LinearMemoryInspector tự thêm chính nó làm trình nghe trên LinearMemoryNavigator. Hàm addressChanged cần được kích hoạt khi một sự kiện address-changed. Ngay khi người dùng đang chỉnh sửa mục nhập địa chỉ, thao tác này sẽ gửi sự kiện nêu trên để gọi hàm addressChanged. Hàm này hiện lưu địa chỉ nội bộ và cập nhật các thành phần phụ bằng phương thức setter data(address, ..). Các thành phần phụ lưu địa chỉ nội bộ và kết xuất lại khung hiển thị của chúng, hiển thị nội dung tại địa chỉ cụ thể đó.
Mục tiêu thiết kế: làm cho hiệu suất và mức sử dụng bộ nhớ không phụ thuộc vào dung lượng bộ nhớ đệm
Một khía cạnh trong quá trình thiết kế Trình kiểm tra bộ nhớ mà chúng tôi quan tâm là hiệu suất của Trình kiểm tra bộ nhớ phải độc lập với dung lượng bộ nhớ đệm.
Như bạn đã thấy trong phần trước, thành phần LinearMemoryInspector lấy UInt8Array để kết xuất các giá trị. Đồng thời, chúng ta muốn đảm bảo rằng Trình kiểm tra bộ nhớ sẽ không cần giữ toàn bộ dữ liệu, vì Trình kiểm tra bộ nhớ chỉ hiển thị một phần của dữ liệu đó (ví dụ: Bộ nhớ Wasm có thể lớn tới 4 GB và chúng ta không muốn lưu trữ 4 GB trong Trình kiểm tra bộ nhớ).
Vì vậy, để đảm bảo tốc độ và mức tiêu thụ bộ nhớ của Trình kiểm tra bộ nhớ độc lập với vùng đệm thực tế mà chúng ta cho thấy, chúng ta chỉ để thành phần LinearMemoryInspector chỉ giữ một dải_ô con của vùng đệm ban đầu.
Để làm được điều này, trước tiên, LinearMemoryInspector cần nhận thêm hai đối số: memoryOffset và outerMemoryLength. memoryOffset cho biết độ lệch, tại đó Uint8Array đã truyền bắt đầu và cần thiết để kết xuất đúng địa chỉ dữ liệu. outerMemoryLength là độ dài của vùng đệm ban đầu và bạn phải hiểu được phạm vi mà chúng ta có thể hiển thị:
Với thông tin này, chúng ta có thể đảm bảo vẫn có thể hiển thị cùng một khung hiển thị như trước (nội dung xung quanh address) mà không thực sự có tất cả dữ liệu. Vậy thì bạn phải làm gì nếu địa chỉ khác được yêu cầu nằm trong một phạm vi khác? Trong trường hợp đó, LinearMemoryInspector kích hoạt RequestMemoryEvent. Thao tác này sẽ cập nhật phạm vi hiện tại được giữ lại; bạn có thể xem ví dụ dưới đây:
Trong ví dụ này, người dùng điều hướng trang bộ nhớ (Trình kiểm tra bộ nhớ đang sử dụng tính năng phân trang để hiển thị các phần dữ liệu), kích hoạt PageNavigationEvent và chính nó sẽ kích hoạt RequestMemoryEvent.
Sự kiện đó bắt đầu tìm nạp dải ô mới, sau đó dải ô này được truyền đến thành phần LinearMemoryInspector thông qua việc đặt dữ liệu. Do đó, chúng ta sẽ hiển thị dữ liệu mới được tìm nạp.
Ồ, bạn có biết không? Thậm chí bạn có thể kiểm tra bộ nhớ trong mã Wasm và C/C++
Trình kiểm tra bộ nhớ không chỉ có sẵn cho ArrayBuffers trong JavaScript, mà còn có thể được sử dụng để kiểm tra Bộ nhớ Wasm và bộ nhớ được trỏ đến bởi các tham chiếu/con trỏ C/C++ (sử dụng tiện ích DWARF của chúng tôi - hãy thử nếu bạn chưa làm vậy! Xem nội dung Gỡ lỗi cho WebAssembly bằng các công cụ hiện đại tại đây. Dưới đây là một vài thông tin nhỏ về Trình kiểm tra bộ nhớ trong thực tế dùng để gỡ lỗi gốc cho C++ trên web:
Kết luận
Bài viết này trình bày về Trình kiểm tra bộ nhớ và cho thấy thông tin sơ lược về thiết kế của công cụ này. Chúng tôi hy vọng Trình kiểm tra bộ nhớ sẽ giúp bạn hiểu được điều gì đang xảy ra trong ArrayBuffer :-). Nếu bạn có đề xuất cải thiện tính năng này, hãy cho chúng tôi biết và báo cáo lỗi!
Tải kênh xem trước xuống
Hãy cân nhắc sử dụng Chrome Canary, Dev hoặc Beta làm trình duyệt phát triển mặc định. Các kênh xem trước này cung cấp cho bạn quyền truy cập vào các tính năng mới nhất của Công cụ cho nhà phát triển, thử nghiệm API nền tảng web tiên tiến và tìm ra sự cố trên trang web của bạn trước khi người dùng của bạn làm điều đó!
Liên hệ với nhóm Công cụ của Chrome cho nhà phát triển
Sử dụng các lựa chọn sau đây để thảo luận về các tính năng mới và thay đổi trong bài đăng hoặc bất cứ vấn đề nào khác liên quan đến Công cụ cho nhà phát triển.
- Hãy gửi đề xuất hoặc phản hồi cho chúng tôi qua crbug.com.
- Báo cáo sự cố của Công cụ cho nhà phát triển bằng cách sử dụng phần Tuỳ chọn khác
> Trợ giúp > Báo cáo sự cố về Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển. - Tweet tại @ChromeDevTools.
- Hãy để lại bình luận về tính năng mới trong video trên YouTube của Công cụ cho nhà phát triển hoặc video trên YouTube.