Слияние кода завершено, страница обновится автоматически
English | Russian
$ npm install vconsole
import VConsole from 'vconsole';
const vConsole = new VConsole();
// Или использовать конфигурационные параметры при инициализации
const vConsole = new VConsole({ тема: 'темная' });
// Вызовите методы консоли для вывода логов
console.log('Привет мир');
// После завершения отладки можно удалить vConsole
vConsole.destroy();
Обратите внимание, что
VConsoleявляется прототипом vConsole, а не уже созданным объектом.
Поэтому до того как вы создадите новый экземпляр с помощьюnew, vConsole не будет вставлен в страницу.
Или вы можете использовать CDN для внедрения vConsole:
<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
// VConsole автоматически подключается к `window.VConsole`
var vConsole = new window.VConsole();
</script>
Доступные CDN:
После импорта требуется выполнить инициализацию vConsole:
var vConsole = new VConsole(опция);
опция — это необязательный объект, подробное описание конфигураций см. в разделе общие свойства и методы.
Обновление опции с помощью setOption():
// Установите значение для конкретного ключа:
vConsole.setOption('log.maxLogNumber', 5000);
// Полностью замените объект:
vConsole.setOption({ log: { maxLogNumber: 5000 } });
```---
### Вывод логов
Как и на компьютерах, используйте методы `console.log()` и т.д. для вывода логов:
```javascript
console.log('Привет мир');
Если модуль vConsole ещё не загружен, то console.log() будет выводиться в стандартной консоли; после загрузки vConsole логи будут выводиться в переднем конце страницы и в стандартной консоли.
Если вам нужно, чтобы логи выводились только в vConsole, воспользуйтесь плагинами:
vConsole.log.log('Привет мир');
Поддерживается пять различных типов логов, каждый из которых имеет уникальный цвет:
console.log('foo'); // белый фон, чёрный текст
console.info('bar'); // белый фон, фиолетовый текст
console.debug('oh'); // белый фон, жёлтый текст
console.warn('foo'); // жёлтый фон, жёлтый текст
console.error('bar'); // красный фон, красный текст
Поддерживает следующие методы консоли:
console.clear(); // Очистка всех логов
console.time('foo'); // Запуск таймера с именем foo
console.timeEnd('foo'); // Остановка таймера foo и вывод времени выполнения
Можно использовать %c для применения стилей:```javascript
console.log('%c blue %c red', 'color:blue', 'color:red'); // blue red
console.log('%c FOO', 'font-weight:bold', 'bar'); // FOO bar
console.log('%c Foo %c bar', 'color:red'); // Foo %c bar
> Только первый аргумент поддерживает форматирование с помощью `%c`. После `%c` обязательно должно быть пробел. Как только встречается `%c`, все последующие строковые аргументы будут заменены HTML стилем для `%c`; незаменённые `%c` и остальные аргументы будут выведены как обычные логи.---
### Использование строковых замен
Можно использовать `%s, %d, %o` для форматирования вывода. Ключевые слова должны быть заштрихованы пробелами.
- `%s`: Вывод строки. Объекты, отличные от строк, преобразуются в строки.
- `%d`: Вывод целого числа.
- `%o`: Вывод объекта. Можно щелкнуть, чтобы раскрыть детали объекта.
```javascript
console.log('Привет %s, Я %s', 'Foo', 'Bar'); // Привет Foo, Я Bar
console.log('У меня было %d пирожных', 3); // У меня было 3 пирожных
console.log('Этот %o большой', obj); // Этот [[obj]] большой
Поддерживается использование [system] в качестве первого аргумента для вывода логов в панели System:
console.log('[system]', 'foo'); // foo будет выведен в панели System
console.log('[system] bar'); // Эта строка лога будет выведена в панели Log, а не в System
Если вы пишете плагин для пользовательской панели логов, можно также использовать вышеупомянутое форматирование для вывода логов в пользовательскую панель:
console.log('[myplugin]', 'bar'); // bar - это ID вашего пользовательского плагина
Все запросы XMLHttpRequest | fetch | sendBeacon отображаются в панели Network.
Если вы хотите, чтобы один из этих запросов не отображался в панели, добавьте свойство _noVConsole = true к объекту XHR:
var xhr = new XMLHttpRequest();
xhr._noVConsole = true; // Не будет отображаться в панели
xhr.open('GET', 'http://example.com/');
xhr.send();
```Если вы хотите показывать пользовательские запросы, попробуйте методы [плагина Network](./plugin_properties_methods_RU.md):
```javascript
vConsole.network.add(...);
Примечание: В данном случае, чтобы сохранить структуру и форматирование, было решено оставить ссылку на исходный язык (CN) без изменения.
Фраза "Перейти" является переводом "前往", а "документация索引" — это копия исходной строки, так как она содержит кириллицу и иероглифы вместе, что обычно используется в международных проектах для сохранения информации о культуре и локализации.
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )