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 với tốc độ gốc và cùng với JavaScript. Tài liệu này trình bày 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 các ứng dụng như vậy hiệu quả hơn.

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 > Trình chỉnh sửa.
• Tạm dừng quá trình thực thi bằng điểm ngắt dòng mã và bước qua mã nguồn C/C++ gốc của bạn, chứ không phải duyệt qua tệp nhị phân .wasm được biên dịch.

Ngoài ra, trong khi tạm dừng, bạn có thể:

• Di chuột qua các biến trong tệp nguồn ban đầu rồi xem giá trị của chúng.
• 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 lồng ghép sâu và đối tượng phức tạp ra Bảng điều khiển.
• 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 C/C++ WebAssembly 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 đi kèm. Chạy trình biên dịch Emscripten mới nhất và truyền cờ -g vào đó. Ví dụ:

   emcc -g source.cc -o app.html
   

   Để biết thêm thông tin, hãy xem phần Xây dựng dự án có thông tin gỡ lỗi.

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

Gỡ lỗi

Sau 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ể làm thử trên trang minh hoạ này (trang này được biên dịch với cờ -g bắt buộc).
2. Nếu muốn, hãy nhóm các tệp mà bạn đã tạo để thao tác dễ dàng hơn. Trong phần Nguồn, hãy xem > Trang > > Nhóm theo tác giả/triển khai .
3. Chọn tệp nguồn ban đầu của bạn trong cây tệp. Trong trường hợp này là mandelbrot.cc.

4. Để thiết lập điểm ngắt dòng mã, hãy nhấp vào số dòng trong cột ở bên trái 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.

Khi đang tạm dừng, hãy thử những cách sau:

• Trong Nguồn > 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 tên hàm như nằm trong nguồn.

• Trong mục Nguồn > 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ó điều hướng đến trong Phạm vi:

  • Biến được lồng sâu, chẳng hạn như 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 bạn có thể truy cập bằng con trỏ (->). Hãy mở rộng các đối tượng đó để kiểm tra.

• Trong phần 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.

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

Sau khi thiết lập và mở Công cụ cho nhà phát triển, mã mà Chrome chạy không được tối ưu hoá. Trang 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 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.

Tách riêng 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 phần 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 biệt. Để thực hiện việc này bằng Emscripten, hãy truyền cờ -gseparate-dwarf=<filename> rồi 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]

Tạo và gỡ lỗi trên nhiều máy

Nếu tạo 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ể 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 tại C:\src\project cục bộ 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 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 về kỹ thuật 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++