Gỡ lỗi C/C++ WebAssembly

Sofia Emelianova

WebAssembly cung cấp một cách để chạy, ví dụ: mã C/C++ trên web ở tốc độ gần như 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 trong Sources (Nguồn) > Editor (Trình 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 đó.
• Tìm hiểu tên hàm trong Ngăn xếp lệnh gọi và biến trong Phạm vi.
• Xuất các thuộc tính lồng sâu và đối tượng phức tạp vào Console.
• Kiểm tra bộ nhớ đố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 của bạn với thông tin gỡ lỗi DWARF. Chạy trình biên dịch Emscripten mới nhất và truyền cờ -g cho trình biên dịch đó. Ví dụ:

   emcc -g source.cc -o app.html
   

   Để biết thêm thông tin, hãy xem phần Tạo dự án có 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 Nguồn, hãy đánh dấu vào > Trang > > Nhóm theo Tác giả/Đã 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 Sources (Nguồn) > Editor (Trình chỉnh sửa), hãy di chuột qua một biến để xem giá trị của biến đó trong chú giải công cụ.

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

• Trong Sources (Nguồn) > Scope (Phạm vi), hãy xem các biến cục bộ và biến toàn cục, loại và giá trị của các 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:

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

• Trong Sources (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 phần Kiểm tra bộ nhớ WebAssembly.

Phân tích hiệu suất

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ã phân tích tài nguyên mà không cần mở DevTools, sau đó mở DevTools để kiểm tra các thông báo trong Console.

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 với 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 khác (vùng chứa, máy ảo hoặc máy chủ từ xa) so với hệ điều hành trên máy chạy Chrome, thì bạn có thể cần phải ánh xạ 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:\src\project cục bộ nhưng được tạo trong vùng chứa Docker có đường dẫn /mnt/c/src/project, hãy làm như sau:

1. Truy cập vào 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à 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 về Trình kiểm tra bộ nhớ
• Mở rộng Trình kiểm tra bộ nhớ để gỡ lỗi C/C++