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