25 июл 2018
Насколько крут хром? С моей точки зрения, это лучший браузер на рынке.
Он простой и удобный.
Chrome предлагает не только очень хороший браузер, но и замечательный инструмент разработки, DevTool.
DevTool, мощный и полный функций, если вы веб-разработчик или немного опыта в этой области, вы согласитесь со мной.
В этой статье (и я надеюсь показать больше трюков в следующих публикациях) я покажу некоторые полезные функции, которые, возможно, вы не знаете о DevTool.
Начнем с основного. Какую функцию вы чаще всего используете в Chrome?
Держу пари console.log.
Я использую его каждый раз на этапе отладки; является одним из наиболее часто используемых и одним из самых злоупотребляемых (но сейчас не в этом суть).
Console.log более мощный, чем я думал.
Я не знал, что он похож на printf из c.
Итак, в нескольких словах, первый аргумент - это печатаемая строка, но если в ней используется какой-то специальный символ, они заменяются другим аргументом метода.
E.g
console.log("An example is more %s than %i words", "clear", 1000);распечатает:
"An example is more clear than 1000 words".Много раз, если бы я написал что-то вроде этого:
var object = {data: "My data"}; console.log("I received this object: " + object);и я понял это
I received this object [object Object]и я не мог видеть значение объекта.
Поэтому вначале я разделил журнал консоли на два отдельных вызова.
Не так уж и приятно, правда ?!
Это лучший способ:
var object = {data: "My data"} console.log("I received this object %o" , object)а затем можно увидеть текст и содержание объекта.
I received this object {data: "My data"}Если объект является элементом DOM, можно выбрать, хотим ли мы видеть представление DOM или представление объекта.
E.g.
var domElement = document.querySelector("#you-got-it"); console.log("The domElement can be show like this %o ...", domElement); console.log("... or like this %O ...", domElement);Примечание: не стесняйтесь открывать консоль на этой странице и запускать этот код :)
* Для тех, кто читает с носителя, вы должны запросить:
document.querySelector(‘[data-image-id=”0*N7y8AMq3-fk8MOMA.jpg”]’)
Завершая этот краткий обзор функций журнала консоли, я покажу вам забавную вещь.
Знаете ли вы, что вы можете стилизовать вывод журнала консоли?
Да-а-а! Это возможно!
Используя % c, за которым следует действующий синтаксис CSS, можно получить более оригинальный вывод в консоль.
Давайте попробуем!
console.log('%cLook how Amazing I am', 'background: #222; color: yellow; font-size: 50px; margin: 20px; padding: 30px');После этого вы можете увидеть что-то вроде этого.
Это круто, но это просто занятие для ботаников, честно говоря, я никогда не использовал его в реальных проектах.
Итак, все, ребята. Если вы найдете что-то, чего не знали или вам просто понравилось, посмотрите эту подборку.
PS. Все эти методы также действительны для console.error, console.warn.
Первоначально опубликовано на blog.gixlg.it.
