Ulepszone debugowanie WebAssembly w Narzędziach deweloperskich w Chrome

Ingvar Stepanyan
Ingvar Stepanyan

Wprowadzenie

Do niedawna jedynym debugowaniem WebAssembly obsługiwanym przez Narzędzia deweloperskie w Chrome był wyświetlanie nieprzetworzonych zrzutów stosu WebAssembly i przechodzenie między poszczególnymi instrukcjami w rozpakowanym formacie tekstowym WebAssembly.

Zrzut ekranu pokazujący ograniczoną wcześniej obsługę debugowania WebAssembly w Narzędziach deweloperskich w Chrome.

Działa to z dowolnym modułem WebAssembly i pomaga w debugowaniu małych, wyizolowanych funkcji, ale nie jest zbyt praktyczne w przypadku większych aplikacji, w których mapowanie między zdekompilowanym kodem a źródłami jest mniej oczywiste.

Tymczasowe obejście

Aby obejść ten problem, zasoby Emscripten i DevTools tymczasowo dostosowują istniejący format map źródłowych do WebAssembly. Umożliwiło to mapowanie między przesunięciami binarnymi w module skompilowanym na oryginalne lokalizacje w plikach źródłowych.

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

Mapy źródeł zaprojektowano jednak pod kątem formatów tekstowych z wyraźnym mapowaniem koncepcji i wartości JavaScriptu, a nie dla formatów binarnych, takich jak WebAssembly z dowolnymi językami źródłowymi, systemami typów i pamięcią liniową. Sprawiało to, że integracja była trudna, 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 zapewnia debugerom wszystkie informacje niezbędne do rozpoznawania lokalizacji, nazw zmiennych, układów typów i nie tylko.

Aby uzyskać pełną zgodność, trzeba jeszcze dodać kilka funkcji związanych ze standardem WebAssembly, ale kompilatory takie jak Clang i Rust obsługują już wysyłanie informacji o wartości DWARF w modułach WebAssembly, dzięki czemu zespół DevTools może zacząć korzystać z tego narzędzia bezpośrednio w Narzędziach deweloperskich.

W pierwszej kolejności narzędzia deweloperskie obsługują teraz natywne mapowanie źródeł na podstawie tych informacji. Dzięki temu możesz rozpocząć debugowanie modułów Wasm utworzonych przez dowolny z tych kompilatorów bez konieczności korzystania z zdezasemblowanego formatu i korzystania ze skryptów niestandardowych.

Wystarczy, że poprosisz kompilator tak, aby uwzględniał dane debugowania, tak jak w przypadku innych platform. Na przykład w językach Clang i Emscripten można użyć flagi -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 Rust:

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

Jeśli korzystasz z Cargo, dane debugowania zostaną dodane domyślnie:

  cargo build --target wasm32-unknown-unknown

Ta nowa integracja Narzędzi deweloperskich z platformą DWARF obejmuje już obsługę przechodzenia nad kodem, ustawiania punktów przerwania i rozwiązywania zrzutów stosu w językach źródłowych.

Zrzut ekranu przedstawiający nowe debugowanie z obsługą DWARF.

Przyszłość

Przed nami jeszcze sporo pracy. Na przykład Emscripten (Binaryen) i Wasm-pack (wasm-bindgen) nie obsługuje jeszcze aktualizowania informacji z DWARF o przekształceniach, które przeprowadzają. Ta integracja na razie nie przyniesie korzyści.

W przypadku Narzędzi deweloperskich w Chrome będziemy dalej rozwijać integrację, aby zapewnić bezproblemowe debugowanie, w tym:

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

Będziemy na bieżąco informować o kolejnych aktualizacjach.

Pobieranie kanałów podglądu

Jako domyślnej przeglądarki dla programistów możesz używać Chrome Canary, Dev lub Beta. Te kanały podglądu dają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platform internetowych oraz wykrywanie problemów w witrynie, zanim zdołają zrobić użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Użyj poniższych opcji, aby omówić nowe funkcje i zmiany w poście lub wszelkie inne kwestie związane z Narzędziami dla deweloperów.

  • Prześlij nam sugestię lub opinię na stronie crbug.com.
  • Aby zgłosić problem z Narzędziami deweloperskimi, kliknij Więcej opcji   Więcej   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi.
  • zatweetuj na @ChromeDevTools.
  • Napisz komentarz o nowościach w filmach w YouTube dostępnych w Narzędziach deweloperskich lub z poradami dotyczącymi narzędzi dla deweloperów w filmach w YouTube.