Як створити відформатовані повідомлення журналу консолі javascript


91

Сьогодні я "поплевся" на консолі в Chrome на Facebook.
Дивно, що я отримав це повідомлення в консолі.

Тепер моє запитання:
як це можливо?
Я знаю, що для консолі існує кілька методів експлоата, але як можна зробити таке форматування шрифтів у консолі? (а це console.log?)

Відповіді:


131

Так, ви можете відформатувати console.log()файл приблизно так:

console.log("%cExtra Large Yellow Text with Red Background", "background: red; color: yellow; font-size: x-large");

Зверніть увагу на %cпопередній текст у першому аргументі та специфікації стилю у другому аргументі. Текст буде виглядати як ваш приклад.

Докладнішу інформацію див. У розділі "Виведення консолі стилю з CSS" або документації до консолі FireBug .

Посилання на документацію також містять деякі інші акуратні трюки, такі як включення посилань на об’єкти в журнал консолі.


Можливо, ви захочете перевірити, чи використовується сумісний браузер, перш ніж намагатися використовувати рядки формату console.log, оскільки старі браузери можуть зупинити ваш сценарій за винятком. caniuse каже, що це було представлено у Firefox 9 та Edge 79; Chrome почав підтримувати його, очевидно, за деякий час до Chrome 83, але ми точно не знаємо коли.
Сайлас С. Браун,

38

Спробуйте це:

console.log("%cThis will be formatted with blue text", "color: blue");

Цитуючи документи,

Ви використовуєте специфікатор формату% c, щоб застосувати власні правила CSS до будь-якого рядка, який ви пишете на консолі за допомогою console.log () або пов'язаних методів.

Джерело: https://developers.google.com/web/tools/chrome-devtools/console/console-write#styling_console_output_with_css


7
Привіт downvoter, будь-які коментарі додати? - важко покращити відповідь (яку ви вважаєте недоброю), коли ви не залишаєте коментарів, пояснюючи себе. :)
blurfus

30

Ви також можете відформатувати підрядки.

var red = 'color:red';
var blue = 'color:blue';
console.log('%cHello %cWorld %cfoo %cbar', red, blue, red, blue);

введіть тут опис зображення


4
Зауважте, що стилізувати можна лише в межах першого аргументу, console.logі стилі повинні слідувати негайно.
Qwerty

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.