Ulepszone debugowanie WebAssembly w Narzędziach deweloperskich w Chrome

Ingvar Stepanyan
Ingvar Stepanyan

Tło

Do niedawna jedynym debugowaniem WebAssembly obsługiwanym przez Narzędzia deweloperskie w Chrome było wyświetlanie czystych ścieżek stosu WebAssembly oraz przechodzenie przez poszczególne instrukcje w rozmontowanym formacie tekstowym WebAssembly.

Zrzut ekranu przedstawiający wcześniej ograniczone wsparcie debugowania WebAssembly w narzędziach deweloperskich w Chrome

Chociaż działa to z każdym modułem WebAssembly i w pewien sposób pomaga w debugowaniu małych, wyodrębnionych funkcji, nie jest zbyt praktyczne w przypadku większych aplikacji, w których mapowanie między zdemontowanym kodem a źródłami jest mniej oczywiste.

Tymczasowe obejście problemu

Aby rozwiązać ten problem, Emscripten i DevTools tymczasowo dostosowały istniejący format map źródeł do WebAssembly. Umożliwiło to mapowanie przesunięć binarnych w skompilowanym module na pierwotne lokalizacje w plikach źródłowych.

Zrzut ekranu przedstawiający debugowanie z wykorzystaniem map źródłowych.

Mapy źródeł zostały jednak zaprojektowane pod kątem formatów tekstowych z jasnymi odwzorowaniami na pojęcia i wartości JavaScript, a nie formatów binarnych, takich jak WebAssembly z dowolnymi językami źródłowymi, systemami typów i pamięci liniowej. Z tego powodu integracja była ograniczona i nie była obsługiwana poza Emscriptenem.

Wpisz DWARF

Z drugiej strony wiele języków natywnych ma już wspólny format debugowania DWARF, który zawiera wszystkie niezbędne informacje, aby debugery mogły rozwiązywać lokalizacje, nazwy zmiennych, układy typów i inne dane.

Chociaż nadal trzeba dodać kilka funkcji WebAssembly, aby zapewnić pełną zgodność, kompilatory takie jak Clang i Rust obsługują już emitowanie informacji DWARF w modułach WebAssembly, co umożliwiło zespołowi DevTools rozpoczęcie korzystania z nich bezpośrednio w DevTools.

W pierwszym kroku DevTools obsługuje mapowanie natywnego źródła za pomocą tych informacji, dzięki czemu możesz rozpocząć debugowanie modułów Wasm wygenerowanych przez dowolny z tych kompilatorów bez konieczności korzystania z rozmontowanego formatu ani skryptów niestandardowych.

Zamiast tego musisz poinformować kompilatora, aby dołączył dane debugowania w taki sam sposób jak na innych platformach. Na przykład w Clang i Emscripten można to zrobić, przekazując podczas kompilacji flagę -g:

  clang -g …sources… -target wasm32 -o out.wasm

  emcc -g …sources… -o out.js

W Rust możesz użyć tej samej flagi -g:

  rustc -g source.rs --target wasm32-unknown-unknown -o out.wasm

Jeśli używasz Cargo, informacje debugowania zostaną dołączone domyślnie:

  cargo build --target wasm32-unknown-unknown

Ta nowa integracja Narzędzi deweloperskich z DWARF obejmuje już obsługę przechodzenia po kodzie, ustawiania punktów przerwania i rozwiązywania ścieżek stosu w językach źródłowych.

Zrzut ekranu pokazujący nowe debugowanie za pomocą DWARF

Przyszłość

Nadal jednak jest sporo pracy. Na przykład narzędzia Emscripten (Binaryen) iwasm-pack (wasm-bindgen) nie obsługują jeszcze aktualizowania informacji DWARF w przekształceniach, które wykonują. Na razie nie będą mogli skorzystać z tej integracji.

Jeśli chodzi o Narzędzia deweloperskie w Chrome, będziemy stopniowo rozwijać integrację, aby zapewnić bezproblemowe debugowanie, w tym:

  • Rozwiązywanie nazw zmiennych
  • Rodzaje druku estetycznego
  • Ocenianie wyrażeń w językach źródłowych
  • ...i wiele więcej!

Wkrótce podamy więcej informacji.

Pobieranie kanałów podglądu

Zastanów się, czy nie ustawić Chrome w wersji Canary, Dev lub Beta jako domyślnej przeglądarki do programowania. Te kanały wersji wstępnej zapewniają dostęp do najnowszych funkcji DevTools, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znaleźć problemy w witrynie, zanim zrobią to użytkownicy.

Kontakt z zespołem ds. Narzędzi deweloperskich w Chrome

Aby omówić nowe funkcje, aktualizacje lub inne kwestie związane z Narzędziami deweloperskimi, skorzystaj z tych opcji.