Отладка WebAssembly с помощью Chrome DevTools

Познакомьтесь со стеком инструментов для отладки WebAssembly

WebAssembly считается современным двоичным форматом для Интернета. Это открытый стандарт для разработки приложений, работающих в браузере, позволяющий использовать более 40 языков программирования, включая C и C ++, Python, Go, Java, Rust и PHP.

«Что наиболее важно, эти программы могут работать в браузере со скоростью, близкой к родной».

Отладка WebAssembly

До недавнего времени в Chrome DevTools была ограниченная поддержка отладки WebAssemby. Мы могли анализировать только отдельные инструкции в дизассемблированных текстовых форматах WebAssembly и просматривать необработанные трассировки стека.

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

В качестве решения Emscripten и DevTools временно адаптировали формат existing source maps для WebAssembly.

Исходная карта - это способ отображения объединенного / минифицированного файла обратно в незастроенное состояние. При использовании исходных карт код на стороне клиента будет читаемым и, что более важно, отлаживаемым, даже без снижения производительности.

Это позволило сопоставить двоичные смещения в скомпилированном модуле с исходными местоположениями в исходных файлах.

Emscripten

Emscripten - это набор инструментов компилятора для WebAssembly, в котором особое внимание уделяется скорости, размеру и веб-платформе.

Одним из основных преимуществ отладки кроссплатформенного кода Emscripten является то, что мы можем отлаживать код, используя либо собственную платформу, либо отладчик и профилировщик Chrome DevTool.

Функции

• Создает журналы отладки в режиме отладки и сохраняет промежуточные файлы сборки для анализа.
• Включите во время выполнения проверку доступа к памяти и распространенных ошибок распределения.
• Auto Debugger может инструментировать низкоуровневый код виртуальной машины.

Однако исходные карты были разработаны для текстовых языков программирования, таких как JavaScript, где бинарные форматы, такие как WebAssembly, имеют свои ограничения.

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

DWARF

DWARF - формат файла отладки, используемый многими компиляторами - Source

Существует плагин Devtool, поддерживающий DWARF, который вы можете установить с помощью Интернет-магазина Google Chrome.

Он поддерживает отладку приложений C / C ++ WebAssembly с использованием отладочной информации DWARF. Это расширение служит адаптером между приложением WebAssembly, запущенным в браузере, и Chrome DevTools. Он позволяет разработчикам напрямую отлаживать приложения C ++, которые экспортируются в WebAssembly в Chrome DevTools 88+.

Кроме того, DWARF предоставляет отладчикам необходимые данные для определения макетов типов, имен переменных, местоположений и многого другого.

Недавно в Chrome DevTools также была добавлена ​​функция, поддерживающая собственное сопоставление источников с использованием информации DWARF.

Новые функции, добавленные для DWARF в Chrome DevTools.

• Такие компиляторы, как Rust и Clang, уже поддерживают отправку DWARF информации в модулях WebAssembly. Это побуждает команду разработчиков Google использовать DWARF непосредственно в своих DevTools.
• Кроме того, в DevTools доступна поддержка встроенного сопоставления источников, поэтому разработчики могут отлаживать Wasm modules, созданные любыми компиляторами на основе Rust или Clang, без использования каких-либо пользовательских скриптов.
• Разработчики могут наблюдать за кодом при отладке, устранять трассировки стека и устанавливать точки останова в исходном коде с помощью новой интеграции DevTools с DWARF.

Однако есть еще некоторые специфичные для WebAssembly функции, которые необходимо добавить для полной совместимости.

Практический пример использования

Давайте возьмем Google Earth в качестве примера приложения для отладки, которое зависит от WebAssembly.

Отладка без использования DWARF

Прежде всего, вам нужно посетить сайт google earth и перейти к источникам для проверки в Chrome DevTools. После этого вы можете увидеть сгенерированные файлы JavaScript и WebAssembly.

Затем установите точку останова в любой точке входа. Когда вы это сделаете и перезагрузите веб-страницу, она остановится в точке останова, и оттуда вы сможете перейти в общий JavaScript Emscripten.

Мы видим, что DevTools сгенерировал для нас имя функции ($ func424), которое также отображается в Call Stack. Название функции основано на имени эксперта. Даже если у вас нет прикрепленной отладочной информации, вы все равно получаете читаемые трассировки стека с необходимыми инструментами отладки.

Если вы можете наблюдать Scope представление среды отладки, вы можете увидеть некоторые переменные, которые должны быть согласованы с местоположением, которое мы ищем на Google Earth. Тем не менее, он удобочитаем, и разработчики должны угадывать реальные значения Scope.

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

Отладка с помощью DWARF

Google Планета Земля успешно использует новые возможности отладки в сочетании с этой опцией для отладки WebAssembly-сборок своего обширного приложения C ++ в Интернете.

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

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

Преимущества использования WebAssembly для отладки

• Поскольку WebAssembely поддерживает исходные карты, разработчики могут просматривать исходный код в параметрах инструментов разработчика.
• Google Планета Земля доступна и может отлаживать браузеры Firefox, Edge и Opera.

Недостатки использования WebAssembly для отладки

• Тем не менее, команда Google работает над тем, чтобы сделать его доступным для Safari, потому что Safari не поддерживает WebGL2.
• WebAssembly не полностью поддерживает динамическое выделение памяти.

Будущие работы для инструментов WebAssembly

Тем не менее, это не конец пути команды разработчиков Google. Здесь есть больше функций, которые нужно поработать.

• Инспектор необработанной памяти для просмотра необработанной памяти.
• Пользовательские форматы для типов C ++.
• Они работают над улучшенной поддержкой покрытия кода профилирования.
• На данный момент wasm-pack(wasm-bindgen) не поддерживает обновление информации DWARF о преобразованиях. Так что команда разработчиков тоже сосредоточится на этом.
• Команда разработчиков будет работать над разрешением имен переменных на стороне DevTool.
• Оценивайте выражения на исходных языках.

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

Спасибо за чтение. Не стесняйтесь оставлять комментарии ниже и делиться своим опытом с WebAssembly.

Создавайте из независимых компонентов, для скорости и масштабирования

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

Инструменты OSS, такие как Bit, предлагают отличные возможности разработчика для создания независимых компонентов и составления приложений. Многие команды начинают с создания своих дизайн-систем или микро-интерфейсов с помощью независимых компонентов.
Попробуйте →

Подробнее