Gỡ lỗi C/C++ WebAssembly

Sofia Emelianova

WebAssembly cung cấp cách chạy, chẳng hạn như mã C/C++ trên web với tốc độ gần với tốc độ gốc và cùng với JavaScript. Tài liệu này chỉ ra cách thiết lập và sử dụng Công cụ của Chrome cho nhà phát triển để gỡ lỗi hiệu quả hơn những ứng dụng như vậy.

Sau khi thiết lập Công cụ cho nhà phát triển, bạn có thể:

• Kiểm tra mã gốc của bạn trong phần Nguồn > Người chỉnh sửa.
• Tạm dừng thực thi với các điểm ngắt dòng mã và duyệt qua mã nguồn C/C++ ban đầu của bạn chứ không phải tệp nhị phân .wasm đã biên dịch.

Trong thời gian tạm dừng, bạn có thể:

• Di chuột qua các biến trong tệp nguồn ban đầu và xem giá trị của các biến đó.
• Hiểu tên hàm trong Ngăn xếp lệnh gọi và các biến trong Phạm vi.
• Xuất các thuộc tính được lồng sâu và đối tượng phức tạp vào Bảng điều khiển.
• Kiểm tra bộ nhớ của đối tượng bằng Trình kiểm tra bộ nhớ.

Thiết lập

Cách bật tính năng gỡ lỗi WebAssembly C/C++ trong Công cụ cho nhà phát triển:

1. Biên dịch ứng dụng bằng thông tin gỡ lỗi DWARF được đưa vào. Chạy trình biên dịch Emscripten mới nhất và truyền cho trình biên dịch đó cờ -g. Ví dụ:

   emcc -g source.cc -o app.html
   

   Để biết thêm thông tin, hãy xem bài viết Xây dựng dự án bằng thông tin gỡ lỗi.

2. Cài đặt tiện ích Hỗ trợ C/C++ cho Công cụ cho nhà phát triển (DWARF) của Chrome.

Gỡ lỗi

Khi thiết lập Công cụ cho nhà phát triển, hãy gỡ lỗi mã của bạn:

1. Mở Công cụ cho nhà phát triển để kiểm tra trang web của bạn. Đối với hướng dẫn này, bạn có thể thử trên trang minh hoạ này. Trang được biên dịch với cờ -g bắt buộc.
2. (Không bắt buộc) Nhóm các tệp bạn đã tạo để điều hướng dễ dàng hơn. Trong Sources (Nguồn), hãy chọn > Trang > > Nhóm theo trường hợp Đã tạo/Đã triển khai .
3. Chọn tệp nguồn ban đầu trong cây tệp. Trong trường hợp này là mandelbrot.cc.

4. Để đặt điểm ngắt dòng mã, hãy nhấp vào số dòng trong cột ở bên trái của Trình chỉnh sửa, ví dụ: trên dòng 38.

   

5. Chạy lại mã. Quá trình thực thi sẽ tạm dừng trước dòng có điểm ngắt.

Trong khi tạm dừng, hãy thử các cách sau:

• Trong mục Nguồn > Người chỉnh sửa, hãy di chuột qua một biến để xem giá trị của biến đó trong phần chú thích.

• Trong mục Nguồn > Ngăn xếp lệnh gọi, xem tên hàm như có trong nguồn.

• Trong mục Nguồn > Phạm vi, xem biến cục bộ và biến toàn cục, loại và giá trị của biến.

• Trong Bảng điều khiển, các biến và đối tượng đầu ra khó di chuyển trong phần Phạm vi:

  • Biến được lồng sâu, ví dụ: các mục được lập chỉ mục trong các mảng lớn.
  • Đối tượng phức tạp, bao gồm cả những đối tượng bạn có thể truy cập bằng con trỏ (->). Mở rộng các lớp đó để kiểm tra.

• Trong mục Nguồn > Scope (Phạm vi), hãy nhấp vào biểu tượng để mở Memory Inspector (Trình kiểm tra bộ nhớ) rồi kiểm tra các byte thô của bộ nhớ đối tượng. Để biết thêm thông tin, hãy xem bài viết Kiểm tra bộ nhớ WebAssembly.

Hiệu suất của hồ sơ

Khi Công cụ cho nhà phát triển được thiết lập và mở, mã mà Chrome chạy không được tối ưu hoá. Trình đơn này được giảm dần để mang đến cho bạn tr���i nghiệm gỡ lỗi tốt hơn.

Trong trường hợp này, bạn không thể dựa vào console.time() và performance.now() trong mã để phân tích hiệu suất. Thay vào đó, hãy sử dụng bảng điều khiển Hiệu suất để phân tích tài nguyên.

Ngoài ra, bạn có thể chạy mã lập hồ sơ mà không cần mở Công cụ cho nhà phát triển, sau đó mở mã đó để kiểm tra thông báo trong Bảng điều khiển.

Phân tách thông tin gỡ lỗi

Để tăng tốc độ tải nhưng vẫn có trải nghiệm gỡ lỗi tốt hơn, bạn có thể chia thông tin gỡ lỗi thành một tệp .wasm riêng. Để biết thêm thông tin, hãy xem bài viết Gỡ lỗi webAssembly nhanh hơn.

Bạn có thể giữ tệp này trên máy hoặc lưu trữ trên một máy chủ riêng. Để thực hiện việc này bằng Emscripten, hãy truyền cờ -gseparate-dwarf=<filename> và chỉ định đường dẫn đến tệp:

emcc -g source.cc -o app.html \
     -gseparate-dwarf=temp.debug.wasm \
     -s SEPARATE_DWARF_URL=[file://local/path/to/temp.debug.wasm] | [URL]

Xây dựng và gỡ lỗi trên nhiều máy

Nếu tạo bản dựng trên một máy có hệ điều hành (vùng chứa, máy ảo hoặc máy chủ từ xa) khác với hệ điều hành trên máy mà bạn chạy Chrome, thì bạn có thể cần phải liên kết các đường dẫn tệp gỡ lỗi theo cách thủ công.

Ví dụ: nếu dự án của bạn nằm cục bộ tại C:\src\project nhưng được tạo trong một vùng chứa Docker có đường dẫn /mnt/c/src/project, hãy làm như sau:

1. Truy cập chrome://extensions/, tìm tiện ích Hỗ trợ công cụ cho nhà phát triển C/C++ (DWARF) rồi nhấp vào Chi tiết > Tuỳ chọn tiện ích.
2. Chỉ định đường dẫn tệp cũ và đường dẫn tệp mới.

Tìm hiểu thêm

Hãy xem blog kỹ thuật của Công cụ của Chrome cho nhà phát triển để biết thêm thông tin về cách gỡ lỗi WebAssembly:

• Gỡ lỗi WebAssembly bằng các công cụ hiện đại
• Gỡ lỗi WebAssembly nhanh hơn
• Giới thiệu Trình kiểm tra bộ nhớ
• Mở rộng Trình kiểm tra bộ nhớ để gỡ lỗi C/C++