Miniapp Debugbar

Панель для удобного дебага ваших миниаппов

Установка

Выполнить:

npm install --save-dev miniapp-debugbar

И в нужном месте подключить компонент: (обычно, это App.vue)

import MiniappDebugger from "miniapp-debugbar/src/miniapp-debugbar";

<MiniappDebugger v-if="isDevelopment"/>

Расширенное использование

Console

Если хотите получать логи из console, в вашем main.js (либо app.js) вызовите функцию consoleDebugbar.

import { consoleDebugbar } from "miniapp-debugbar/src/listeners/console-debugbar";
consoleDebugbar();

Аналитика

Если хотите получать логи amplitude, там где подключаете библиотеку передайте функцию amplitudeListener.

Подключение

import { amplitudeListener } from "miniapp-debugbar/src/listeners/analytics-debugbar";

Передача функции amplitudeListener

Было:

amplitude.getInstance().logEvent(event, data);

Стало:

amplitude.getInstance().logEvent(event, data, amplitudeListener(event, data));

Кастомизация

Скрытие дебагбаров

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

<MiniappDebugger v-if="isDevelopment" :exclude="['cookies', 'route']"/>

Добавление дебагбаров

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

<MiniappDebugger v-if="isDevelopment" custom="customOptions"/>

const customOptions = [
    {
        id: 'uikit',
        name: 'UI',
        component: defineAsyncComponent(() => import('./uikit-demo-debugbar')),
    },
];

uikit-demo-debugbar - это обычный ваш vue компонент