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 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 > Edytujący.
- Wstrzymaj wykonywanie z punktami przerwania wiersza kodu i przejdź przez 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 zobaczyć ich wartości.
- Poznaj nazwy funkcji w stosie wywołań i zmienne w sekcji Zakres.
- Prześlij do Konsoli głęboko zagnieżdżone właściwości i złożone obiekty.
- Sprawdź pamięć obiektów za pomocą inspektora pamięci.
Skonfiguruj
Aby włączyć debugowanie WebAssembly w języku C/C++ w Narzędziach deweloperskich:
Skompiluj aplikację, uwzględniając w nim informacje debugowania z 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ługa Narzędzi deweloperskich w C/C++” (DWARF).
Debugowanie
Po skonfigurowaniu Narzędzi deweloperskich debuguj kod:
- Otwórz Narzędzia deweloperskie, aby sprawdzić swoją witrynę. Możesz zobaczyć ten samouczek na tej stronie demonstracyjnej, która została skompilowana z wymaganą flagą
-g. - Opcjonalnie pogrupuj utworzone przez siebie pliki, aby ułatwić nawigację. W sekcji Źródła sprawdź
> 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 jest wstrzymywane przed wierszem z punktem przerwania.
Po wstrzymaniu funkcji wykonaj te czynności:
- W sekcji Źródła > Edytorze – 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świetlanie zmiennych lokalnych i globalnych oraz ich typów i wartości.
W konsoli wpisz zmienne i obiekty, do których trudno znaleźć potrzebne informacje w sekcji Zakres:
- 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 (
->); Rozwiń je, aby je sprawdzić.
- W sekcji Źródła > Zakres, kliknij ikonę
, aby otworzyć inspektora pamięci i sprawdzić 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 dzielony na kolejne poziomy, aby zapewnić Ci lepsze 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 następnie otworzyć go, aby zbadać 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, 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]
Kompilowanie i debugowanie na różnych maszynach
Jeśli tworzysz kompilację na komputerze z innym systemem operacyjnym (kontenerem, maszyną wirtualną lub serwerem zdalnym) niż na komputerze, na którym uruchamiasz Chrome, konieczne może być ręczne zmapowanie ś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 na blogu dla inżynierów Chrome DevTools: