Консоль и инспектор браузера (Инструменты разработчика)

Загрузка...

Возможно, начинающим разработчикам не известно о такой полезной функции браузера как «Инструменты разработчика«. Как мне показалось использовать данный инструмент значительно удобней в браузере Firefox, но во время вёрстки, или разработки Jquery скриптов, использовать нужно и Google Chrome. Дело в том, что вёрстка новых блоков на сайте, внешне может отличаться в разных браузерах, поэтому Chrome, и Safari нужен хотя бы для внешнего просмотра выполненной работы.

Как запустить инструменты разработчика?

В браузере Google Chrome и Firefox, запустить приложение можно с помощью клавиши F12.

Для чего нужна консоль?

Консоль очень важная, и иногда безумно полезная функция, ведь на стадии разработки Js скриптов могут возникать ошибки, ну например не закрыли кавычку, или неправильно указали название функции.

Без консоли вам придётся перебирать весь код ,и искать где именно закралась та самая ошибка. В консоле данная ошибка будет показана красным цветом, причём можно посмотреть ни только файл, но и номер строки где именно она произошла.

Для примера я возьму простой Jquery скрипт, и целенаправленно сделаю в нём ошибку.

Инспектор показывает следующее:

SyntaxError: expected expression, got ';'

Теперь откроем файл в котором вызвана ошибка.

И мы видим, что я забыл закрыть скобку

Я уверен, что смысл данного инструмента всем понятен, поэтому перейдём к инспектору.

Для чего нужен инспектор?

С одной стороны у любого сайта можно посмотреть исходный код, и даже «вытащить» css отдельного блока, с вопросом а как они это сделали?

С другой стороны с помощью инспектора можно на лету редактировать иди удалять css стили, править html шаблоны, чтобы посмотреть как именно будет выглядеть сайт после его правки, при этом не внося изменения в файлы по ftp или в админ. панели вашей CMS.

Сеть

Ещё одной очень полезной функцией является «Сеть», с её помощью можно определить самые большие по объёму скрипты, а так же узнать что лишнее подгружается на сайте. Например можно обнаружить вредоносный скрипт, который грузится вместе с главной, или внутренней страницей.

Адаптивный дизайн

Об этой функции должен знать каждый верстальщик, ведь с ей помощью можно посмотреть как выглядит сайт на мобильных устройствах, будь это планшет или мобильный телефон. По умолчанию доступны разные моб.устройства: Iphone 6/7/8, Ipad Pro, Ipad Mini, но это список можно увеличивать самостоятельно.

Сегодня мы кратко рассмотрели Инструменты разработчика, не вижу смысла описывать каждую функцию по отдельности, вы и сами сможете самостоятельно это сделать, ведь функционал не требует установки дополнительных плагинов.