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:
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.
Zainstaluj rozszerzenie C/C++ DevTools Support (DWARF) do Chrome.
Debugowanie
Po skonfigurowaniu Narzędzi deweloperskich zdebuguj kod:
- 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
. - Opcjonalnie możesz pogrupować utworzone przez siebie pliki, aby ułatwić sobie nawigację. W sekcji Źródła zaznacz > Strona > > Grupuj według autora/wdrożenia .
- Wybierz oryginalny plik źródłowy z drzewa plików. W tym przypadku
mandelbrot.cc
. Aby ustawić punkt przerwania wiersza kodu, kliknij numer wiersza w kolumnie po lewej stronie edytora, np. w wierszu 38.
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.
- W sekcji Źródła > Stos wywołań wyświetl nazwy funkcji w takiej postaci, w jakiej występują w źródle.
- W sekcji Źródła > Zakres wyświetl zmienne lokalne i globalne, ich typy i wartości.
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ć.
- W sekcji Źródła > Zakres kliknij ikonę , aby otworzyć narzędzie Memory Inspector i sprawdzić nieprzetworzone bajty pamięci obiektu. Więcej informacji znajdziesz w artykule o inspekcji pamięci WebAssembly.
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:
- Otwórz
chrome://extensions/
, znajdź rozszerzenie C/C++ DevTools Support (DWARF) i kliknij Szczegóły > Opcje rozszerzeń. - Określ ścieżki starej i nowej wersji pliku.
Więcej informacji
Więcej informacji o debugowaniu WebAssembly znajdziesz na blogu inżynierów na temat Narzędzi deweloperskich w Chrome: