Режим разработчика в Google Chrome

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

Зачем нужен режим разработчика в Google Chrome

Режим разработчика нужен следующей категории лиц:

• разработчикам расширений и веб-разработчикам;
• тем кто изучает html и css;
• тестировщикам готового продукта.

Это часть браузера доступна из коробки и ничего кроме самого браузера устанавливать не нужно.

Как открыть Chrome DevTools

Открывается «Инструмент разработчика» через главное меню Хрома.

1. Жмём на кнопку в виде трёх полос и здесь наводим курсор на пункт «Дополнительные инструменты».
2. В следующем всплывающем окне выбираем, собственно, «Инструменты разработчика».
3. Или нажимаем комбинацию клавиш Ctrl + Shift + I для Windows и Command + Option + I на MacOS.
4. Либо можно просто кликнуть правой кнопкой мыши по любому элементу и в контекстном меню выбрать «Просмотреть код».

Иногда бывает нужно посмотреть на исходник страницы и в этом случае можно выбрать «Просмотр кода страницы» или воспользоваться горячими клавишами, например, F12 для Windows. Открывается он в отдельном окне и представлен в виде сплошного кода, который не редактируется. Его можно просмотреть, скопировать, перейти по имеющимся к коде ссылкам. 

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

• В правой части окна инструментов расположена кнопка, которая закрывает инспектор.
• Рядом кнопка «кебаб» – при нажатии на нее появляется выпадающее меню, с перечнем других функций:
• Dock Side  — окно инструментов разработчика можно перевести несколько режимов:
  • слева;
  • снизу;
  • справа;
  • в отдельном окне.

• Hide console drawer скрывает консоль в нижней части окна — быстро открыть/закрыть консоль, находясь на любой вкладке, можно клавишей Esc.

Инструмент Search позволяет искать по всем файлам ресурса, связанных с текущей веб-страницей. Чтобы активировать поиск нажмите комбинацию клавиш Ctrl + Shift + F.

Здесь есть дополнительные инструменты и полезные шорткаты, а также настройки и документация. Возле кнопки меню отображаются иконки предупреждения и ошибок, если они есть на странице. При клике на неё можно перейти к просмотру подробностей.

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

После того как вы активировали этот режим вверху вы можете выбрать тип устройства, который вы хотите эмулировать. Здесь представлены несколько моделей Nexus, IPhone и IPod. Выбрав устройство, вы увидите его разрешение экрана, физический его размер относительно размера вашего экрана, а также появится возможность сменить ориентацию устройства с вертикальной на горизонтальную и наоборот.

В самом низу этого выпадающего списка есть пункт Edit, нажав на который мы попадаем в меню редактирования устройств, где мы можем добавить другие заготовленные устройства или удалить любое из уже выбранных.

Если вам не подходят варианты предложенных устройств, то вы можете выбрать вариант Responsive и задать разрешение экрана вручную.

Вкладки инструмента разработчика

Здесь очень много вкладок, каждая из которых отвечает за тот или иной инструмент или помогает в работе над конкретным участком кода. Вкладки можно перемещать относительно друг друга. Различные расширения для браузера могут добавлять сюда новые вкладки.

Первая вкладка представляет из себя то что называется «дом дерева»:

• узлы можно сворачивать/разворачивать;
• перемещать относительно друг друга;
• редактировать имена тегов и атрибуты.

Для быстрого перемещения используется стрелки на клавиатуре. Поиск в древовидной структуре сайта осуществляется с помощью комбинации клавиш Command + F на Mac или Ctrl + F на Windows. Уменьшение или увеличение масштаба осуществляется с помощью клавиш Command + + или  или Ctrl + + или . Кликнув на имя элемента, на атрибут или на текст ноды (Node) их можно отредактировать.

Кликом по ноде правой кнопкой мыши на теговой части вызывается контекстное меню, где можно:

• добавить атрибут к ноде – Add attribute;
• редактировать атрибут – Edit attribute;
• редактировать ноду со всеми дочерними элементами в режиме простого текста;
• удалить элемент — Delete element. 

Скопировать: 

• весь HTML код с оборачивающим тегом;
• полный селектор, ведущий к этой ноде, body или head;
• скопировать JS;
• скопировать стили;
• XPath селектор, предназначенный для XML-документов;
• И собственно «Вырезать», «Скопировать» или «Вставить».

Можно принудительно перевести ноду в различные режимы:

• :active – создает эффект, как будто мы зажали на элементе левую кнопку мыши;
• :hover – воспроизводится эффект наведения курсора;
• :focus – как-будто поставили на элементе фокус. Например, клавишей Tab.
• :visited – изменяет цвет ссылки на фиолетовый, как-будто мы уже ранее перешли по ней.

Scroll into view – переход к ноде в области просмотра. Удобная штука особенно когда разбираешься в чужом коде.

Поставить breakpoint (Break on) на события:

Последний пункт меню позволяет создать точку остановки внутри DOM, что часто является удобной функцией при отладке.

• Модификация любого дочернего элемента ноды;
• Модификация атрибута ноды;
• Удаление ноды.

Если кликнуть правой кнопкой по текстовой части ноды, то вариантов чуть поменьше.

В нижней части окна разработчика есть что-то вроде хлебных крошек. Это строка с полным селектором для выбранной ноды со всеми промежуточными элементами, начиная от корневого HTML.

Кнопка со стрелкой в левом верхнем углу позволяет выбрать любой элемент в области просмотра страницы. После активации этой кнопки и при наведении на любой элемент он подсвечивается, над ним появляется всплывающее окно с подробной информацией о данном объекте. Также он будет подсвечен в древовидной структуре кода.

В правой части вкладки мы видим каскад CSS свойств выбранного элемента. В самом низу вычисленная блочная модель элемента: position, margin, border, padding и внутренняя концертная область. Выше всегда расположены псевдоэлементы after и before, если они есть.

Выше начинается сам каскад. Стили наследуются от элементов верхнего уровня, присвоенным к выделенной ноде. То есть по принципу – от общего к частному. Здесь же можно отследить какие свойства перетираются, какие свойства неприменимы к этому элементу или вовсе написаны с ошибкой.

Справа от описания стилей можно видеть название файла, откуда взяты эти стили. Кликаем и попадаем в место и файл, в котором определено само стилевое правило.

В некоторых случаях можно здесь можно заметить строку user agent stylesheet, это стили браузера по умолчанию. Они наименее приоритетные и переопределить их можно практически любым способом задания CSS правил.

В самом верху секция element.style позволяет нам удобным образом определить содержимое элемента style текущего выделенного элемента.

Фильтр позволяет найти что-нибудь конкретное, свойство или его значение.

Также здесь есть дополнительные функции:

• :hov — это дублирование пунктов контекстного меню меню для принудительного присвоения состояний.
• :cls — позволяет отобразить анимацию элемента и присвоить ему искусственно селекторы со стилей, которые сбрасываются после перезагрузки страницы.

Следующая вкладка Computed на этой панели показывает полную вычисленную блочную модель и стили для текущего выделенного элемента.

Вкладка DOM Breakpoints — это описанные выше брейкпоинты на модификацию или удаление ноды. Если поставить брейкпоинт описанным ранее способом здесь он отобразиться. Здесь собраны все брейкпоинты для всех нод. Ими можно удобно управлять: включать/выключать без удаления.

Это работает следующим образом. Когда условия указанного брейкпоинта выполняется, то браузер останавливает выполнение кода в том месте, которое было инициатором.

На вкладке Properties вы можете ознакомиться со всеми доступными свойствами текущего HTML элемента DOM дерева, просмотреть их значения и зависимости.

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

Давайте разберем весь функционал по порядку:

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

Здесь будет отображена следующая информация:

• о названии файла;
• его статус, имеется в виду статус, который отдаст сервер, когда получит запрос на него;
• инициатора этого файла — кто вызвал данный файл или другими словами кому нужен этот файл;
• размер данного файла;
• время за которое он был загружен;
• таймлайн, в котором можно отследить последовательность загрузки файлов.

Ниже таблицы строка, которая оповещает нас о общем количестве запросов, сделанных к серверу. Общем количестве переданных данных, а также общее время загрузки всех файлов.

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

Руководствуясь всеми этими данными становится намного проще оптимизировать скорость загрузки страницы, так как вы можете видеть, какие файлы дольше всего загружаются или имеют большой вес и оптимизировать это. 

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

Еще выше над фильтрами есть более интересные и полезные функции.

• Record — кнопка по умолчанию включена и записывает всю историю загрузок, это именно то о чем мы говорили до этого.
• Clear — вторая кнопка очищает записанную историю.
• Filter — следующая кнопка просто скрывает или показывает строку фильтров.

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

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

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

Опция которую мы рассмотрим далее тоже очень важна, так как она позволяет имитировать скорость соединения пользователя. Допустим вы можете выставить скорость соединения сети 3G и, перезагрузив вашу страницу, наблюдать с какой скоростью ваша страница будет загружаться на мобильных устройствах пользователей. Это очень важно с точки зрения построения отображения, так как на этапах медленной загрузки пользователь может увидеть вашу страницу в таком виде, в котором вы бы не хотели её показывать. Это будет очередной подсказкой вам к тому что стоит оптимизировать, и что именно тормозит загрузку вашей страницы.

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

Консоль, это один из основных инструментов разработчика. В нее могут выводиться важные сообщения о работе вашего кода, ошибки, а также логи прописанные разработчиком. Прямо здесь можно выполнять JavaScript код, и пользоваться другими её скрытыми возможностями.

Рассмотрим более подробно функции консоли разработчика:

Чтобы очистить консоль нужно кликнуть правой клавишей в консоли и выбрать пункт clear console, или вызвать метод clear() прямо в консоли, или из кода, использовав для этого console.clear();

Пункт Log XMLHttpRequest в контекстном меню — это функция включает логирование всех XHR запросов в консоли.

У консоли есть много различных методов, мы познакомились с одним из них который называется clear(). Так же существуют другие методы:

Например:

• console.error() — для вывода ошибок, которые будут подсвечены красным в консоли;
• console.log() — для вывода любой информации, которую мы хотим увидеть в консоли, очень часто используется при отладке кода;
• console.warn() — для вывода оповещений в консоли, которые будут подсвечены желтым цветом с отличительным знаком.
• console.assert() — необходим для проверок. Первым аргументом он будет принимать условие, а вторым текст ошибки. Если переданное условие будет возвращать false, то выведется текст ошибки.
• console.group() — возможность группировать вывод. С его помощью мы задаем название для группы, а также указываем откуда начинается данная группа, все последующие методы вывода, которые будут использованы будут объединены в эту группу до того момента пока не будет вызван метод console.groupEnd().

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

Фактически на этой вкладке мы можем просмотреть все файлы, которые подключены к нашей странице и посмотреть их содержимое.

Также здесь существует очень удобная возможность создавать точки остановки, так называемые брейкпоинты. Мы можем выбрать определенную строку, отметить её как точку остановки и тогда при исполнении всего кода, выполнение остановится именно на этой строке.

Использовать такие точки очень удобно при отладке кода. Более того их можно создавать внутри из кода. Достаточно в том месте, где вы хотите создать точку остановки, вставить команду debugger. После того как срабатывает точка остановки, исполнение кода в браузере замирает, и появляется возможность продолжить выполнение кода, нажав на стрелку. Выполнение продолжится до следующей точки, если таковой нет, то код выполнится до конца.

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

На этой вкладке дублируется та же строка Timeline, которую мы видели на вкладке Network, однако в более развернутом варианте, что повышает степень удобства использования этого инструмента.

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

Внутри вкладки Memory неё есть несколько профайлеров, с их помощью можно отслеживать нагрузку, которую оказывает выполнение кода на ваш компьютер:

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

На вкладке Application мы можем получить информацию о некоторых хранилищах, которые нам доступны. А именно: это Local Storage, заглянув в который мы можем посмотреть какие переменные хранит страница и их значения. Также Session Storage в котором также хранятся данные по принципу ключ — значение, как правило это данные  о сессии пользователя. Здесь же у нас хранилище в котором хранятся Куки, а также Cache Storage.

Если вы используете какие-то из этих хранилищ, и содержимое вы всегда можете удобно просмотреть на данной вкладке.

На этой вкладке вы можете ознакомиться с протоколом безопасности, если таковой имеется, а также просмотреть данные о сертификате данного подключения.

Это полезная вкладка которая делает за вас много полезных дел, а именно определяет некоторые проблемы вашего сайта. Проводятся проверки на то включено ли сжатие, включено ли кеширование, также определяются неиспользуемые CSS правила, что означает, что вы подтягиваете какую-то часть ненужного кода.

С помощью этого инструмента можно провести аудит вашей страницы и он вам укажет проблемные места, которые влияют на скорость его работы.