Отладка

Отладка в браузере

У событий VK Bridgе, которые поддерживаются в десктопной версии, в справочнике указана платформа Web. Самый простой способ протестировать получение таких событий — включить десктопную версию мини-приложения и перехватывать их прямо в браузере.

Откройте мини-приложение в браузере, перейдите в инструменты разработчика и на вкладке Консоль (Сonsole) введите код:

JavaScript

window.addEventListener('message', (event) => {
    if (event.data?.type === 'vk-connect') {
        console.log(event);
    }
});

Код перехватит сообщения от мини-приложения и покажет, что они содержат.

Отладка на мобильных устройствах

Консоль Eruda

Eruda — это консоль с инструментами разработчика для отладки мини-приложений для Android и iOS, которая работает подобно консоли браузера.

Внешний вид консоли Eruda Консоль Eruda

Как включить консоль

Чтобы разработчики могли использовать консоль Eruda для отладки мини-приложения, администраторы этого мини-приложения должны активировать её в панели управления мини-приложением. Сделать это может администратор с правами создателя мини-приложения, администратор с полным доступом или администратор с частичным доступом с правом «Редактирование».

1.

Откройте список приложений и перейдите в настройки вашего мини-приложения.
2.

Переключитесь в раздел Настройки → Дополнительные и в блоке Консоль Eruda выберите Включена.

Настройки включения консоли

Как использовать консоль

Чтобы использовать консоль Eruda для отладки:

1.

Запустите мини-приложение.
2.

Нажмите на кнопку •••.
3.

В меню выберите Показать консоль. Если консоль уже открыта, в меню отобразится пункт Скрыть консоль.

Консоль Eruda
4.

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

Примечание. Консоль Eruda встроена в библиотеку create-vk-mini-app, которая используется для создания мини-приложений из шаблона и доступна для:

•
Мобильного приложения (Android и iOS).
•
Мобильной версии сайта (m.vk.com).
•
Десктопной версии сайта (vk.com).

Пример работы консоли можно посмотреть в мини-приложении Eruda.

Chrome DevTools

Отладка осуществляется в десктопной версии браузера. Чтобы отладить мини-приложение для Android, используйте на Android-устройствах Сhrome Remote debugging.

Чтобы мини-приложение отображалось в Chrome Developer Tools:

1.
Подключите устройство к компьютеру по USB.
2.
Выполните шаг 1 и шаг 2 инструкции по удалённой отладке Android-устройств.
3.
Откройте приложение ВКонтакте на Android, перейдите в Настройки → Debug и включите Отладка WebView.

Чтобы пункт Debug отображался в настройках, перейдите в Настройки → О приложении и нажмите на иконку VK 11 раз.

Теперь при отладке по USB открытое на Android-устройстве мини-приложение будет отображаться в Сhrome DevTools: chrome://inspect/#devices.

Отладка при помощи vk-bridge-mock

Если под рукой нет Android-устройства, используйте библиотеку vk-bridge-mock, которая позволит эмулировать получение данных при работе на компьютере. При вызове событий библиотеки вам вернутся тестовые данные, которые можно использовать для отладки.

Использование библиотеки

1.

Установите библиотеку:

Shell
npm install @vkontakte/vk-bridge-mock || yarn add @vkontakte/vk-bridge-mock
2.

В файле index.js подключите библиотеку:

JavaScript
import bridge from '@vkontakte/vk-bridge-mock';
3.

Используйте методы объекта bridge:

JavaScript
bridge.subscribe((e) => { if (e.detail.type === 'VKWebAppGetUserInfoResult') { // do something } }); bridge.send('VKWebAppGetUserInfo', {});

Пример возвращаемых тестовых данных

JSON

{
  "type": "VKWebAppGetUserInfoResult",
  "data": {
    "id": 743784474,
    "bdate": "21.12.2000",
    "bdate_visibility": 1,
    "city": {
      "id": 2,
      "title": "Санкт-Петербург"
    },
    "country": {
      "id": 1,
      "title": "Россия"
    },
    "photo_200": "https://sun1-91.userapi.com/s/v1/ig2/Dcf-SWu7nVYDDldq9oQegiC06VqsSa43-HpDxzPjrvFCUUk9nSevY2Uf9xzm0bxvLfgsTOH6XiiW-zeLcDhPDj_w.jpg?size=200x200&quality=96&crop=26,26,204,204&ava=1",
    "photo_max_orig": "https://sun1-91.userapi.com/s/v1/ig2/trHNebJQhG4BmLxC8h4hOpDU6bKRy6uJi586wcyFcCj5fzrwYk7AtoNab-RSil0Bp9b569VQyGK_skG9e6oK7Ap7.jpg?size=256x256&quality=96&crop=0,0,256,256&ava=1",
    "sex": 2,
    "photo_100": "https://sun1-91.userapi.com/s/v1/ig2/M4vtl7tcmeP6ANUgE0vU7JZWuJszbHaN5QcCcK2xD66EIc6SeSA1NyFVLTSOt2iLOkFhJSJ4DawEJGOjzKtszMpR.jpg?size=100x100&quality=96&crop=26,26,204,204&ava=1",
    "first_name": "Персик",
    "last_name": "Рыжий",
    "can_access_closed": true,
    "is_closed": false
  }
}

Изменение тестовых данных

Если вам нужно изменить тестовые данные, чтобы посмотреть, как будет вести себя мини-приложение, если пользователь, например, не указал город, данные можно переопределить: