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, chỉ có một lần gỡ lỗi WebAssembly mà Công cụ cho nhà phát triển Chrome hỗ trợ đang xem dấu vết ngăn xếp WebAssembly thô và thực hiện các hướng dẫn riêng lẻ trong định dạng văn bản WebAssembly đã phân tách.

Ảnh chụp màn hình tính năng hỗ trợ gỡ lỗi WebAssembly bị hạn chế trước đây 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 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.

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

Tuy nhiên, bản đồ nguồn được thiết kế cho những định dạng văn bản có sự ánh xạ rõ ràng đến các khái niệm và giá trị JavaScript, chứ không phải 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 việc tích hợp trở nên khó khăn, hạn chế 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ó định dạng gỡ lỗi chung, DWARF, cung cấp tất cả thông tin cần thiết cho trình gỡ lỗi để phân giải vị trí, tên biến, bố cục kiểu, v.v.

Mặc dù vẫn cần thêm một số tính năng dành riêng cho WebAssembly để 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, giúp nhóm Công cụ cho nhà phát triển bắt đầu sử dụng ngay 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 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 thê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 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ì 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.

Ảnh chụp màn hình gỡ lỗi mới hỗ trợ DWARF.

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.

Ngoài ra, 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:

  • Giải quyết tên biến
  • Kiểu in đẹp
  • Đánh giá biểu thức trong ngôn ngữ nguồn
  • ...và nhiều điểm cải tiến khác!

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 việc sử dụng Chrome Canary, Nhà phát triển hoặc Beta làm trình duyệt phát triển mặc định của bạn. 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 cứ 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   Thêm > 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.
  • Tweet tại @ChromeDevTools.
  • Để lại bình luận về Tính năng mới của chúng tôi trong Video trên YouTube hoặc Mẹo trong Công cụ cho nhà phát triển Video trên YouTube.