Cải thiện tính năng gỡ lỗi WebAssembly trong Công cụ của Chrome cho nhà phát triển

Ingvar Stepanyan
Ingvar Stepanyan

Thông tin khái quát

Cho đến gần đây, cách gỡ lỗi WebAssembly duy nhất mà Công cụ của Chrome hỗ trợ là xem dấu vết ngăn xếp WebAssembly thô và thực hiện theo các hướng dẫn riêng lẻ ở định dạng văn bản WebAssembly bị tách rời.

Ảnh chụp màn hình về tính năng hỗ trợ gỡ lỗi WebAssembly bị hạn chế trước đó trong Công cụ của Chrome cho nhà phát triển.

Mặc dù cách này hoạt động với mọi mô-đun WebAssembly và giúp gỡ lỗi các hàm nhỏ, tách biệt, nhưng điều này không thực sự hiệu quả đối với các ứng dụng lớn hơn khi việc ánh xạ giữa mã đã tách rời và 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 định dạng bản đồ nguồn hiện có thành WebAssembly. Điều này cho phép ánh xạ giữa các độ lệch nhị phân trong mô-đun đã biên dịch đến các vị trí gốc trong tệp nguồn.

Ảnh chụp màn hình của quá trình gỡ lỗi dựa trên bản đồ nguồn.

Tuy nhiên, bản đồ nguồn được thiết kế cho các định dạng văn bản có ánh xạ rõ ràng tới các khái niệm và giá trị JavaScript, chứ không dành cho các định dạng nhị phân như WebAssembly với các ngôn ngữ nguồn tuỳ ý, hệ thống kiểu và bộ nhớ tuyến tính. Điều này khiến quá trình tích hợp trở nên khó khăn, bị hạn chế và không được hỗ trợ rộng rãi bên ngoài Emscripten.

Chuyển sang DWARF

Mặt khác, nhiều ngôn ngữ gốc đã có một định dạng gỡ lỗi phổ biến là DWARF. Định dạng này 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ợ phát thông tin DWARF trong các mô-đun WebAssembly, cho phép nhóm Công cụ cho nhà phát triển bắt đầu sử dụng trực tiếp trong Công cụ cho nhà phát triển.

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 sử dụng định dạng đã tách rời hoặc phải sử dụng bất kỳ tập lệnh tùy chỉnh nào.

Thay vào đó, bạn chỉ cần yêu cầu trình biên dịch bao gồm thông tin gỡ lỗi như bạn thường làm 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 một 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 bao gồm theo mặc định:

  cargo build --target wasm32-unknown-unknown

Việc tích hợp Công cụ cho nhà phát triển mới này với DWARF đã bao gồm 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.

Ảnh chụp màn hình gỡ lỗi mới dựa trên DWARF.

Tương lai

Tuy nhiên, bạn vẫn còn nhiều việc phải 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 về 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à về phía Công cụ của Chrome cho nhà phát triển, chúng tôi sẽ phát triển việc tích hợp nhiều hơn theo thời gian để đảm bảo trải nghiệm gỡ lỗi liền mạch, bao gồm:

  • Phân giải tên biến
  • Các loại tạo bản in đẹp
  • Đánh giá biểu thức bằng ngôn ngữ nguồn
  • ...và hơn thế nữa!

Hãy chú ý theo dõi thông tin cập nhật trong tương lai nhé!

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   Thêm   > 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.