Ulepszone debugowanie WebAssembly w Narzędziach deweloperskich w Chrome

Ingvar Stepanyan
Ingvar Stepanyan

Tło

Do niedawna możliwe było tylko debugowanie WebAssembly obsługiwane przez Narzędzia deweloperskie w Chrome nieprzetworzone zrzuty stosu WebAssembly i przechodzenie poszczególnych instrukcji zdezasemblowanego formatu tekstowego WebAssembly.

Zrzut ekranu pokazujący poprzednio ograniczoną obsługę debugowania WebAssembly w 
            Narzędzia deweloperskie w Chrome.

Chociaż działa to z każdym modułem WebAssembly i w pewien sposób pomaga w debugowaniu małych, wyizolowanych 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

Aby rozwiązać ten problem, Emscripten i Narzędzia deweloperskie tymczasowo dostosowują map źródłowych do WebAssembly. Ta dozwolona mapowanie między przesunięciami binarnymi w skompilowanym module do oryginalnych lokalizacji w plikach źródłowych.

Zrzut ekranu pokazujący debugowanie oparte na mapach źródłowych.

Mapy źródłowe są jednak zaprojektowane pod kątem formatów tekstowych z wyraźnym mapowaniem koncepcji i wartości JavaScript, a nie w przypadku formatów binarnych, takich jak WebAssembly, z dowolnymi językami źródłowymi, systemami typów i pamięcią liniową. Integracja sprawiała, że integracja była hakerska, ograniczona i nie była powszechnie obsługiwana poza Emscripten.

Wpisz DWARF

Z drugiej strony wiele języków natywnych ma już wspólny format debugowania, DWARF, który zawiera wszystkie informacje potrzebne debugerom do rozpoznawania lokalizacji, nazw zmiennych, układów tekstowych i innych elementów.

Chociaż nadal istnieje kilka funkcji WebAssembly, które trzeba dodać, aby uzyskać pełną zgodność, kompilatory takie jak Clang i Rust już obsługują przesyłanie informacji DWARF w modułach WebAssembly, dzięki czemu zespół DevTools zaczął z nich korzystać. bezpośrednio w Narzędziach deweloperskich.

Po pierwsze, Narzędzia deweloperskie obsługują teraz mapowanie źródła natywnego z wykorzystaniem tych informacji, więc można rozpocząć debugowanie modułów Wasm utworzonych przez dowolny z tych kompilatorów bez konieczności korzystania z formatu zdemontowanego ani używania żadnych niestandardowych skryptów.

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

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

  emcc -g …sources… -o out.js

Możesz użyć tej samej flagi -g w języku Rust:

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

Jeśli używasz Cargo, dane debugowania będą domyślnie uwzględnione:

  cargo build --target wasm32-unknown-unknown

Ta nowa integracja Narzędzi deweloperskich z DWARF obejmuje już obsługę wykonywania kroków w kodzie, ustawiania punktów przerwania i rozpoznawania zrzutów stosu w językach źródłowych.

Zrzut ekranu pokazujący debugowanie w nowym formacie DWARF.

Przyszłość

Przed Tobą jeszcze sporo pracy. Na przykład jeśli chodzi o narzędzia, atrybuty Emscripten (Binaryen) i wasm-pack (wasm-bindgen) nie obsługują aktualizacji informacji DWARF o przekształcaniu, które jeszcze trwają. 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:

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

Wkrótce podamy więcej informacji na ten temat.

Pobierz kanały 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 testowej dają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i wykrywanie problemów w witrynie, zanim użytkownicy ją zobaczą.

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

Skorzystaj z poniższych opcji, aby porozmawiać o nowych funkcjach i zmianach w poście lub o innych kwestiach związanych z Narzędziami deweloperskimi.

  • Prześlij nam sugestię lub opinię na crbug.com.
  • Aby zgłosić problem z Narzędziami deweloperskimi, kliknij Więcej opcji   Więcej > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi w Narzędziach deweloperskich.
  • Opublikuj tweeta na stronie @ChromeDevTools.
  • Napisz komentarz pod filmem dotyczącym nowości w Narzędziach deweloperskich w Narzędziach deweloperskich w YouTube lub filmach w YouTube ze wskazówkami dotyczącymi Narzędzi deweloperskich.