Thông tin khái quát
Cho đến gần đây, tính năng gỡ lỗi WebAssembly duy nhất mà Công cụ của Chrome cho nhà phát triển hỗ trợ là xem dấu vết ngăn xếp WebAssembly thô và chuyển qua từng lệnh riêng lẻ ở định dạng văn bản WebAssembly đã được tháo rời.
Mặc dù điều này hoạt động với bất kỳ mô-đun WebAssembly nào và giúp phần nào gỡ lỗi các chức năng nhỏ, tách biệt, nhưng nó không thực sự thiết thực với các ứng dụng lớn hơn, nơi việc ánh xạ giữa mã được tách rời và các nguồn của bạn ít rõ ràng hơn.
Giải pháp tạm thời
Để giải quyết vấn đề này, Emscripten và Công cụ cho nhà phát triển đã tạm thời điều chỉnh bản đồ nguồn thành WebAssembly. Các mối liên kết được phép này giữa độ lệch nhị phân trong mô-đun được biên dịch đến vị trí gốc trong tệp nguồn.
Tuy nhiên, bản đồ nguồn được thiết kế cho các định dạng văn bản có mối liên kết rõ ràng với các khái niệm và giá trị JavaScript, chứ không phải cho các định dạng tệp nhị phân như WebAssembly với các ngôn ngữ nguồn, hệ thống loại và bộ nhớ tuyến tính tuỳ ý. Điều này khiến quá trình tích hợp trở nên khó khăn, bị giới hạn và không được hỗ trợ rộng rãi bên ngoài Emscripten.
Nhập DWARF
Mặt khác, nhiều ngôn ngữ gốc đã có một định dạng gỡ lỗi phổ biến, DWARF, cung cấp tất cả thông tin cần thiết để trình gỡ lỗi phân giải vị trí, tên biến, bố cục loại và nhiều thông tin khác.
Mặc dù vẫn còn một số tính năng dành riêng cho WebAssembly cần được thêm vào để có khả năng tương thích đầy đủ, nhưng các trình biên dịch như Clang và Rust đã hỗ trợ việc phát hành thông tin DWARF trong các mô-đun WebAssembly, cho phép nhóm DevTools bắt đầu sử dụng trực tiếp thông tin đó trong DevTools.
Bước đầu tiên, Công cụ cho nhà phát triển hiện hỗ trợ ánh xạ nguồn gốc bằng cách sử dụng thông tin này. Vì vậy, bạn có thể bắt đầu gỡ lỗi các mô-đun Wasm do bất kỳ trình biên dịch nào trong số này tạo ra mà không cần dùng đến định dạng bị tách rời hay phải sử dụng bất kỳ tập lệnh tuỳ chỉnh nào.
Thay vào đó, bạn chỉ cần yêu cầu trình biên dịch đưa thông tin gỡ lỗi vào như bình thường trên các nền tảng khác. Ví dụ: trong Clang và Emscripten, bạn có thể thực hiện việc này bằng cách truyền cờ -g trong quá trình biên dịch:
clang -g …sources… -target wasm32 -o out.wasm
emcc -g …sources… -o out.js
Bạn có thể sử dụng cùng một cờ -g trong Rust:
rustc -g source.rs --target wasm32-unknown-unknown -o out.wasm
Hoặc nếu bạn đang sử dụng Cargo, thông tin gỡ lỗi sẽ được đưa vào theo mặc định:
cargo build --target wasm32-unknown-unknown
Tính năng tích hợp Công cụ cho nhà phát triển mới này với DWARF đã bao gồm dịch vụ hỗ trợ bước qua mã, đặt điểm ngắt và phân giải dấu vết ngăn xếp bằng ngôn ngữ nguồn của bạn.
Tương lai
Tuy nhiên, vẫn còn khá nhiều việc cần làm.
Ví dụ: về mặt công cụ, Emscripten (Binaryen) và wasm-pack (wasm-bindgen) chưa hỗ trợ cập nhật thông tin DWARF cho các phép biến đổi mà chúng thực hiện. Hiện tại, họ sẽ không được hưởng lợi từ việc tích hợp này.
Về phía Chrome DevTools, chúng tôi sẽ phát triển tính năng tích hợp này theo thời gian để đảm bảo trải nghiệm gỡ lỗi liền mạch, bao gồm:
- Giải quyết tên biến
- Các loại in đẹp
- Đánh giá biểu thức trong ngôn ngữ nguồn
- …và nhiều tính năng khác!
Hãy chú ý theo dõi thông tin cập nhật trong tương lai nhé!
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 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, kiểm thử các API nền tảng web tiên tiến và tìm ra các vấn đề trên trang web của bạn trước khi người dùng 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 để thảo luận về các tính năng và thay đổi mới trong bài đăng, 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 đề xuất hoặc phản hồi cho chúng tôi qua crbug.com.
- Báo cáo sự cố Công cụ cho nhà phát triển bằng cách sử dụng Tuỳ chọn khác
> Trợ giúp > Báo cáo vấn đề về Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển. - Gửi tweet đến @ChromeDevTools.
- Hãy để lại bình luận trên các video YouTube về tính năng mới trong DevTools hoặc các video YouTube về mẹo sử dụng DevTools.