Google Chrome и Mozilla Firefox позволяют настраивать сообщения, представленные в консоли, с помощью метода console.log. Но для чего это может быть полезно? Ну, я не могу дать вам правильный ответ, но я думаю, что вы будете использовать, чтобы ваши отладочные сообщения выглядели круче.
настройка
Для настройки с помощью css мы будем использовать идентификатор% c [символов], чтобы включить эту функцию в строке первого параметра, вторым параметром будет строка css, которая будет применена к сообщению, например:
console.log('%cThe library says : you rocks !', 'background: #005454; color: #BFF8F8');
Предыдущий код должен выводить что-то вроде:
Вы можете даже комбинировать и настраивать с помощью css разные строки только в одном сообщении, идентификатор% c помогает консоли отличить строку от другой:
% cЭто первый блок, и% cHere начинает второй блок, а% cHere третий
Вся строка должна быть инкапсулирована в первом параметре функции console.log, а затем в другие параметры соответственно в строку css, например:
console.log("%cString1 "+"%cString2","color:blue;","color:orange;");
Предыдущий код должен выводить что-то вроде:
Старые версии Chrome
В Google Chrome В Firefox (более старые версии -32) эта функция недоступна, однако существуют стандартные функции консоли, которые уже настроены:
console.info("Important information"); // displays a blue circle with an i before the string
console.warn("Warning, don't do that"); // displays a white triangle (warning symbol) with an exclamation characterИ должен выглядеть так:
Добиться чего-то более удивительного
Хотя использовать просто css для настройки сообщения журнала довольно впечатляюще, есть нечто более впечатляющее, чем это! Настройте свои журналы с разметкой, однако эта функция достигается с помощью библиотеки.
Библиотека Журнал и вы можете увидеть рабочую демонстрацию Вот. Тогда вы сможете вставить разметку (Узнайте больше о разметке здесь) в качестве первого параметра функции log:
log('this is *italic string*'); // output italic string with italic style
log('this is [c="color: red"]red[c] and this is [c="color: blue"]blue[c]');
