Улучшена отладка WebAssembly в Chrome DevTools.

Ингвар Степанян
Ingvar Stepanyan

Фон

До недавнего времени единственной отладкой WebAssembly, которую поддерживали Chrome DevTools, был просмотр необработанных трассировок стека WebAssembly и пошаговое выполнение отдельных инструкций в дизассемблированном текстовом формате WebAssembly.

Скриншот ранее ограниченной поддержки отладки WebAssembly в Инструменты разработчика Chrome.

Хотя это работает с любым модулем WebAssembly и в некоторой степени помогает при отладке небольших изолированных функций, это не очень практично для более крупных приложений, где сопоставление между дизассемблированным кодом и исходными кодами менее очевидно.

Временное решение

Чтобы обойти эту проблему, Emscripten и DevTools временно адаптировали существующий формат исходных карт к WebAssembly. Это позволило сопоставить двоичные смещения в скомпилированном модуле с исходными местоположениями в исходных файлах.

Скриншот отладки с использованием исходных карт.

Однако карты исходного кода были разработаны для текстовых форматов с четким сопоставлением с концепциями и значениями JavaScript, а не для двоичных форматов, таких как WebAssembly с произвольными исходными языками, системами типов и линейной памятью. Это сделало интеграцию хакерской, ограниченной и не получившей широкой поддержки за пределами Emscripten.

Входит ГНОК

С другой стороны, многие родные языки уже имеют общий формат отладки, DWARF , который предоставляет отладчикам всю необходимую информацию для определения местоположений, имен переменных, макетов типов и многого другого.

Хотя для полной совместимости все еще необходимо добавить некоторые специфичные для WebAssembly функции, такие компиляторы, как Clang и Rust, уже поддерживают отправку информации DWARF в модули WebAssembly, что позволило команде DevTools начать использовать ее непосредственно в DevTools.

В качестве первого шага DevTools теперь поддерживает сопоставление исходного кода с использованием этой информации, поэтому вы можете начать отладку модулей Wasm, созданных любым из этих компиляторов, не прибегая к дизассемблированному формату или использованию каких-либо пользовательских сценариев.

Вместо этого вам просто нужно указать компилятору включить отладочную информацию, как обычно на других платформах. Например, в Clang и Emscripten это можно сделать, передав во время компиляции флаг -g :

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

  emcc -g …sources… -o out.js

Вы можете использовать тот же флаг -g в Rust:

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

Или, если вы используете Cargo, отладочная информация будет включена по умолчанию:

  cargo build --target wasm32-unknown-unknown

Эта новая интеграция DevTools с DWARF уже включает поддержку пошагового выполнения кода, установки точек останова и разрешения трассировок стека на исходных языках.

Скриншот новой отладки с помощью DWARF.

Будущее

Однако впереди еще немало работы. Например, со стороны инструментов: Эмскриптен (Бинариен) и Wasm-pack (wasm-bindgen) пока не поддерживает обновление информации DWARF о выполняемых ими преобразованиях. На данный момент они не получат выгоды от этой интеграции.

Что касается Chrome DevTools, мы будем постепенно совершенствовать интеграцию, чтобы обеспечить беспрепятственную отладку, в том числе:

  • Разрешение имен переменных
  • Симпатичные типы печати
  • Оценка выражений на исходных языках
  • …и многое другое!

Следите за будущими обновлениями!

Загрузите предварительный просмотр каналов

Рассмотрите возможность использования Chrome Canary , Dev или Beta в качестве браузера для разработки по умолчанию. Эти каналы предварительного просмотра предоставляют вам доступ к новейшим функциям DevTools, позволяют тестировать передовые API-интерфейсы веб-платформы и помогают находить проблемы на вашем сайте раньше, чем это сделают ваши пользователи!

Свяжитесь с командой Chrome DevTools

Используйте следующие параметры, чтобы обсудить новые функции, обновления или что-либо еще, связанное с DevTools.