Вы можете использовать CSS для настройки сообщений на консоли, как вы хотите. И когда мы говорим, как вы хотите, мы действительно имеем в виду это. Facebook использует стиль, чтобы показывать пользователям предупреждение при доступе к консоли (из-за атаки selfxss):
Разумно не так? Но вы хотите использовать изображение вместо стиля? Ты можешь это сделать ! В этой статье вы узнаете, как отображать изображения на консоли с помощью библиотеки console.image.
Использование console.image
В консоли нет такого метода, как console.imageОднако благодаря console.image библиотека написана @adriancooney, Вы сможете легко отображать изображения (он даже поддерживает GIF-файлы) на консоли. Чтобы начать работу с этой библиотекой в своем проекте, загрузите копия минимизированного кода или же исходный код и добавьте ссылку на файл в вашем документе, используя тег script:
Стоит сказать, что это работает только в консоли браузера, а не в терминале в случае Node.js. После этого вы сможете получить доступ к console.image метод с JavaScript.
console.image Метод ожидает URL-адрес изображения, которое должно отображаться в консоли:
console.image("http://i.imgur.com/hv6pwkb.png");
console.image("http://i.imgur.com/hv6pwkb.png");
console.image("http://i.imgur.com/hv6pwkb.png");
console.image("http://i.imgur.com/hv6pwkb.png");Вы также можете отобразить URI данных base64:
console.image("data:image/gif;base64,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");Веселиться
По неизвестным причинам библиотека позволяет отображать мемы в консоли и отображать на них некоторый пользовательский текст (динамически). Для этого вы можете использовать console.meme функция. Этот метод ожидает в качестве первого аргумента текст, который должен быть помещен в верхней части изображения, в качестве второго аргумента текст, который должен быть показан в нижней части изображения, в качестве третьего аргумента — имя мема, который следует использовать, и в качестве четвертого и пятый аргумент ширина и высота (соответственно) изображения, которое будет отображаться в консоли:
console.meme("Not sure if memes in dev tools is stupid", "or disastrous.", "Not Sure Fry", 400, 300);Заметка
Вместо предоставления имени мема для отображения, вы можете изменить его на URL изображения вместо этого или на представление URI данных base64.
Это должно отобразить на консоли следующее изображение:
Возможные варианты мемов:
- «10 Парень»
- «3-й Мир Успех Малыш»
- «Проблемы 90-х»
- «Aaand It Gone»
- «Актуальная консультация кряквы»
- «Совет собаки»
- «Совет Бога»
- «Почти политкорректное быдло»
- «Я единственный»
- «Древние инопланетяне»
- «Раздраженный Пикард»
- «Раздражающий друг детства»
- «Раздражающая девушка Facebook»
- «Анти-шутка курица (петух)»
- «Неуклюжий пингвин»
- «Назад в мой день дедушка»
- «Bad Advice Mallard»
- «Неудача Брайан»
- «Беар Гриллс»
- «Готовься»
- «Капитан Очевидность»
- «Химия Кот»
- «Колледж Первокурсник»
- «Колледж Либерал»
- «Снизительная Вонка»
- «Исповедь медведя»
- «Исповедь Малыш»
- «Смущенный Гэндальф»
- «Заговор Киану»
- «Мужество Волка»
- «Сайт знакомств Убийца»
- «Депрессивная Собака»
- «Пьяная малышка»
- «Английский ублюдок»
- «Зловещий Енот»
- «Первый день в интернете Малыш»
- «Проблемы Первой Мировой Кошки»
- «Первая мировая проблема»
- «Навсегда в одиночестве»
- «Вечно обиженная мать»
- «Грязная холостяцкая лягушка»
- «Грязная девичья лягушка»
- «Friendzone Fiona»
- «Разочарованный Фарнсворт»
- «Трахни меня, верно?»
- «Бандитский малыш»
- «Хорошая девочка Джина»
- «Хороший парень Грег»
- «Бабушка находит интернет»
- «Не дает мне спокойно жить»
- «Сердитый Кот (Тард)»
- «Большие ожидания азиатского отца»
- «Хипстер Бариста»
- «Ужасный Дом Гость»
- «Я смею тебя, Сэмюэл Джексон»
- «Я должен купить лодку»
- «Я тоже люблю жить опасно»
- «Идиот Nerd Girl»
- «Безумие Волк»
- «Джокер Потеря разума»
- «Жозеф Дюкре»
- «Хромой Шутка Угорь»
- «Хромой Пан Енот»
- «Ленивый колледж старший»
- «Безумная Карма»
- «Мастурбирующий Спайди»
- «Матрица Морфеус»
- «Майонез Патрик»
- «Музыкально забывающий 8-й класс»
- «Не уверен, Фрай»
- «Забывчивая Пригородная Мама»
- «Не просто»
- «Очень привязанная подруга»
- «Чрезвычайно мужественный человек»
- «Параноидальный попугай»
- «Pedobear»
- «Пеппердж Фарм помнит»
- «Philosoraptor»
- «Приоритет Питер»
- «Раста учитель науки»
- «Жена Реддитора»
- «Месть группы Кид»
- «Факты о Шруте»
- «Мозг подонка»
- «Подонок Стейси»
- «Подонок Стив»
- «Сексуально забытый носорог»
- «Укрытие Загородной Мамы»
- «Заткнись и возьми мои деньги»
- «Скептически настроенный малыш третьего мира»
- «Самодовольный Спанч Боб»
- «Социально удивительный пингвин»
- «Успех Малыш»
- «Успешный черный человек»
- «Внезапная Ясность Кларенс»
- «Утка, пораженная технологиями»
- «Самый интересный человек в мире»
- «Рента слишком высока»
- «Жесткий Губка Боб»
- «Бесполезный учитель старших классов»
- «Месть папы»
- «Какой сейчас год?»
- «X, X Везде»
- «Да, это было бы здорово»
- «Йо Дауг Ксибит»
- «Ты плохой, и ты должен чувствовать себя плохо»
- «Ты собираешься плохо провести время»
Если вы работаете с canvas над документом и хотите показать их результат на консоли, вы можете использовать другую библиотеку для достижения того же, а именно console.snapshot.
Удачной отладки!
