1 В избранное 0 Ответвления 0

OSCHINA-MIRROR/Tencent-vConsole

Присоединиться к Gitlife
Откройте для себя и примите участие в публичных проектах с открытым исходным кодом с участием более 10 миллионов разработчиков. Приватные репозитории также полностью бесплатны :)
Присоединиться бесплатно
Клонировать/Скачать
README_CN.md 6 КБ
Копировать Редактировать Web IDE Исходные данные Просмотреть построчно История
Отправлено 10.03.2025 04:58 3421616

English | Русский

vConsole

Лёгкая, расширяемая отладочная панель для фронтенд-разработчиков мобильных веб-приложений.

vConsole независима от фреймворков, что позволяет использовать её с Vue, React или любыми другими фреймворками.

Сейчас vConsole используется как официальный инструмент отладки WeChat Mini Programs.


Основные возможности

  • Логи (Logs): console.log|info|error|...
  • Сеть (Network): XMLHttpRequest, Fetch, sendBeacon
  • Элементы (Element): дерево HTML-узлов
  • Хранилище данных (Storage): Cookies, LocalStorage, SessionStorage
  • Выполнение команд JavaScript вручную
  • Настроечные плагины

Дополнительные детали можно найти на нижеприведённых скриншотах.


Версионность

Последняя версия: npm version

Подробное описание каждой версии доступно в разделе Changelog.


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

Подробные методы использования представлены в руководстве пользователя.

Добавление vConsole в проект осуществляется несколькими способами:

Метод 1: Использование npm (рекомендуется)

$ npm install vconsole

Импортировав и инициализировав, вы можете использовать функцию console.log, аналогично Chrome DevTools.

import VConsole from 'vconsole';

const vConsole = new VConsole();
// Или используйте конфигурационные параметры при инициализации, подробнее см. документацию
const vConsole = new VConsole({ theme: 'dark' });
```// Теперь вы можете использовать методы консоли и т.д., как обычно
console.log('Привет мир');

// После завершения отладки, удалите vConsole
vConsole.destroy();

Метод 2: Использование CDN для прямого внедрения в HTML

<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
  // По умолчанию VConsole будет доступен через `window.VConsole`
  var vConsole = new window.VConsole();
</script>

Доступные CDN:


Пример работы на мобильном устройстве

http://wechatfe.github.io/vconsole/demo.html


Скриншоты

Обзор

Светлая тема

Темная тема

Панель логов

Стили логов

Yöntem> Командная строка

Панель System

Информация о производительности

Запись логов в различные панели логов
console.log('вывод в панель Log')
console.log('[system]', 'вывод в панель System')

Панель Network

Детали запросов и ответов

Панель Element

Просмотр структуры объектов HTML

Панель Storage

Добавление, редактирование, удаление, копирование Cookies / LocalStorage / SessionStorage

![](./doc/screenshot/plugin_storage.jpg)

Документация

vConsole:

Персонализированные плагины:


Список сторонних плагинов


Общение и обратная связь

QQ группа: 497430533


Лицензия

MIT License

Опубликовать ( 0 )

Вы можете оставить комментарий после Вход в систему

1
https://api.gitlife.ru/oschina-mirror/Tencent-vConsole.git
git@api.gitlife.ru:oschina-mirror/Tencent-vConsole.git
oschina-mirror
Tencent-vConsole
Tencent-vConsole
dev