Devtools что это

Chrome DevTools — Основы современной верстки

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

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

Сейчас все современные браузеры имеют функцию веб-инспектора (инструменты разработчика). Это набор различных приложений и инспекторов, с помощью которых можно, не меняя файлы, добавить стили и элементы HTML-кода. Такие веб-инспекторы позволяют проверить верстку на разных разрешениях экрана, что очень важно при создании адаптивных сайтов. Эта тема будет более подробно разобрана в соответствущем курсе.

В этом уроке мы изучим основные моменты при работе в Chrome DevTools, который встроен в браузер Google Chrome. Принципы, которые будут показаны, также применимы и к инспекторам в других браузерах. Они все похожи, поэтому проблем при переходе из браузера в браузер возникнуть не должно.

Чтобы открыть Chrome DevTools, можно воспользоваться одним из двух путей:

1. Кликнуть правой кнопкой мыши в любом месте страницы и выбрать пункт Просмотреть код элемента (Inspect в английской версии браузера).
2. Воспользоваться комбинацией клавиш Ctrl + Shift + I или F12 для Windows и Linux, или Cmd + Opt + I для операционной системы MacOS.

После открытия вы изначально попадете во вкладку Elements. Это самая важная вкладка для новичков. Остальные вкладки также несут огромное количество полезной информации, но в настоящее время они вам скорее помешают, так как достаточно специфичны. Но давайте вкратце опишем назначение каждой из основных вкладок:

• Elements — здесь показывается весь HTML и CSS код. В этом уроке мы подробнее поговорим об этой вкладке.
• Console — вкладка консоли позволяет смотреть вывод JavaScript, а также писать свой код на этом языке для тестирования и отладки страницы.
• Sources — все подгруженные файлы из всех источников. Здесь хорошо можно отследить, сколько информации вы получаете от внешних ресурсов.
• Network — здесь можно отследить все, что касается загрузки вашего сайта: файлы, их размер, скорость загрузки, тип запроса к сайту, его внутренние части и так далее. В общем, любой запрос, который делает ваш сайт, отображается в этой вкладке.

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

Вкладка Elements

Вернемся к вкладке Elements. Условно она делится на две большие группы — работа с HTML и работа с CSS. Область работы с HTML представлена следующим образом:

Откройте панель на этой странице и попробуйте раскрывать дерево HTML. Вы увидите, что все вложенные блоки отделяются друг от друга отступами, что очень удобно, так как наглядно можно увидеть «глубину» нужного блока. При этом, если кликнуть на любой HTML, то в информационной строке в самом низу будет видна вся вложенность с указанием классов.

На картинке выше эта вложенность следующая:

html body.min-vh-100 div.mb-n5 div.row.no-gutters div.col-sm.overflow-hidden div.my-4

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

  class="min-vh-100">  class="mb-n5">  class="row no-gutters">  class="col-sm overflow-hidden">  class="my-4">А вот и наш выбранный блок :)      

Откройте контекстное меню (правый клик мыши) на любом элементе HTML в веб-инспекторе. Вы увидите все возможные действия с конкретным HTML-элементом.

Давайте взглянем на основные пункты:

• Add Attribute — добавить произвольный атрибут к элементу HTML.
• Edit Attribute — изменить произвольный атрибут у элемента HTML.
• Edit as HTML — возможность изменить HTML. В этом случае для редактирования вам станет доступен блок, который вы выбрали, и все элементы внутри него. Такие элементы называются дочерними. А блок, который вы выбрали, для них будет родительским. Эти два слова вам будут очень часто встречаться при создании верстки.
• Delete Element — удаление элемента из верстки.

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

Вторая область во вкладке Elements относится к CSS.

Это достаточно большая область с различными вкладками. Нас интересуют первые две вкладки:

• Styles — в этой вкладке можно просмотреть/отредактировать/добавить стили для элемента.
• Computed — во вкладке собраны все стили, которые применились к элементу. Это наглядная иллюстрация работы принципа каскадности в CSS. Здесь вы увидите не только те стили, которые указали для элемента, но и те, которые добавились к элементу из наследуемых свойств, а также свойств по умолчанию в браузере. Также в этой вкладке наглядно представлена блочная модель текущего элемента. На ней можно увидеть все, что влияет на высоту текущего элемента.

Вкладка Styles

Вначале рассмотрим основы работы со вкладкой Styles. Внешне она выглядит следующим образом:

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

• margin-bottom
• margin-top
• box-sizing
• display

Эти 4 свойства с помощью селекторов по тегу или селекторам по классам имеют прямое отношение к выбранному блоку. В инструменте показаны не только свойства, но и селекторы, к которым эти свойства применяются. Таким образом, достаточно просто найти нужное место в CSS файле. Помимо этого справа от каждого селектора указан файл, в котором находится селектор и номер строки в файле. Это удобно, но при условии, что вы не используете плагины, которые «сжимают» CSS до одной строки. Тогда эта информация вам может и не помочь.

Ниже этих селекторов можно увидеть блок Inherited from . . Дословно это можно перевести как Наследованные стили от . . На примере выше стили наследуются от селектора body.min-vh-100 . При этом в них выделены те стили, которые непосредственно влияют на элемент. Остальные стили бледного цвета не наследуются.

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

Вкладка Computed

Теперь переключимся на вкладку Computed. Она выглядит следующим образом:

И она делится на несколько основных областей. Это в последний раз, честно 🙂

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

• width — ширина элемента
• height — высота элемента
• border — визуальные границы элемента
• margin — внешние отступы от элемента
• padding — внутренние отступы

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

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

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

Самостоятельная работа

Откройте доступный вам веб-инспектор на этой странице. Попробуйте пройтись по различным вкладкам и посмотреть, какую информацию они несут. Изменяйте HTML-элементы. Добавляйте различные свойства к текущей странице.

Дополнительные материалы

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты

Об обучении на Хекслете

• Статья «Как учиться и справляться с негативными мыслями»
• Статья «Ловушки обучения»
• Статья «Сложные простые задачи по программированию»
• Урок «Как эффективно учиться на Хекслете»
• Вебинар « Как самостоятельно учиться »

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

• 130 курсов, 2000+ часов теории
• 1000 практических заданий в браузере
• 360 000 студентов

Наши выпускники работают в компаниях:

Chrome DevTools: обзор основных возможностей инструмента

Небольшой обзор инструментов разработчика под названием Chrome DevTools. Рассказываем, что это такое и как с этим работать.

Вкратце о DevTools

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

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

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

Давайте обо всем поговорим подробнее и выясним, чем же так хорош Chrome DevTools.

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

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

1. через контекстное меню,
2. через настройки браузера,
3. с помощью сочетания клавиш.

В первом случае нужно кликнуть по любой части страницы, а затем выбрать пункт «Посмотреть код» (не путайте с «Просмотром кода страницы», эта опция показывает исходный код в отдельной вкладке, не запуская DevTools).

Чтобы открыть DevTools через настройки, нужно кликнуть по иконке в виде трех точек в правом верхнем углу. В появившемся списке найти пункт «Дополнительные настройки» и навести на него курсор. А затем выбрать пункт «Инструменты разработчика».

Ну и основной способ, которым вы будете пользоваться чаще всего, когда запомните – горячие клавиши. Вызвать DevTools можно одновременным нажатием клавиш Ctrl + Alt + I в Windows и Cmd + Alt + I в macOS.

Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей

Основные возможности Chrome DevTools

Разберем базовые функции инструментов разработчика в Google Chrome. Посмотрим, что можно делать с веб-страницей, и поймем, почему некоторые разработчики используют DevTools чуть ли не чаще, чем какую-нибудь IDE или текcтовый редактор.

Поиск DOM-элементов

Первое, что вы увидите, когда откроются инструменты разработчика – редактор HTML-кода. Это полноценное DOM-дерево, которое можно просмотреть от и до. И не только посмотреть, но и изменить. Для начала посмотрим, как легко можно найти любой элемент страницы в коде, используя DevTools.

Во-первых, при вызове инструментария можно кликнуть правой кнопкой мыши не по пустому пространству, а по конкретной кнопке или картинке. Тогда при нажатии на «Просмотреть код» в DOM-дереве подсветится выбранный элемент.

Во-вторых, можно воспользоваться отдельной функцией поиска HTML-компонентов. Для этого нужно кликнуть по иконке в виде стрелки в левом верхнем углу окна DevTools, а затем навести курсор на интересующую кнопку/ссылку/картинку и т.п.

Также элементы подсвечиваются при наведении на них мыши в редакторе.

Редактирование HTML

Весь текст на сайте можно редактировать прямо в браузере. Менять любые параметры DOM.

В DevTools отображаются все вложенные элементы сайта (все div, section, footer, p и прочие). Чтобы отредактировать текст в блоке, нужно кликнуть по нему два раза. Текст выделится, и в нем появится курсор.

То же можно проделать с классами и типами данных. Кликнув по имени класса (или самому слову class), вы получите доступ к редактору именно этой части кода. Это удобно, когда нужно скорректировать небольшую часть кода.

Можно заменить сразу большой участок текста или поменять наименования атрибутов. Для этого кликаем правой кнопкой мыши по элементу или его части, а затем выбираем одну из опций. Например, Edit as HTML.

Работа с CSS

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

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

Также в инструментах разработчика Google Chrome много графических элементов управления. Есть визуальная настройка угла наклона градиентов и удобная палитра для выбора цвета.

Сделаем и то, и другое на примере страницы выше. Поменяем через Chrome DevTools цвет кнопки.

Что получится при смене дизайна клавиш и подсветки ссылок:

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

А еще это удобный способ понять, как работают свойства margin и padding.

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

Внесенные изменения можно отследить в графе Changes (в нижнем блоке DevTools, справа от Console). Они оформлены в стиле GitHub. То есть видно и замененный элемент, и его обновленный вариант.

Разработка адаптивного дизайна

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

Чтобы перейти в режим адаптивной верстки, надо кликнуть по кнопке Toggle device toolbar или нажать Cmd + Shift + M.

Над сайтом слева появится новая панель управления с кнопкой Responsive. Кликнув на нее, вы увидите список доступных устройств. Выбирайте то, которое хотите эмулировать, и разметка сайта адаптируется под его разрешение.

Для упрощения процесса верстки под конкретное разрешение, нужно кликнуть по иконке в виде трех точек слева от кнопки запуска режима адаптивной верстки и нажать на строку Show rulers. Появится пиксельная линейка для «подгонки» сайта.

А еще тут можно делать скриншоты сайта в заданном размере. Там же, где находится линейка, есть кнопка Capture screenshot.

Пример внесения изменений в HTML и CSS через Chrome DevTools

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

Сначала ищем кривую кнопку в коде, активировав функцию поиска элемента.

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

Остается скопировать этот код непосредственно в приложение/сайт или сохранить обновленный CSS-файл в папку проекта. Для этого нужно открыть вкладку Sources, выбрать отредактированный файл (он будет помечен звездочкой), затем кликнуть по нему правой кнопкой мыши и выбрать опцию Save as…

Запуск и дебаггинг JavaScript-кода

Инструменты Chrome DevTools позволяют работать не только с CSS и HTML, но и с JavaScript-кодом. Можно запускать произвольные команды через встроенную консоль или подключая дополнительные JS-файлы.

Чтобы открыть JS-файл, нужно перейти во вкладку Sources справа от Elements.

Через консоль также можно отслеживать работу сайта, наблюдая за появляющимися ошибками и особенностями поведения сайта, в частности с помощью функции console.log( ).

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

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

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

• Открываем JavaScript-файл во вкладке Sources.
• Затем переходим в дебаггер. По умолчанию он привязан к нижней границе окна DevTools.
• Выбираем раздел Event Listener Breakpoints.
• В нем ставим галочку напротив действий, которые хотим отслеживать (при их выполнении исполнение кода будет останавливаться).

Безусловно, опций для дебаггинга в DevTools куда больше, но этому стоит посвятить отдельный материал.

Другие возможности DevTools

Далее кратко разберем еще несколько важных вкладок в интерфейсе Chrome DevTools. Это те элементы, на которые стоит обратить внимание в первую очередь. Они отличают инструменты разработчика в браузере Google от аналогичных в других браузерах.

Оптимизация производительности сайта

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

Браузер в автоматическом режиме создает профайл выбранной страницы и делит процесс загрузки на этапы посекундно, отображая информацию, необходимую для рейтинга Web Vitals. Это новый алгоритм оценки сайтов от Google.

Анализ подключения

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

Уровень безопасности сайта

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

Обязательно отслеживайте эту страницу, если рассчитываете на высокие позиции в поисковой выдаче Google.

Lighthouse

Пожалуй, самый удобный инструмент для первичной аналитики ресурса и выявления в нем недостатков. Одной кнопкой можно создать профиль сайта и получить все необходимые сведения о нем. Lighthouse покажет все слабые и сильные места ресурса.

Скорость загрузки и работы, адаптированность под людей с ограниченными возможностями, корректность верстки, адаптация под поисковые машины (SEO), поддержка Progressive Web App и т.п.

Инструменты разработчиков в Safari и в Mozilla Firefox

Естественно, Chrome – не единственный браузер, оснащенный HTML-редактором и дебаггером. Аналогичная функциональность есть в Safari и Firefox. У них зачастую даже интерфейсы схожие. Примерно такие же инструменты для визуального редактирования CSS и т.п.

Важное отличие инструментария в Chrome – наличие аналитических систем в духе Lighthouse. Они позволяют напрямую взаимодействовать с Google. Так проще исправлять ошибки в коде и адаптировать ресурс под требования поисковых машин.

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

Вместо заключения

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

Инструменты разработчика

Инструменты разработчика (от англ. «development tools» или сокращённо «DevTools») — это программы, которые позволяют создавать, тестировать и отлаживать (debug) программное обеспечение.

Современные браузеры имеют встроенные инструменты разработчика, позволяющие просмотреть исходный код сайта. С их помощью можно просматривать и отлаживать HTML сайта, его CSS и JavaScript. Также можно проверить сетевой трафик, потребляемый сайтом, его быстродействие и много других параметров.

Technical reference

• Firefox Developer Tools on MDN
• Firebug (former developer tool for Firefox)
• Chrome DevTools on chrome.com
• Safari Web Inspector on apple.com
• Edge Dev Tools on microsoft.com

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Интересные возможности DevTools для QA

Chrome DevTools — это консоль разработчика, набор инструментов в браузере для создания и отладки сайтов и приложений. С их помощью можно просматривать код, оптимизировать производительность веб-страниц с точки зрения UI и тестировать уже разработанную функциональность. О последнем сегодня и поговорим. Я собрал подборку полезных инструментов внутри DevTools, которые не очень распространены в QA, но при этом могут значительно упростить и ускорить вашу работу. Отмечу, что говорить мы будем именно о Chrome DevTools, хотя и в других браузерах есть аналогичные консоли разработчиков. Итак, поехали!

Снимки экрана при загрузке страницы

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

Как сделать серию снимков экрана при загрузке

1. Откройте панель разработчика (F12). 2. Откройте вкладку Network. 3. Нажмите на шестерёнку в правом верхнем углу панели. 4. Включите чекбокс Capture screenshots. 5. Нажмите Ctrl+R. Лента скриншотов появится в верхней части окна. Щелкнув по одному из них, вы сможете последовательно просмотреть все скриншоты с временными отметками и отследить, когда какой элемент появился на странице.

Поиск неиспользуемых CSS и JS в вёрстке

Еще одна интересная и незаменимая при тестировании производительности функция DevTools — обнаружение неиспользуемых в вёрстке CSS и JavaScript. Чем плох «лишний» код? Весь код, в том числе и неиспользуемый, браузер проверяет при каждой загрузке страницы. И чем больше этого неиспользуемого кода, тем дольше страница может прогружаться. А если пользователь зашел на сайт со смартфона, на всё это ещё и лишний мобильный трафик тратится. Неприятно. С помощью DevTools можно найти весь неиспользуемый код и передать эту информацию разработчику в баг-репорте. Возможно, там действительно есть что-то лишнее. Тогда, удалив это, разработчик повысит производительность сайта.

Как найти неиспользуемые CSS и JS в вёрстке

1. Откройте панель разработчика (F12) и вызовите Command Menu (Ctrl+Shift+P). 2. Введите Show Coverage и нажмите Enter. Откроется вкладка Coverage. Дальше будет работать в ней. 3. Нажмите на кнопку Start instrumenting coverage and reload page. 4. После этого в DevTool выведется таблица, где по функциям (или по блокам) будет отображено, сколько на странице неиспользуемого кода. 5. Кликните по одному из пунктов. После этого на вкладке Sources появится код с соответствующим цветным маркером. Красным отмечен тот код, которые не используется на странице. На одном из проектов этот способ помог мне отловить проблему с лишними Google-шрифтами. Они серьезно перегружали и утяжеляли страницу. В итоге разработчики оптимизировали код, удалив из него лишние шрифты.

Сохранение изменений в Chrome при перезагрузке страниц

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

Как сохранять изменения локально

1. Откройте панель разработчика (F12). 2. Откройте вкладку Sources. 3. На панели файлов слева откройте вкладку Overrides. 4. Нажмите на кнопку Select folder for overrides. 5. Выберите папку, в которой вы будете хранить изменения, которые вносите на страницу. 6. Во всплывающем окне разрешите доступ DevTools к выбранной папке. 7. Найдите файл с кодом страницы во вкладке Network. Для этого нужно перезагрузить страницу и сортировать все по Doс. Чаще всего этот файл называется index.html. В нашем примере ниже это Projects. 8. Кликните правой кнопкой по этому файлу и сохраните его Save for overrides. Теперь можно вносить в код изменения, которые сохранятся и после перезагрузки страницы. 9. Для этого найдите код нужного элемента во вкладке Elements с помощью специального инструмента (Ctrl+Shift+C) и скопируйте его. 10. Найдите скопированный элемент во вкладке Sources в документе с кодом страницы (чтобы открыть поисковую строку, нажмите Ctrl+F). 11. Внесите в него изменения и нажмите Ctrl+S, чтобы сохранить их. Перезагрузите страницу. Готово! Были просто «Наши работы», стали «Наши крутые работы». И они останутся таковыми, даже если мы перезагрузим страницу. Изменения сохраняются локально в папке, которую мы выбрали на шаге 5.

Ограничения! DevTools не сохраняет изменения, сделанные в DOM-дереве на вкладке Elements. Редактировать можно только файл с кодом страницы во вкладке Sources. Но! Если CSS не зафиксирован в файле с кодом страницы, его получится отредактировать и сохранить и на вкладке Styles.

Возвращаясь к разделу нашей статьи «Поиск неиспользуемых CSS и JS в вёрстке», с помощью локальных переопределений вы можете самостоятельно удалить найденный «лишний код» и посмотреть, как это скажется на скорости загрузки страницы. А еще, если вы и сами своего рода разработчик, можно попробовать как-то оптимизировать уже существующий код. Например, изменить порядок блоков и посмотреть, как это отразится на производительности.

Блокирование запросов

Мы уже знаем, как увидеть, что происходит со страницей в процессе загрузки (раздел статьи «Снимки экрана при загрузке страницы»). А что, если какой-то контент не загрузится? Скажем, картинка, или какая-то ключевая анимация. Что тогда произойдет? Чтобы протестировать это, можно через DevTools заблокировать какой-то конкретный запрос. Я так обычно проверяю, не забыли ли разработчики задать альтернативный текст для картинок, который появляется, если картинка сломалась/потерялась/не подгрузилась.

Как заблокировать определённые запросы

1. Откройте панель разработчика (F12) и вызовите Command Menu (Ctrl+Shift+P). 2. Введите Show Request Blocking и выберите Show Network Request Blocking. Ниже откроется панель Network Request Blocking. 3. На вкладке Network выберите элемент, запрос к которому вы хотите заблокировать. 4. Из меню Headers скопируйте его и нажмите на кнопку Add Pattern в панели Network Request Blocking. 5. Вставить запрос в поле в меню Network Requesting Block и нажмите на кнопку Add. 6. Убедитесь, что чек-боксы запроса и Enable network request blocking активированы. 7. Перезагрузите страницу и проверьте изменения. Готово! Мы видим, что вместо картинок, запрос к которым мы заблокировали, появился альтернативный текст:

Переопределение геолокации

Через DevTools можно переопределить локацию пользователя, чтобы проверить, как сайт будет выглядеть для жителей разных городов/стран/часовых поясов. Показывает ли он челябинскую погоду жителю Челябинска? Учитывает ли часовой пояс посетителя из европы, который смотрит расписание игр на сайте канадского хоккейного клуба? Все это мы можем выяснить, просто переопределив геолокацию в DevTools.

Внимание! Этот способ подойдет для сайтов и сервисов, которые определяют местоположение посетителя с помощью сервисов геолокации, а не, например, через IP-адрес.

Как сменить геолокацию в DevTools

1. Откройте консоль разработчика (F12) и вызовите Command Menu (Ctrl+Shift+P). 2. Введите команду Sensors и выберите в списке пункт Show Sensors. После этого в нижней части DevTools откроется вкладка Sensors. 3. Продолжаем работать во вкладке Sensors. В поле Location из выпадающего списка можно выбрать уже имеющиеся города. Если нужного города в списке не оказалось, кликайте по кнопке Manage справа от выпадающего списка с доступными локациями. Затем Add Location и добавляйте город сами — с названием, координатами и часовым поясом. Мне эта возможность DevTools пригодилась, когда мы работали над сайтом одного из британский футбольных клубов. Нужно было проверить, учитывается ли геолокация посетителя на странице с расписанием будущих игр.

Подмена User-Agent

User-Agent — это строка, передающая сайту информацию о том, какое программное обеспечение использует посетитель. В ней зафиксировано, каким устройством человек пользуется (ПК, планшет или смартфон), с какой операционной системой и через какой браузер. В зависимости от этих параметров сайт может выглядеть по-разному. Частно, например, дизайнеры адаптируют оформление и стили под мобильные версии, упрощают анимации — чтобы ничто не мешало знакомству с контентом на небольшом экране смартфона. Вот вам пример из жизни: сайт vk.com подстраивается под гайдлайны той операционной системы, на которой его запускают: Чтобы проверить, меняются ли стили на сайте в зависимости от разных устройств, ОС и браузеров, не обязательно обкладываться маками, айфонами, разными планшетами и т.д. Можно просто сменить User-Agent в DevTools и проверить сайт с одного устройства.

Как изменить User-Agent в DevTools

1. Откройте панель разработчика (F12) и вызовите Command Menu (Ctrl+Shift+P). 2. Введите Show Network conditions и нажмите Enter. После этого в нижней части DevTools откроется вкладка Network conditions. 3. В поле User-Agent снимите галочку с Use browser default. 4. После этого из выпадающего списка ниже вы сможете выбрать нужный User-Agent. Если в списке нет нужного User-Agent, можно ввести данные вручную. Для этого в выпадающем списке выберите пункт Custom и пропишите параметры в строке ниже.

Заключение

Эти шесть фишек, о которых мы поговорили в статье, — лишь малая часть того, на что еще способен DevTools в умелых руках QA-специалиста. Там еще много интересного, что может быть полезно при тестировании сайтов и приложении. Но об этом — уже в следующих подборках. А пока хочу напомнить всем причастным к QA, что в тестировании на самом-то деле нет рамок! Если какой-то инструмент, изначально созданный вовсе и не для тестирования, помогает вам оптимизировать вашу работу — используйте его! Это хороший инструмент 🙂 Автор статьи: Егор Ярославцев Редактура: Марина Медведева Фото в заголовке: Martin Wilner on Unsplash