Debugowanie WebAssembly w C/C++

Sofia Emelianova
Sofia Emelianova
GitHub

Interfejs WebAssembly umożliwia uruchamianie na przykład kodu w języku C/C++ w internecie z przybliżoną szybkością bezpośrednią oraz równolegle z JavaScriptem. Z tego dokumentu dowiesz się, jak skonfigurować i używać Narzędzi deweloperskich w Chrome, aby lepiej debugować takie aplikacje.

Po skonfigurowaniu Narzędzi deweloperskich możesz:

  • Sprawdź oryginalny kod w sekcji Źródła > Edytor.
  • Wstrzymaj wykonanie z użyciem punktów przerwania liniowych kodu i przejrzyj pierwotny kod źródłowy C/C++, a nie skompilowany plik binarny .wasm.

Po wstrzymaniu funkcji możesz:

  • Najedź kursorem na zmienne w pierwotnym pliku źródłowym, aby wyświetlić ich wartości.
  • Poznaj nazwy funkcji w stosie wywołań i zmienne w zakresie.
  • Generuj do konsoli właściwości głęboko zagnieżdżone i złożone obiekty.
  • Sprawdź pamięć obiektu za pomocą narzędzia Memory Inspector.

Skonfiguruj

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

  1. Skompiluj aplikację z danymi debugowania DWARF. Uruchom najnowszy kompilator Emscripten i prześlij do niego flagę -g. Na przykład:

    emcc -g source.cc -o app.html

    Więcej informacji znajdziesz w artykule o tworzeniu projektów z danymi debugowania.

  2. Zainstaluj rozszerzenie C/C++ DevTools Support (DWARF) do Chrome.

Debugowanie

Po skonfigurowaniu Narzędzi deweloperskich zdebuguj kod:

  1. Otwórz Narzędzia deweloperskie, aby sprawdzić swoją witrynę. Możesz go wypróbować na tej stronie demonstracyjnej, która została skompilowana z wymaganą flagą -g.
  2. Opcjonalnie możesz pogrupować utworzone przez siebie pliki, aby ułatwić sobie nawigację. W sekcji Źródła zaznacz Menu z 3 kropkami. > Strona > Pole wyboru. > Grupuj według autora/wdrożenia Funkcja eksperymentalna..
  3. Wybierz oryginalny plik źródłowy z drzewa plików. W tym przypadku mandelbrot.cc.

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

    Punkt przerwania wiersza kodu ustawiony w wierszu 38.

  5. Uruchom kod ponownie. Wykonanie zostaje wstrzymane przed wierszem z punktem przerwania.

Po wstrzymaniu wykonaj te czynności:

  • W sekcji Źródła > Edytor najedź kursorem na zmienną, aby zobaczyć jej wartość w etykietce.

Wartość zmiennej w etykietce.

  • W sekcji Źródła > Stos wywołań wyświetl nazwy funkcji w takiej postaci, w jakiej występują w źródle.

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

  • W sekcji Źródła > Zakres wyświetl zmienne lokalne i globalne, ich typy i wartości.

Okienko Zakres ze zmiennymi lokalnymi i ich wartościami.

  • W konsoli wyjdź zmienne i obiekty, które są trudne do nawigacji w sekcji Zakres:

    • Głęboko zagnieżdżone zmienne, np. zindeksowane elementy w dużych tablicach.
    • Złożone obiekty, w tym te, do których można uzyskać dostęp za pomocą wskaźników (->). Rozwiń je, aby je zbadać.

Zagnieżdżona zmienna i złożony obiekt rozwinięte w konsoli.

  • W sekcji Źródła > Zakres kliknij ikonę Pamięć., aby otworzyć narzędzie Memory Inspector i sprawdzić nieprzetworzone bajty pamięci obiektu. Więcej informacji znajdziesz w artykule o inspekcji pamięci WebAssembly.

Badanie pamięci zmiennej.

Skuteczność profilu

Po skonfigurowaniu i otwarciu Narzędzi deweloperskich kod uruchomiony w Chrome nie będzie zoptymalizowany. Jest ona warstwowa, co ułatwia debugowanie.

W takim przypadku nie będzie można polegać na console.time() i performance.now() w kodzie do profilowania skuteczności. Zamiast tego do profilowania służy panel Skuteczność.

Możesz też uruchomić kod profilowania bez otwierania Narzędzi deweloperskich, a następnie otworzyć go, aby zbadać wiadomości w konsoli.

Rozdziel dane debugowania

Aby przyspieszyć wczytywanie, a jednocześnie zapewnić większą wygodę debugowania, możesz podzielić dane debugowania w osobnym pliku .wasm. Więcej informacji znajdziesz w artykule o szybszym debugowaniu modułu WebAssembly (w języku angielskim).

Możesz przechowywać ten plik lokalnie lub przechowywać go na innym serwerze. Aby to zrobić w Emscripten, przekaż 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]

Tworzenie i debugowanie na różnych komputerach

Jeśli tworzysz kompilację na komputerze z innym systemem operacyjnym (kontenerem, maszyną wirtualną lub serwerem zdalnym) niż ten na komputerze, na którym korzystasz z Chrome, musisz ręcznie zmapować ścieżki plików debugowania.

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

  1. Otwórz chrome://extensions/, znajdź rozszerzenie C/C++ DevTools Support (DWARF) i kliknij Szczegóły > Opcje rozszerzeń.
  2. Określ ścieżki starej i nowej wersji pliku.

Określone ścieżki do plików (stara i nowa).

Więcej informacji

Więcej informacji o debugowaniu WebAssembly znajdziesz na blogu inżynierów na temat Narzędzi deweloperskich w Chrome: