Debugowanie WebAssembly w C/C++

Sofia Emelianova
Sofia Emelianova
GitHub

WebAssembly umożliwia uruchamianie w internecie kodu C/C++ z prawie natywną szybkością i obok kodu JavaScript. Z tego dokumentu dowiesz się, jak skonfigurować i korzystać z Narzędzi programistycznych Chrome, aby lepiej debugować takie aplikacje.

Po skonfigurowaniu Narzędzi deweloperskich możesz:

  • Sprawdź oryginalny kod w sekcji Źródła > Edytor.
  • Zatrzymaj wykonywanie za pomocą punktów przerwania w kodzie i przechodzić krok po kroku przez oryginalny kod źródłowy C/C++, a nie skompilowany plik binarny .wasm.

W trybie wstrzymania możesz:

  • Najedź kursorem na zmienne w pliku źródłowym, aby wyświetlić ich wartości.
  • Poznaj nazwy funkcji w zbiorze wywołań i zmiennych w zakresie.
  • Wyprowadzanie do Konsoli właściwości głęboko zagnieżdżonych i obiektów złożonych.
  • Sprawdzanie pamięci obiektu za pomocą narzędzia do inspekcji pamięci.

Skonfiguruj

Aby włączyć debugowanie WebAssembly w C/C++ w Narzędziach deweloperskich:

  1. Zkompiluj aplikację z uwzględnieniem informacji debugowania DWARF. Uruchom najnowszą wersję kompilatora Emscripten i przekaż mu flagę -g. Na przykład:

    emcc -g source.cc -o app.html

    Więcej informacji znajdziesz w artykule Tworzenie projektów z informacjami debugowania.

  2. Zainstaluj rozszerzenie do Chrome obsługujące C/C++ (DWARF).

Debugowanie

Po skonfigurowaniu Narzędzi deweloperskich debuguj kod:

  1. Otwórz Narzędzia deweloperskie, aby sprawdzić swoją witrynę. W tym samouczku możesz wypróbować tę funkcję na stronie demonstracyjnej, która została skompilowana z wymaganym flagą -g.
  2. Opcjonalnie możesz pogrupować utworzone pliki, aby ułatwić sobie poruszanie się po nich. W sekcji Źródła kliknij Menu z 3 kropkami. > Strona > Pole wyboru. > Grupuj według autora lub wdrożenia Funkcja eksperymentalna..
  3. Wybierz w drzewie plików oryginalny plik źródłowy. W tym przypadku mandelbrot.cc.

  4. Aby ustawić punkt przerwania kodu, kliknij numer wiersza w kolumnie po lewej stronie Edytora, np. w wierszu 38.

    Punkt przerwania kodu ustawiony na wierszu 38.

  5. Uruchom kod ponownie. Wykonanie zatrzymuje się przed wierszem z punktem przerwy.

Podczas pauzy:

  • W sekcji Źródła > Edytor najedź kursorem na zmienną, aby wyświetlić jej wartość w wyskakującym okienku.

Wartość zmiennej w okienku informacyjnym.

  • W sekcji Źródła > Stos wywołania możesz wyświetlić nazwy funkcji w postaci, w jakiej występują w źródle.

Główna funkcja w stosie wywołań.

  • W sekcji Źródła > Zakres możesz wyświetlać zmienne lokalne i globalne, ich typy oraz wartości.

Panel Zakres ze zmiennymi lokalnymi i ich wartościami.

  • W Konsoli zmienne i obiekty wyjściowe, które trudno znaleźć w zakresie:

    • Głęboko zagnieżdżone zmienne, np. posortowane elementy w wielkich tablicach.
    • złożone obiekty, w tym te, do których można uzyskać dostęp za pomocą wskaźników (->). Aby je sprawdzić, rozwiń je.

Zagnieżdżona zmienna i kompleksowy obiekt rozwinięty w Konsoli

  • W sekcji Źródła > Zakres kliknij ikonę Pamięć., aby otworzyć kontroler pamięci i sprawdzać nieprzetworzone bajty pamięci obiektu. Więcej informacji znajdziesz w artykule Sprawdzanie pamięci w WebAssembly.

Sprawdzanie pamięci zmiennej.

Skuteczność profilu

Gdy Narzędzia deweloperskie są skonfigurowane i otwarte, kod uruchamiany przez Chrome nie jest optymalizowany. Jest on uporządkowany według poziomu, co ułatwia debugowanie.

W takim przypadku nie możesz polegać w kodzie na wartościach console.time() i performance.now(), aby mierzyć skuteczność profilu. Zamiast tego użyj panelu Wydajność.

Możesz też uruchomić kod profilowania bez otwierania Narzędzi deweloperskich, a potem otworzyć je, aby sprawdzić komunikaty w konsoli.

Oddziel dane debugowania

Aby przyspieszyć wczytywanie i jednocześnie ułatwić debugowanie, możesz rozdzielić informacje debugowania do osobnego pliku .wasm. Więcej informacji znajdziesz w artykule Szybsze debugowanie WebAssembly.

Możesz przechowywać ten plik lokalnie lub umieścić go na osobnym serwerze. Aby to zrobić za pomocą Emscripten, prześlij flagę -gseparate-dwarf=<filename> i podaj ścieżkę do pliku:

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

Kompilowanie i debugowanie na różnych maszynach

Jeśli kompilujesz na komputerze z innym systemem operacyjnym (kontenerem, maszyną wirtualną lub serwerem zdalnym) niż ten, na którym działa Chrome, może być konieczne ręczne mapowanie ścieżek plików debugowania.

Jeśli na przykład Twój projekt znajduje się lokalnie pod adresem C:\src\project, ale został utworzony w kontenerze Dockera o ścieżce /mnt/c/src/project, wykonaj te czynności:

  1. Otwórz stronę chrome://extensions/, znajdź rozszerzenie C/C++ DevTools Support (DWARF) i kliknij Szczegóły > Opcje rozszerzenia.
  2. Podaj ścieżki do starego i nowego pliku.

Podane ścieżki starego i nowego pliku.

Więcej informacji

Więcej informacji o debugowaniu WebAssembly znajdziesz w blogu zespołu inżynierów Chrome DevTools: