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.
Ta metoda działa z dowolnym modułem WebAssembly i w pewnym stopniu pomaga w debugowaniu małych, izolowanych funkcji, ale nie jest zbyt praktyczna w przypadku większych aplikacji, w których mapowanie między dezasembelowanym kodem a kodem źródłowym 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.
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ą. 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 informacje potrzebne debugerom do identyfikowania lokalizacji, nazw zmiennych, układów tekstowych i innych elementów.
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 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
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, 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.
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ą one z niej korzystać.
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
- Ocenianie wyrażeń w języku źródłowym
- …i wiele innych.
Wkrótce podamy więcej informacji.
Pobierz kanały podglądu
Rozważ użycie przeglądarki Chrome Canary, Dev lub Beta jako domyślnej przeglądarki dla programistów. Te kanały podglądu dają Ci 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 zrobią to użytkownicy.
Kontakt z zespołem 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
> Pomoc > Zgłoś problemy z Narzędziami deweloperskimi w Narzędziach deweloperskich. - Opublikuj tweeta na stronie @ChromeDevTools.
- Dodaj komentarze do naszych filmów w YouTube Co nowego w Narzędziach deweloperskich lub Wskazówki dotyczące Narzędzi deweloperskich.