JavaScript - добавление стиля к тексту журнала консоли

Недавно я вошел в свою учетную запись FB в браузере Chrome. Когда я открыл инструменты разработчика, я увидел что-то вроде этого:

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

Теперь я знаю, что можно добавить что угодно в консоль, используя функцию console.log javascript. Но мой вопрос: как они добавили стиль к тексту? Например. "Останавливаться!" написан красным тахомским шрифтом с черной каймой и увеличенного размера. Как они это делают?


javascript css console.log
person Ruchir Gupta    schedule 18.07.2014    source источник

Ответы (1)


arrow_upward
73
arrow_downward

У Адди Османи есть хорошее объяснение:

https://plus.google.com/+AddyOsmani/posts/TanDFKEN9Kn (archive.org)

Стилизованное ведение журнала консоли в Chrome DevTools (Canary)

Благодаря г-ну +Mike West вы теперь можете добавлять стиль в свой журнал консоли через %c, точно так же, как в Firebug. например

console.log("%cBlue!", "color: blue;");

Такие блоки, как console.log('%cBlue! %cRed!', 'color: blue;', 'color: red;');, также теперь поддерживаются :)

Хотя большинство людей, вероятно, будут использовать это для практических целей, с ним также можно немного повеселиться :) (см. Ниже)

Чтобы не отставать, вот что придумал +Mike West несколько дней назад

;)

Соответствующее изменение: http://trac.webkit.org/changeset/130941

По сути, вы можете использовать параметр %c для передачи стилей CSS. Например, попробуйте следующее в консоли Chrome:

console.log("%cBlue! %cGreen", "color: blue; font-size:15px;", "color: green; font-size:12px;");

person khalid13    schedule 18.07.2014
comment
Это правильно, но, как правило, желательно, чтобы вы хотя бы перефразировали ссылку, на случай, если ссылка когда-нибудь выйдет из строя. - person Mike Cluck; 18.07.2014
comment
@MikeC Добавлено в правке :) - person khalid13; 18.07.2014
comment
@ Khalid13 Понял. Еще одна вещь, которую я узнал из этого поста. Вот как Chrome показывает веб-разработчикам предупреждение об использовании dppx вместо dpi в медиа-запросах. [ссылка] (imgur.com/5UGcVOw) - person Ruchir Gupta; 18.07.2014
comment
@MikeC извините, я новичок в StackOverflow. Что такое перефразировать ссылку? Я спрашиваю, чтобы иметь это в виду, отвечая кому-то другому. - person Ruchir Gupta; 18.07.2014
comment
@RuchirGupta Перефразирование просто означает суммирование информации. По сути, вы берете важную информацию из ссылки и пишете ее в ответе. - person Mike Cluck; 18.07.2014
comment
Тай! Просто добавлю, что разрывы строк (\n) тоже работают, какие еще есть секреты? :) - person NiCk Newman; 28.08.2015
comment
есть ли способ установить стиль по умолчанию для консольных сообщений - person ArUn; 28.11.2016
comment
Это поддерживается не во всех браузерах. Хром и ФФ в порядке. IE11 нет. Не знаю о других. Есть ли способ понюхать эту функцию? - person Okonomiyaki3000; 24.01.2017
comment
Кажется, это работает только в первом параметре, т.е. console.log('%cyellow', 'background: yellow') работает, но не console.log(123, '%cyellow', 'background: yellow'). Есть ли трюк, чтобы сделать это? - person ᆼᆺᆼ; 26.09.2017
comment
Немного поздно, но %_ для любого _ является заполнителем форматирования, они работают только в первой позиции. В приведенном выше случае работает console.log('%d %cyellow', 123, 'background: yellow'). MDN содержит дополнительную информацию. - person Simon Buchan; 17.07.2018
comment
Ссылка не работает, потому что Google+ закрыт. - person Anwar; 06.04.2019
comment
@Анвар Спасибо. Сейчас я добавил ссылку на archive.org и скопировал ее основной текст в цитату. - person Timo Tijhof; 01.05.2020