13 приёмов и уловок для работы с Chrome DevTools


Содержание

[software-testing.ru] Chrome DevTools: Инструменты тестировщика [А. Батыров]

Тема в разделе «Курсы по программированию», создана пользователем Топикстартер, 10 дек 2020 .

    li» data-history=»on» >
  • [software-testing.
  • Отзывы (1)

Статус темы: Закрыта.

  • Курс показался слишком коротким.
    Впечатленя двоякие. С одной стороны узнал что-то новое, с другой не очень всё подробно.
    Плюс вытекает из минуса-поскольку всё коротко получилось без «воды» и по делу.
    За полную стоимость считаю курс не стоит своих денег.
    Каких-то глубоких знаний не ждите, но понимание для чего нужна какая вкладка получить можно.

    Памятка по работе с Chrome DevTools

    / codd 0 Comments

    CTRL + SHIFT + I — открытие панели с инструментами разработчика.

    CTRL + SHIFT + F — поиск во всех загруженных на странице файлах:

    CTRL + G — переход к указанной строке:

    Если ввести в консоли document.designMode = ‘on’ , активируется возможность редактировать элементы страницы, имеющие текстовой контент:

    Введя $0 в консоли, вы получите ссылку на выделенную в панели элементов DOM ноду. Если вы используете jQuery, то для получения ссылки можно ввести jQuery($0) :

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

    Симуляция различных состояний DOM элемента ( :hover , :focus , :visited ):

    Интересные материалы по работе с Chrome DevTools:

    Используем Chrome DevTools как про

    26 октября 2015

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

    • Инспектировать корректность отображения.
    • Отслеживать исполнение скриптов на JavaScript.
    • Просматривать сетевые действия.

    При составлении этой статьи я использовал Canary — версию Chrome, где тестируются новые возможности, которые затем попадают в стабильную версию Chrome.

    Для того, чтобы запустить инспектор, можно кликнуть правой клавишей мыши в любом месте страницы и выбрать пункт «Просмотреть код элемента», также можно просто нажать Ctrl + Shift + C.

    Быстрое редактирование HTML-элементов

    Начнём с самого простого: редактирование элементов.

    • Выберите вкладку «Elements».
    • Выберите любой HTML-элемент внутри панели.
    • Дважды кликните по тегу и измените, например, имя тега.

    По завершении редактирования закрывающий тег автоматически обновится.

    Раскрыть все дочерние элементы

    • Перейдите на панель «Elements».
    • Выберите элемент и, удерживая Alt, кликните по стрелочке слева от элемента.

    Изменение расположения инспектора

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

    • Ctrl + Shift + D — Переключение расположения

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

    Наверное, мало для кого это окажется открытием, но во вкладке «Elements» можно производить поиск по DOM.

    • Нажмите Ctrl + F и введите предполагаемый запрос для поиска.

    Палитры

    Выбор цвета в последних версиях Chrome претерпел некоторые изменения: добавились две палитры, облегчающие выбор цвета.

    • Page Colors — эта палитра автоматически создаётся на основе цветов сайта из CSS.
    • Material Design — цвета в этой палитре берутся из палитры материального дизайна.

    Несколько курсоров

    Переместите курсор и, удерживая Ctrl, кликните в нужном участке для добавления курсора. Отменить действие можно с помощью Ctrl + U . Лично мне ни разу не пригодилось.

    Кодировать изображение в base64

    • Переключиться на панель «Network».
    • Выбрать изображение
    • Кликнуть правой клавишей по изображению и выбрать «»

    Переключение псевдоклассов

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

    • Кликните ПКМ по элементу в панели «Elements» и выберите псевдокласс в списке «Force Element State».
    • Также псевдокласс можно выбрать в правой части панели «Elements».

    Выделение столбцом

    • Перейдите в панель «Sources».
    • Выберите какой-нибудь файл.
    • Выделяйте текст, удерживая Alt.


    Выделение столбцом работает также и при редактироавнии HTML в панели «Elements».

    Копирование запроса для cURL

    Любой запрос во вкладке Network можно скопировать, а затем вставить в терминал для исполнения с помощью curl.

    11. Get the current element with «$0»

    • Select «Elements» panel.
    • Choose a DOM element within the Elements Panel editor.
    • Click Console and write $0 to access it.

    12. Reveal in Elements

    Как попробовать, if you choose an a DOM node:

    • Right click on it within the Console panel.
    • Select «Reveal in Elements Panel».

    13. View Event Listeners

    • Select the «Elements» panel.
    • Navigate to the Event Listeners and choose an event.
    • You can also view source by right click and choose «Show Function Definition» in context menu.

    14. Easing Previews

    • Click the easing icon (purple icon) and see a preview.
    • You can view it via choose other previews or you can set new easing format.

    15. Media Query

    • In Device Mode, click the icon (‘bars’) in the upper left corner of the page.
    • Click the breakpoint (‘blue’, ‘green’, ‘orange’) bars and change.

    If you right click on a bar, you can reveal its position within the source code.

    «Film Strip» shows page rendering screenshots and times from start to finish. You can click a screenshot and view in the timeline-style view.

    • Select «Network» panel.
    • Click «Camera Icon».
    • Reload page.

    Копировать ответ

    You can copy the response/request headers of a network resource.

    • Выберите панель «Network».
    • Choose your file within the Resources Panel.
    • Right click and click «Copy Response».

    Запуск предопределённых сниппетов

    • In the left sidebar: Sources > Snippets
    • Right click > Select New
    • Enter a file name and write your snippets in the right panel
    • Right click on the snippet and select Run

    Экранная клавиатура

    Если выбран профиль Nexus 5X, можно посмотреть, как сайт выглядит при активной экранной клавиатуре.

    Скриншот всей страницы

    Сделать снимок всей страницы очень просто. Нужно просто…

    1. Открыть инспектор.
    2. Перейти в консоль.
    3. Нажать Ctrl + Shift + P
    4. Набрать «screenshot»
    5. Выбрать пункт «Capture full size screenshot»

    Скриншот всей страницы

    Эмуляция сенсорных устройств

    Также можно симулировать некоторые датчики:

    • Сенсорный экран
    • Координаты для геолокации
    • Акселерометр
    • Выберите панель «Elements».
    • Нажмите «Esc» и выберите «Emulation > Sensors».

    Полезные функции

    keys и values

    • Select «Sources» panel.
    • Right click within sources pane and choose «Add Folder to Workspace»
    • Choose your file and right click > Map to Network Resources
    • Change your file code and view it.


    Chrome DevTools: Инструменты тестировщика

    Chrome DevTools: Инструменты тестировщика

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

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

    В веб-тестировании часто требуется работать с изнанкой страницы: смотреть локаторы, определять время загрузки, выделять отдельные элементы. Де-факто стандартом в индустрии стал инструмент Chrome DevTools, встроенный прямо в браузер Chrome. Разработчики используют его для отладки кода, но этот инструмент широко распространен и в тестировании. Более того, основные паттерны работы, заданные Chrome DevTools, используются как в других веб-инструментах, так и в работе с мобильными устройствами. Естественно, хорошее знание такой утилиты будет плюсом для любого тестировщика.

    Курс «Chrome DevTools: Инструменты тестировщика» создан для быстрого погружения в специфические для тестирования навыки работы с этим инструментом. Курс — практический, теория дается в минимально необходимом для понимания объеме. Знания, приобретенные на этом курсе, помогут вам эффективно работать с Chrome DevTools сразу по окончании занятий.

    Вы научитесь:

    • писать CSS и XPath локаторы;
    • ловить JS-ошибки;
    • отличать типы запросов друг от друга;
    • проверять сайт под нагрузкой;
    • эмулировать экран мобильных устройств;
    • менять скорость соединения;
    • проверять сертификаты безопасности;
    • и огромному количеству других вещей.

    Программа

    Введение

    • Что такое Chrome DevTools
    • Начало работы с Chrome DevTools
    • Elements. Работа с DOM страницы
    • Краткий обзор HTML
    • Редактирование HTML страницы на лету
    • Краткий обзор CSS — стили элементов и их составляющие
    • Редактирование CSS страницы на лету
    • Работа с локаторами — CSS и XPath

    Console. Работа с JavaScript

    • JS-ошибки
    • JS-дебаг и JS-логи
    • Простой JS своими руками

    Sources. Работа с подгружаемыми данными

    • Загруженные CSS-стили
    • Загруженный JS-код
    • Загруженные картинки
    • Файлы со сторонних ресурсов
    • CDN

    Network. Работа с запросами

    • Типы запросов: HAR, JS, CSS, Img
    • HAR-запросы. Как устроен HTTP-протокол
    • AJAX-запросы
    • Работа с фильтрами
    • Работа с кешем и логами

    Performance. Тестирование нагрузки на сайт

    • JS Heap
    • ЦПУ
    • Ноды, документы и другие виды нагрузки

    Application. Работа с текущим приложением

    • Storage и его виды
    • Работа с Cookie
    • Работа с Cache

    Security. Работа с безопасным соединением

    • HTTPS и TLS
    • Зачем требуется безопасное соединение
    • Проверка сертификатов

    Device bar. Имитируем работу с девайсами

    • Отличия Desktop Web и Mobile Web
    • Работа с образами

    Network conditions. Работа с соединением

    • Кастомизация скорости соединения
    • User agent

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

    Содержание:

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

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


    О том, как извлечь максимальную пользу из инструментов разработчика Хрома мы и расскажем Вам в статье ниже.

    Chrome DevTools

    Язык: Русский Формат: Обновлено: 2020-09-16 Автор:

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

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

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

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

    Подобие таких инструментов появилось ещё в Internet Explorer. В старой Opera для этих целей использовалась панель Dragonfly и даже имелся собственный встроенный аналог Блокнота с подсветкой кода, что позволяло верстать прямо в среде браузера:

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

    Вызов инструментов разработчика и представления страницы

    Вызвать инструменты разработчика в Хроме можно несколькими способами:

    1. Из основного меню. Кликаем по кнопке меню (три точки в правом верхнем углу окна браузера), наводим курсор на выпадающий список «Дополнительные инструменты» и в нём нажимаем пункт «Инструменты разработчика».
    2. Горячими клавишами. Для вызова можно нажать кнопку F12 или комбинацию CTRL+SHIFT+I.
    3. Из контекстного меню (наиболее удобно для инспекции конкретных элементов страницы). Нажимаем правой кнопкой мыши по нужному объекту на веб-страничке и выбираем пункт «Просмотреть код» (или «Исследовать элемент» в некоторых более ранних версиях Хрома).

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

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

    В правой части также имеется несколько кнопок и индикаторов. Индикаторы отображают количество ошибок (красным) и предупреждений (жёлтым) в работе скриптов. Основной же кнопкой здесь можно назвать меню настроек. Она позволяет изменять привязку самой панели относительно фрейма со страницей, а также включать и отключать дополнительные вкладки с инструментами (раздел «More tools»). По умолчанию она находится внизу под инспектируемой страницей, но её также можно разместить сбоку или даже открепить в отдельное окно:

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

    Вкладка Elements

    По умолчанию Chrome DevTools открывается на вкладке «Elements». Это одна из самых полезных вкладок, поскольку позволяет просматривать и быстро менять HTML и CSS-код различных элементов веб-страницы. Чтобы выбрать элемент, достаточно активировать первую кнопку в левой части панели («Select an element in the page to inspect it») и курсором мышки ткнуть в нужный фрагмент страницы. На самой страничке вокруг выбранного элемента отобразится выделение и размеры блока в пикселях, а во вкладке «Elements» HTML-код развернётся до строки, описывающей выбранный фрагмент:

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

    Как видим, внутри него находится три блока с разными репликами и скрипт, который эти реплики переключает через определённые отрезки времени. Чтобы написать что-то своё, мы можем остановить работу скрипта и прописать в одном из блоков наш текст (правка HTML доступна после двойного клика по элементу). Хотя, чего мелочиться? Можем убрать все лишние блоки, оставив только один (а заодно можно и скрипт снести :)):

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

    Обратите внимание, что все элементы, которые мы добавляем в панели работы со стилями, автоматически прописываются в качестве инлайновых стилей (параметры атрибута «style») выбранного блока HTML-кода. При этом каждый из них можно быстро отключить, сняв галочку слева (в коде отключённый параметр автоматически убирается в комментарий).

    Ну и, пожалуй, самое полезное – для каждого селектора с описанием стилей имеется точная ссылка на строку, в которой он реально прописан в CSS-файле. Это позволяет открыть файл и внести необходимые правки в заранее известном месте вместо того, чтобы искать вручную! То есть, использовать инструменты разработчика на вкладке «Elements» можно для внесения и оценки предварительных временных правок кода (все правки исчезают после перезагрузки страницы) с последующим внесением наиболее удачных изменений в код на постоянной основе.

    Стоит также напоследок отметить, что панель для правки стилей имеет целый ряд собственных вкладок, в которой «Styles», лишь первая. Вот, какие дополнительные разделы там имеются:

    • Computed – отображает модель выбранного блока и вычисленные для него автоматически стили, которые явно не заданы или были унаследованы от родительских блоков;
    • Event Listeners – выводит список функций, «слушающих» определённые события для всей страницы или конкретно выбранного блока (нужно снять галочку ;
    • DOM Breakpoints – содержит так называемые «точки остановки» DOM (сокр. англ. «Document Object Model» – «объектная модель документа»), которые можно создавать из контекстного меню HTML-кода (группа «Break on») при его модификации для быстрой отмены/применения внесённых правок;
    • Properties – позволяет просмотреть полный список JavaScript-свойств для выбранного блока на страничке;
    • Accessibility – показывает иерархический уровень вложенности для выбранного блока без учёта типов блоков, их классов, идентификаторов или иных характеристик.

    Наличие всех этих дополнительных инструментов отнюдь не обязывает Вас их использовать. Обычно, достаточно возможности правки HTML и CSS-кода. Однако, если Вам нужно работать с JavaScript, то список «слушания», точки остановки DOM и свойства блоков Вам могут очень пригодиться!

    Консоль

    Раз уж речь зашла о JavaScript, то нельзя не сказать о таком инструменте, встроенном в Chrome DevTools, как консоль. Найти её можно на отдельной вкладке «Console», а также она по умолчанию отображается в качестве дополнительной нижней панели на всех других вкладках (отключить отображение можно в настройках, выбрав пункт «Hide console drawer» или нажав кнопку ESC):

    Консоль может выполнять сразу две функции: мониторинг событий на странице с отображением предупреждений и ошибок, а также исполнение JavaScript-команд, введённых пользователем. Явно выполняется первая функция. В выводе консоли все события группируются на три категории с разным цветом фона:

    1. Белый – «отстуки» об успешно выполненных событиях.
    2. Жёлтый – предупреждения о возможных некритических ошибках и сбоях.
    3. Красный – ошибки в выполнении скриптов или в доступе к определённым запрашиваемым ресурсам.

    Ошибки и предупреждения содержат в себе краткое описание проблемы и ссылку на файл и строку в нём, которая эту проблему вызывает. Зная точный адрес возникновения неполадки (при условии, что она возникает в файле на Вашем сервере), Вы можете быстро локализовать и устранить ошибку.

    Что касается выполнения пользовательского кода, то данная возможность применяется очень часто для быстрой отладки кода и проведения различных экспериментов с JavaScript. Например, при изучении этого языка Вам не всегда нужен отдельный Блокнот или даже полновесная среда разработки. Простенькие скрипты Вы можете выполнять прямо в консоли (тем более, что она поддерживает автодополнение команд).

    Для программирования в консоли лучше всего открывать в Хроме несуществующую внутреннюю страницу (например, chrome://blank/) или новую пустую вкладку (chrome://newtab/). Это позволит избежать накладок в выполнении уже работающих на странице скриптов. По сути и всё – можем писать код в консоли и выполнять его нажатием Enter. Единственное, что нужно помнить, для вывода, вместо традиционного «document.write(«»);», используется конструкция «console.log(«»);». Вот Вам самый примитивный пример для вывода текстовой строки:

    console.log(«Мой первый вывод текста в консоли Хрома :)»);

    Консоль поддерживает ряд спецификаторов, позволяющих явно определить тип вывода (строка/число/элемент DOM/объект JavaScript), выполнить подстановку данных обозначенного типа или применить форматирование:

    Спецификатор Назначение
    %s Определяет результат вывода как строку
    %d Определяет результат вывода как любое число
    %i Определяет результат вывода как целое число
    %f Определяет результат вывода как десятичную дробь (число с плавающей запятой)
    %o Определяет результат вывода как элемент DOM, аналогичный тому, который отображался на панели «Elements»
    %O Определяет результат вывода как JavaScript-объект
    %c Позволяет применить к результату вывода CSS-правила, которые указываются в формате инлайн-стилей в качестве второго параметра

    Вот несколько примеров применения спецификаторов:


    console.log(«Я считаю до пяти: %d, %d, %d, %d, %d \n%s», 1, 2, 3, 4, 5, «Я иду искать!»);

    console.log(«%cЭто будет написано большими красными буквами на синем фоне», «color: #f00; font-size: 30px; background: #00f; padding:10px; font-weight:bold»);

    var curDate = new Date();
    var day = curDate.getDate();
    var month = curDate.getMonth();
    var arr = [
    ‘Январь’,
    ‘Февраль’,
    ‘Март’,
    ‘Апрель’,
    ‘Май’,
    ‘Июнь’,
    ‘Июль’,
    ‘Август’,
    ‘Сентябрь’,
    ‘Ноябрь’,
    ‘Декабрь’,
    ];
    console.log(«%cСегодня: %s — %d число», «color: orange; font-size: 30px; background: blue; padding: 20px», arr[month], day);

    Как видим, консоль можно с успехом использовать не только для инспектирования существующего кода, но и в качестве среды для изучения JavaScript. Она поддерживает как однострочные выражения, так и более сложные многострочные конструкции с переменными, массивами и циклами. Для перевода строки в консоли вместо Enter нужно нажимать SHIFT+ENTER, а для перевода строк в результатах вывода пользуйтесь символом перевода строки – «\n».

    Вкладка Sources

    На первый взгляд назначение третьей вкладки инструментов разработчика «Sources» не совсем понятно. По умолчанию в центре рабочего пространства здесь также открывается исходный код страницы, который, почему-то, нельзя править. По бокам расположено две панели: «Page» (слева) и «Threads» (справа). И вот как раз левая панель и является основным «богатством» вкладки «Sources»!

    Эта панель позволяет просмотреть все ресурсы, которые подгружаются вместе со страницей. Картинки, скрипты, таблицы стилей – всё это можно выделить и просмотреть в рабочей области (а скрипты можно ещё и править):

    Помимо просмотра ресурсов и правки JavaScript (кстати, при этом можно использовать инструменты из правой панели), вкладка «Sources» позволяет скачивать любые файлы на компьютер. Эту особенность можно применить в дело, для скачивания, например, фотографий из Instagram и других веб-ресурсов, на которых прямое сохранение изображений недоступно! Просто открываем инструменты разработчика, в списке ресурсов ищем нужные картинки, а затем сохраняем их:

    Аналогично можно скачивать, например, понравившиеся шрифты SVG-графику и подобные ресурсы, прямое сохранение которых может быть недоступно.

    Инструменты тестирования и аудита

    Рассмотренные выше три вкладки являются, можно сказать, основными в инструментах разработки. Состав же и количество остальных от версии к версии Google Chrome может меняться (как это, например, происходит с вкладкой «Memory», которая то появляется, то исчезает). К тому же, количество вкладок может увеличиваться за счёт устанавливаемых расширений, которые добавляют собственные панели инструментов.

    На данный момент актуальной версией Google Chrome является недавно обновлённая 69-я ветка. Поэтому рассматривать дополнительные вкладки будем на её примере.

    Вкладка «Network»

    Вкладка «Network» позволяет просмотреть статистику загрузки всех элементов инспектируемой веб-страницы, а также наблюдать за запросами, отправляемыми ею во время работы. Для начала отслеживания нужно нажать кнопку записи в левой части вкладки и перезагрузить страничку (F5). Остановить запись можно в любой момент, однако, целесообразно делать это после полной загрузки страницей всех требуемых ресурсов:

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

    Вкладка «Performance»

    Если предыдущая вкладка позволяла нам отследить сугубо сетевую активность страницы, то «Performance», работая по схожим принципам (запись действий), позволяет оценить, какую нагрузку создаёт веб-ресурс на компьютер пользователя. Чтобы получить достаточное для анализа количество данных, достаточно записывать работу страницы в течении минуты, после чего останавливаем и смотрим результаты:

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

    Вкладка «Memory»

    Одна из самых непостоянных вкладок Google DevTools, которая то есть, то пропадает. Работать она может в двух режимах. По умолчанию на ней отображается обобщённое текущее потребление памяти открытой страницей. Если же Вам нужен детальный отчёт, можете запустить процесс записи, аналогичный тому, который был на предыдущих вкладках. В результате Вы получите данные обо всех процессах, потребляющих оперативную память компьютера:

    Что интересно, отображается потребление памяти не только самой страницей, её скриптами и подгружаемыми ресурсами, но также расширениями Хрома, которые активны в данный момент! Это может пригодиться в тех случаях, когда браузер стал сильно тормозить из-за «обрастания» лишними плагинами. Зная основных «пожирателей» ресурсов, Вы сможете их удалить, вернув своему Хрому былую лёгкость.

    Вкладка «Application»

    Если Вам нужно узнать, что хранит веб-страница в сессиях, cookie-файлах или иных локальных хранилищах, Вам на вкладку «Application». Здесь всё максимально просто – в левой панели выбираем интересующее нас хранилище данных, а в основной области смотрим его содержимое. И, что характерно, здесь же мы можем сразу это содержимое править и даже полностью удалять (кнопки «Clear all» и «Delete selected»):

    Вкладка «Security»

    Сейчас стало практически необходимо использовать на сайтах защищённый HTTPS-протокол. Чтобы оценить эффективность его работы и потенциальные бреши в безопасности веб-страниц, можно воспользоваться вкладкой «Security». Здесь после перезагрузки страницы мы увидим отчёт о безопасных и опасных ресурсах и, соответственно, сможем принять дальнейшие меры для устранения выявленных недостатков:

    Вкладка «Audits»

    Наконец, в довершение ко всему, Google Chrome может дать нам практические советы по улучшению работы сайта. Для этого нужно перейти на вкладку «Audits», запустить тестирование и дождаться его завершения. По результатам аудита будут сформированы графики и конкретные рекомендации по дальнейшей оптимизации страниц:

    Выводы

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

    И всё это не требует установки каких-либо дополнительных программ или расширений. Хотя, некоторые расширения могут добавлять свои инструменты в и без того богатый арсенал Хрома. Если Вы освоите хотя бы половину из того, что даёт DevTools, то сможете существенно повысить производительность своего труда и улучшить качество создаваемых Вами веб-страниц!

    10 советов по использованию Chrome DevTools для SEO-аудита

    Автор: Алейда Солис (Aleyda Solis) – консультант по международному SEO, основатель агентства интернет-маркетинга Orainti.

    Многие из нас тратят сотни и тысячи долларов на сервисы, которые помогают автоматизировать и упростить повседневную работу. Но в нашем распоряжении есть отличный бесплатный набор средств для SEO – инструменты разработчика (DevTools) в браузере Chrome. С его помощью можно проверить самые важные и фундаментальные для поисковой оптимизации аспекты любой страницы.

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

    Для начала откройте страницу, которую вы хотите проверить, в браузере, а затем – панель инструментов разработчика. Для этого перейдите в меню Chrome, расположенное в правом верхнем углу экрана, и выберите «Дополнительные инструменты» -> «Инструменты разработчика».

    Вы также можете использовать сочетания клавиш: Ctrl+Shift+I (для Windows) или Cmd+Opt+I (для Mac).

    Ещё один вариант – кликнуть правой кнопкой мыши по странице, которую вы хотите проверить, и в появившемся меню выбрать пункт «Просмотреть код».

    Теперь можно приступить к аудиту.

    1. Проверка основных элементов контента страницы

    В настоящее время Google способен сканировать и индексировать JavaScript-контент, однако он не всегда делает это корректно. Поэтому необходимо проверять основные элементы содержимого страницы – тайтл, метаописание и текст. Это значит, что нужно не только анализировать HTML-код, но и проверять DOM. Таким образом вы сможете увидеть, как эта информация будет визуализирована и идентифицирована Google.

    Просмотреть DOM любой страницы можно на вкладке «Elements» панели Инструментов разработчика.

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


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

    Сравнивая эти различия, вы сможете проверить, правильно ли выполняется индексация. Для этого можно:

    • просмотреть версию страницы, сохранённую в кэше Google;
    • посмотреть, показывается ли текст в результатах поиска Google;
    • использовать «Сканер Google для сайтов» в Search Console и т.д.

    2. Просмотр контента, скрытого при помощи CSS

    Google не учитывает текстовый контент, который включен в HTML-код страницы, но при этом скрыт для пользователя под вкладками, пунктами меню или ссылками «Нажмите, чтобы прочитать».

    Один из самых распространённых способов скрыть текст – использовать свойства CSS «display:none» или «visibility:hidden». Поэтому рекомендуется проверять, нет ли на страницах сайта важной информации, которая скрыта при помощи этих средств.

    Сделать это можно с помощью функции «Search» на панели инструментов разработчика. Получить доступ к ней можно с помощью сочетания клавиш: Ctrl + Shift + F (для Windows) или Cmd + Opt + F (для Mac), когда панель DevTools открыта.

    Эта функция позволяет выполнить поиск не только по файлу открытой страницы, но и по всем используемым ресурсам, включая CSS и JavaScript.

    Чтобы найти скрытый текст, нужно ввести в строку поиска требуемые свойства. В данном случае – «hidden» или «display:none». Так вы сможете узнать, содержатся ли они в коде страницы.

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

    3. Проверка альтернативного текста изображений

    Помимо проверки основных элементов текстового содержимого, на вкладке «Elements» вы также сможете просмотреть описание изображений – текст, который содержится в атрибуте alt. Кликните правой кнопкой мыши на нужную картинку и выберите пункт «Просмотреть код»:

    4. Проверка конфигурации тегов

    Chrome DevTools также можно использовать для проверки технической конфигурации страниц. К примеру, тегов и атрибутов. Для этого нужно ввести в строку «Search» нужные теги и проверить, как они реализованы.

    С помощью инструментов разработчика можно проверить конфигурацию тегов не только в блоке , но и в заголовках HTTP. Для этого нужно перейти на вкладку «Network» панели, выбрать нужную страницу или ресурс и проверить содержимое заголовка, включая наличие link rel=canonical в файле изображения:

    5. Просмотр статуса HTTP в конфигурации заголовка

    При проверке конфигурации заголовков страниц и ресурсов на вкладке «Network» вы также сможете посмотреть статуc HTTP, проверить наличие редиректов, узнать их тип, найти статусы ошибок и включения других конфигураций (X-Robots-Tag, hreflang или vary: user agent).

    6. Проверка оптимизации для мобильных устройств

    На сегодняшний день оптимизация сайта для мобильных устройств – неотъемлемая часть работы по поисковой оптимизации. Проверить мобильную конфигурацию страницы и контента можно, используя режим эмуляции мобильных устройств в DevTools – «Device Mode». Для перехода в него нужно нажать на иконку устройства в правом верхнем углу панели или же использовать сочетание клавиш: Command+Shift+M (Mac) или Ctrl+Shift+M (Windows, Linux), когда панель открыта.

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

    7. Проверка времени загрузки страницы

    Анализируйте время загрузки страницы, эмулируя условия сети и используемое устройство. Для этого перейдите в меню кастомизации DevTools, которое находится в правом верхнем углу панели, выберите пункт «More tools», а затем – «Network Conditions».

    На открывшейся панели вы найдёте поля «Caching», «Network throttling» и «User agent».

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

    Чтобы получить рекомендации по ускорению загрузки страницы, перейдите на вкладку «Audits» и нажмите на кнопку «Run». В каждой рекомендации будут указаны конкретные ресурсы, вызывающие проблемы.

    Кроме того, вы можете сделать скриншоты рендеринга страницы, используя опцию «Filmstrip». Нажав на иконку камеры и перезагрузив страницу, вы сможете просмотреть её скриншоты на разных стадиях процесса загрузки. Таким способом вы сможете узнать, что видят пользователи на каждом этапе.

    8. Выявление ресурсов, блокирующих визуализацию

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

    9. Поиск небезопасных элементов на странице во время перехода на HTTPS

    Инструменты разработчика Chrome также могут сослужить хорошую службу во время перехода на HTTPS. С помощью вкладки «Security» можно будет найти небезопасные элементы на любой странице. Здесь вы сможете посмотреть, насколько страница безопасна и есть ли у неё валидный HTTPS-сертификат, проверить тип соединения и наличие смешанного содержимого.

    10. Проверка AMP

    DevTools также можно использовать для проверки AMP-страниц. Для этого добавьте строку «#development=1» в URL страницы, а затем откройте вкладку «Console». Здесь вы сможете посмотреть есть ли какие-либо ошибки на странице. Вы также будете видеть, в каких элементах и строках кода они были найдены.

    Бонус: персонализируйте настройки DevTools

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

    Ещё один совет: сокращённый код нелегко разобрать. Чтобы просмотреть полную версию кода, нажмите кнопку «<>» в центре нижней области панели.

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

    Автор надеется, что предложенные в статье советы сделают вашу жизнь проще.

    Некоторые возможности инструмента разработчика в Chrome

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

    Особенности DevTools


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

    Также для работы с отдельными фишками возможно вы захотите использовать Google Chrome Canary – эксперементальную версию Chrome. Данная версия может быть легко запущена рядом с обычным Chrome.

    Для использования и эксперемента с отдельными инструментами разработчика вам понадобится в адресной строке браузера ввести

    и выбрать весь необходимый инструментарий.

    С полным набором возможностей вы можете ознакомится на официальном сайте.

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

    Для этого можно воспользоваться одним из вариантов:

    Через меню браузера

    Войдите в меню, кликнув по иконке , кликните на “More tools” и выберите “Developer Tools.”

    Через нажатие правой кнопки мыши

    Нажмите на любом элементе страницы правой кнопкой мыши и выберите “Inspect element”.

    С помощью горячих клавиш

    Нажмите сочетание клавиш в зависимости от вашей операционной среды

    • Windows: F12 or also Ctrl + Shift + I
    • Mac: Cmd + Opt + I

    Советы и приёмы для работы с инструментами разработчика.

    Здесь приведены лишь некоторые возможности из множества доступных. Для некоторых из них используется Canary.

    Быстрый переход по файлам.

    В открытой вкладке с исходными файлами нажмите сочетание Ctrl + P (Cmd + P) и ищите необходимые файлы.

    Форматирование с помощью <>

    Нажав на <> вы можете изменить форматирование исходного кода и вернуться к нормальному виду.

    Редактирование HTML – элемента

    Вы можете на лету редактировать HTML выбирая любом элемент внутри DOM и дважны кликнув на него. Закрывающиеся тэги будут автоматически отредактированы. Все изменения будут сразу же отображены.

    Редактирование CSS – свойств

    Аналогично как и HTML, точно так же вы можете редактировать и CSS.

    Поиск в исходном коде

    Вы можете быстро производить поиск в исходном коде с помощью комбинации Ctrl + Shift + F (Cmd + Opt + F), а также производить поиск по css – селектору нажав Ctrl + F (Cmd + F).

    Точки останова в Javascript Breakpoints

    При дебаге Javascript часто бывает полезным использовать точки останова. В инструменте разработчика вы можете выбрать номер строки, где хотите остановиться и нажать Ctrl + R (Cmd + R) для перезагрузки страницы. Именно в этом месте и прервётс загрузка.

    Переход по номеру строки

    Нажав Ctrl + O (Cmd + O) и использовав специальный синтаксис, вы можете быстро перейти на нужную строку. В примере введено :200:10, это значит, что переход прошёл на строку 200 и колонку 10.

    Множество курсоров

    Если вам надо одновременно вводить значения в нескольких местах или редактировать тот же font-size, то нажав Ctrl + Click (Cmd + Click) можно одновременно вводить информацию в нескольких местах.

    Изменение положения окна

    Окно DevTools имеет три положения: с одной из сторон, внизу и плавающее. Вы можете переключаться между ними с помощью Ctrl + Shift + D (Cmd + Shift + D) или через специальное меню в правом верхнем углу окна.

    Очистка куки

    Для работы со стороними плагинами иногда бывает необходимым очистить cookies. На вкладке “Resources” вы можете найти необходимы куки и удалить их через контекстное меню.

    Проверка на различных устройствах

    Если у вас адаптивный дизайн, то вы можете проверить своё приложение на различных устройствах. С помощью этого режима вы сможете проверить наличие проблем с вёрсткой на мобильных устройствах или при различных размерах браузера. Для входа в этот режим нажмите на или комбинацию клавиш Ctrl + Shift + M (Cmd + Shift + M). Там вы сможете выбрать нужное устройство, ориентацию экрана и его размер.

    Цветовая паллета и пипетка

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

    Смена формата цвета


    Можно переключаться между различными отображениями цветов: RGBA, HSL и шестандцатиричным. Нажатие Shift + Click на блоке с цветом поменяет формат.

    Эмуляция сенсорного экрана

    Классная фича DevTools помогает симулировать тачскрин и акселерометр. Для этого перейдите по пути “Console -> Emulation -> Sensors”.

    Переключение между состояниями элемента

    Часто необходимо проверить скрытый стиль, например, :hover атрибут. В Firefox местная среда разработки позволяет проверить его непосредственно, когда он вызван. Но в Chrome всё иначе. Здесь есть штука под названием “toggle element state”. Она позволяет посмотреть свойства аттрибута непосредственно в панели стилей.

    Сохранение изображение как Data URI (base64 кодировка)

    Можно сохранить изображение со страницы как Data URI или сконвертировать в base64. При этом не нужно использовать какие-либо сторонние сервисы. Для этого перейдите во вкладку “Network”, выберите нужное изображение, кликните правой кнопкой мыши по нему и нажмите на “Copy image as Data URL”.

    Просмотр User Agent Shadow DOM

    Когда вы работаете с контролами типа кнопки или строки ввода, браузер автоматически добавляет скрытые атрибуты. Чтобы их увидеть нажмите F1 (?) и выберите “Show user agent DOM”. Как показано на примере, в нашем DOM – дереве появился скрытый атрибут #shadow-root div. Теперь, при необходимости можно повесить на него какие-нибудь CSS – стили.

    Выбор следующего вхождения

    Когда вам надо поменять одно и то же свойство для нескольких элементов, то инструмент разработчика может ускорить этот процесс. Сделайте двойной клик на нужном свойстве, с помощью Ctrl + D (Cmd + D) пометьте все необходимы вхождения. Теперь меняя значение в одном месте, оно меняется одновременно и в остальных выбранных местах.

    Рабочее окружение

    По умолчанию когда вы что-то меняте в инструменте разработчика, то при перезагрузки страницы всё пропадает. С помощью рабочего окружения можно необходимые изменения сохранить на диск. Правой кнопкой мыши нажмите на папку и в меню нажмите на “Add folder to local workspace”, далее сделайте тоже самое для нужного файла, но в меню жмите на “Map to file system resource…”.

    Диафильм прогрузки

    Нельзя обойти стороной классную возможность создания диафильма из состояний при прогрузке вашего сайта. Чтобы проверить как рендориться ваш сайт в течении каждого этапа его прогрузки зайдите в панель “Network”, нажмите на картинку с камерой и потом нажмите Ctrl + R (Cmd + R), чтобы перезагрузить страницу. В итоге вы получите скриншоты загрузки вашей страницы в каждый момент времени.

    Время загрузки DOM

    Chrome DevTools позволяют проверить скорость загрузки DOM – структуры и общую скорость загрузки страницы. Для этого идём во вкладку “Network”, кликаем на “Show Overview” и жмём Ctrl + R (Cmd + R) для перезагрузки страницы. Синяя линия показывает время загрузки DOM – структуры, а красная – общее время. Всё что слева и на синей линии – это блокеры для загрузки DOM и являются причиной медленного рендеринга страницы.

    Профили для скорости сети

    Для тестирования загрузки приложения по мобильной сети или в условиях лимитированной скорости Интернета есть возможность создать специальный профиль, в котором будет указана нужная скорость загрузки. Для этого переходим в нисподающее меню “Throttling” на вкладке “Network” и кликаем на “Add a custom profile…” для создания своего профиля или выбираем один из предложенных.

    Панель безопасности

    С её помощью можно протестировать миграцию на HTTPS и быстро исправить возможные предупреждения. Идём в “Security” панель и жмём Ctrl + R (Cmd + R). Зелёным цветом будут помечены безопасные скрипты и красным вызывающие подозрение.

    Валидация Google AMP HTML

    Google Accelerated Mobile Pages (AMP) – опенсорсный проект для увеличения скорости загрузки приложения на мобильном устройстве за счёт использования легковесных HTML страниц. Чтобы Google проиндексировал AMP версию ваше страницы вы должны её провалидировать. Для этого кликните на панеле “Console”, далее необходимо добавить #development=1 к AMP версии в адрессной строке браузера. Жмём Ctrl + R (Cmd + R) для перезагрузки. В случае успешной валидации мы увидим нотификашку. Дальше можно более подробно прочитать ошибки при AMP валидации.

    Использование инструментов разработчика из Firefox в Google Chrome

    Если вдруг так случилось, что вам понадобился инструмент разработчика из Firefox, то можете попробовать Valence – эксперементальный плагин от команды Firefox. Он предназначен для дебага в различных браузерах. Требуется 37 версия хрома и выше.

    Например, в OSX вы с помощью следующей команды можете запустить версию Chrome для дебага

    Инструменты разработчика Chrome Devtools для вебмастеров и дизайнеров

    В сети есть немало статей про секретные фишки инструмента Chrome Developer Tools для разработчиков, а недавно я нашел заметку по теме, ориентированную на дизайнеров. Ее преимущество в том, что там описывались весьма простые действия: изменение цвета, классов, текста на странице и т.п. Мне кажется это более практичная и полезная информация как новичкам в верстке, так и тем, кто регулярно с ней работает. Лично я 90% из этих примеров активно юзаю, а вот «секреты» — не особо. В сегодняшней публикации поделюсь частью своих наработок и другими полезными функциями.

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

    1. Из основного меню выбираете пункт «More Tools» (Дополнительные инструменты), а потом в выпадающем списке «Developer Tools».

    2. Вызываете контекстное меню в интересующем вас месте веб-страницы (тексте/картинке, меню и т.п.), а там кликаете по ссылке «Inspect Element».

    3. Есть горячие клавиши:

    • Для Windows это сочетание: «Ctrl + Shift + I» или клавиша «F12».
    • Для Mac — «Cmd + Opt + I»

    Как отредактировать HTML / CSS код

    В принципе, основная функция ради которой я использую Google Chrome Devtools, это редактирование кода на лету и проверка настроек стилей. Из всех вариантов включения, выбираю пункт контекстного меню «Inspect Element», т.к. перед вами сразу открываются элементы, соответствующие нужному объекту.

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

    Эмуляция размеров экрана, устройств

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

    В левом нижнем углу есть кнопка для переключения экрана в мобильную/гибкую версию, где вы можете устанавливать размеры окна браузера. Для удобства там автоматически приведены на выбор параметры смартфонов (Pixel, iPhone) и планшетов (iPad), однако вы можете ставить любые значения ширины/высоты. С помощью этой штуки обычно ищу ошибки в адаптивном дизайне при разработке.

    Интересные фишки Chrome Devtools для дизайнеров


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

    Редактирование контента на лету (designMode)

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

    Дабы проверить все ли у вас ок, можете править контент/заголовки непосредственно в браузере — для этого переходите во вкладку «Console», где пишете директиву document.designMode = «on»; и нажимаете Enter.

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

    Скрытие элементов

    Данный способ пригодится для быстрого изменения внешнего вида макета, когда вы хотите посмотреть как он будет выглядеть без какого-нибудь объекта. Вторая причина, из-за которой убираю ту или иную деталь шаблона — необходимость сделать скриншот без нее. Раньше я просто удалял объект из HTML, но оказывается есть метод получше — выделяете элемент и кликаете кнопку «h». По факту, данное действие активирует CSS свойство visibility.

    Быстрое переключение классов

    Если вам надо сравнить несколько вариантов оформления, то можно весьма наглядно реализовать это через Google Chrome Devtools. Для этого у вас изначально должны быть прописаны соответствующие стили. Далее либо вносите изменения непосредственно в HTML код, либо используете более красивое решение:

    Можете потестить его в этом примере с Codepen. В правом окне включаете опцию «.cls», а затем в строке пишете имя нужного класса и жмете Enter — он будет добавлен к списку переключений. Затем просто снимаете/ставите соответствующие галочки.

    Визуальный CSS редактор

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

    Они позволяют управлять такими опциями как:

    • text-shadow — тень текста;
    • box-shadow — тень блока;
    • color — цвет контента;
    • background-color — цвет фона.

    Вот как выглядят эти вспомогательные инструменты:

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

    Напоследок полезное видео по теме:

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

    А вы используете инструмент разработчика Google Chrome Developer Tools в своей работе? Возможно, знаете еще какие-то интересные способы его применения?

    Chrome DevTools

    Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. DevTools can help you edit pages on-the-fly and diagnose problems quickly, which ultimately helps you build better websites, faster.

    Check out the video for live demonstrations of core DevTools workflows, including debugging CSS, prototyping CSS, debugging JavaScript, and analyzing load performance.

    Open DevTools

    There are many ways to open DevTools, because different users want quick access to different parts of the DevTools UI.

    • When you want to work with the DOM or CSS, right-click an element on the page and select Inspect to jump into the Elements panel. Or press Command + Option + C (Mac) or Control + Shift + C (Windows, Linux, Chrome OS).
    • When you want to see logged messages or run JavaScript, press Command + Option + J (Mac) or Control + Shift + J (Windows, Linux, Chrome OS) to jump straight into the Console panel.

    See Open Chrome DevTools for more details and workflows.

    Get started

    If you’re a more experienced web developer, here are the recommended starting points for learning how DevTools can improve your productivity:

    Discover DevTools

    The DevTools UI can be a little overwhelming. there are so many tabs! But, if you take some time to get familiar with each tab to understand what’s possible, you may discover that DevTools can seriously boost your productivity.

    Использование code coverage — нового инструмента Chrome DevTools.

    Code coverage (инструмент анализа покрытия кода) наконец-то вышел из стадии экспериментов и уже появился в Chrome Canary и скоро будет доступен для всех. Это интересный инструмент, который пригодится как при работе с JavaScript, так и с CSS, поэтому я решил сделать быстрое демо и изучить, какую он может принести пользу.

    Для чего он предназначен?

    Code coverage запускает ваше веб-приложение и даёт возможно увидеть для каждого JS/CSS файла, какие строки кода выполнялись, а какие нет.

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

    Запись code coverage работает аналогично таймлайнам devtools — вы нажимаете кнопку записи, а затем взаимодействуете с вашим сайтом в обычном режиме. Как только вы закончите, Chrome выполнит некоторые вычисления и сгенерирует данные. Здесь мне было интересно, сколько неиспользованных CSS было на сайте, поэтому я перешел на различные подстраницы, чтобы убедиться, что я попал в каждую “ветку кода” CSS. Конечно же, здесь есть много возможностей для улучшения, так как 97% css на моем сайте не использовались!

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

    Почему это полезно?

    При работе над сложным или долгосрочным проектом легко накапливается мертвый код. Если вы используете webpack или другую систему сборки JS, есть инструменты для предотвращения попадания мёртвого JS кода в продакшен. Но для CSS сделать это несколько сложнее. Наличие инструмента анализа покрытия кода в Chrome — отличный способ получить краткий обзор того, сколько лишнего кода вы отправляете в продакшен, и какие файлы стоит оптимизировать.

    Как его получить?

    Загрузите Chrome Canary или подождите несколько недель, пока он появится в обычном Chrome.

    Стоит почитать

    • Более полезные (и менее известные) инструменты в Chrome devtools: https://blog.logrocket.com/making-the-most-of-the-chrome-developer-tools-8cac9a206979
    • Визуализация производительности бекенда в Chrome dev tools: https://blog.logrocket.com/visualizing-backend-performance-in-the-chrome-devtools-bb6fd232540

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

    Цукерберг рекомендует:  Креативные эффекты для ссылок
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих