Фон
До недавнего времени единственной отладкой WebAssembly, которую поддерживали Chrome DevTools, был просмотр необработанных трассировок стека WebAssembly и пошаговое выполнение отдельных инструкций в дизассемблированном текстовом формате WebAssembly.
Хотя это работает с любым модулем 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 уже включает поддержку пошагового выполнения кода, установки точек останова и разрешения трассировок стека на исходных языках.
Будущее
Однако впереди еще немало работы. Например, со стороны инструментов: Эмскриптен (Бинариен) и Wasm-pack (wasm-bindgen) пока не поддерживает обновление информации DWARF о выполняемых ими преобразованиях. На данный момент они не получат выгоды от этой интеграции.
Что касается Chrome DevTools, мы со временем будем совершенствовать интеграцию, чтобы обеспечить беспрепятственную отладку, в том числе:
- Разрешение имен переменных
- Симпатичные типы печати
- Оценка выражений на исходных языках
- …и многое другое!
Следите за будущими обновлениями!
Загрузите предварительный просмотр каналов
Рассмотрите возможность использования Chrome Canary , Dev или Beta в качестве браузера для разработки по умолчанию. Эти каналы предварительного просмотра дают вам доступ к новейшим функциям DevTools, тестируют передовые API-интерфейсы веб-платформы и находят проблемы на вашем сайте раньше, чем это сделают ваши пользователи!
Связь с командой Chrome DevTools
Используйте следующие параметры, чтобы обсудить новые функции и изменения в публикации или что-либо еще, связанное с DevTools.
- Отправьте нам предложение или отзыв через crbug.com .
- Сообщите о проблеме DevTools, используя дополнительные параметры. > Справка > Сообщить о проблемах DevTools в DevTools.
- Напишите в Твиттере @ChromeDevTools .
- Оставляйте комментарии к нашим видеороликам «Что нового в DevTools на YouTube» или «Советы по DevTools» на YouTube .