WebAssembly umożliwia uruchamianie na przykład kodu w języku C/C++ w internecie z szybkością zbliżonym do natywnego oraz równolegle z JavaScriptem. 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.
Po wstrzymaniu funkcji możesz:
- Najedź kursorem na zmienne w pierwotnym pliku źródłowym, aby zobaczyć ich wartości.
- Poznaj nazwy funkcji w stosie wywołań i zmienne w sekcji Zakres.
- Wyprowadzanie do Konsoli właściwości głęboko zagnieżdżonych i obiektów złożonych.
- Sprawdź pamięć obiektów za pomocą inspektora pamięci.
Skonfiguruj
Aby włączyć debugowanie WebAssembly w C/C++ w Narzędziach deweloperskich:
Zkompiluj aplikację z uwzględnieniem informacji debugowania DWARF. Uruchom najnowszy kompilator Emscripten i przekaż mu flagę
-g. Na przykład:emcc -g source.cc -o app.htmlWięcej informacji znajdziesz w artykule o tworzeniu projektów z wykorzystaniem danych debugowania.
Zainstaluj rozszerzenie do Chrome obsługujące C/C++ (DWARF).
Debugowanie
Po skonfigurowaniu Narzędzi deweloperskich debuguj kod:
- Otwórz Narzędzia deweloperskie, aby sprawdzić swoją witrynę. W tym samouczku możesz wypróbować ten kod na stronie demonstracyjnej, która została skompilowana z wymaganym flagą
-g. - Opcjonalnie pogrupuj utworzone przez siebie pliki, aby ułatwić nawigację. W sekcji Źródła zaznacz
> Strona > 
> Grupuj według autora/Wdrożenia 
. - Wybierz pierwotny 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 zatrzymuje się przed wierszem z punktem przerwy.
Podczas pauzy:
- W sekcji Źródła > Edytor najedź kursorem na zmienną, aby zobaczyć jej wartość w etykietce.
- W sekcji Źródła > Stos wywołania możesz wyświetlić nazwy funkcji w postaci, w jakiej występują w źródle.
- W sekcji Źródła > Zakres możesz wyświetlać zmienne lokalne i globalne, ich typy oraz wartości.
W Konsoli zmienne i obiekty wyjściowe, które trudno znaleźć w zakresie:
- Głęboko zagnieżdżone zmienne, na przykład 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 (
->). Aby je sprawdzić, rozwiń je.
- W sekcji Źródła > Zakres kliknij ikonę
, aby otworzyć kontroler pamięci i sprawdzać nieprzetworzone bajty pamięci obiektu. Więcej informacji znajdziesz w artykule na temat kontroli pamięci WebAssembly.
Skuteczność profilu
Po skonfigurowaniu i otwarciu Narzędzi deweloperskich kod uruchamiany w Chrome nie jest zoptymalizowany. Jest on uporządkowany według poziomu, aby ułatwić debugowanie.
W takim przypadku nie możesz polegać na console.time() i performance.now() w kodzie do profilowania skuteczności. Zamiast tego do profilowania używaj panelu Skuteczność.
Możesz też uruchomić kod profilowania bez otwierania Narzędzi deweloperskich, a potem otworzyć je, aby sprawdzić wiadomości w konsoli.
Rozdziel dane debugowania
Aby przyspieszyć ładowanie, ale ułatwić sobie debugowanie, możesz podzielić dane debugowania do osobnego pliku .wasm. Więcej informacji znajdziesz w artykule Szybsze debugowanie WebAssembly.
Możesz zapisać ten plik lokalnie lub przechowywać go na innym 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 projekt znajduje się lokalnie C:\src\project, ale został utworzony w kontenerze Dockera ze ścieżką /mnt/c/src/project, wykonaj te czynności:
- Otwórz
chrome://extensions/, znajdź rozszerzenie Obsługa Narzędzi deweloperskich w C/C++ (DWARF) i kliknij Szczegóły > Opcje rozszerzeń. - Podaj stare i nowe ścieżki plików.
Więcej informacji
Więcej informacji o debugowaniu WebAssembly znajdziesz w blogu zespołu inżynierów Chrome DevTools: