Бесплатные уроки по инструменту Chrome Developers Tool

Содержание

Освоение Chrome Developer Tools: техники нового уровня в разработке front end

Возможно, вы уже знакомы с основными функциями Chrome Developer Tools: инспектором DOM, панелью стилей и консолью JavaScript. Но есть ряд менее известных функций, которые могут значительно улучшить отладку или воркфлоу разработки приложений.

Темная тема

Chrome оснащен встроенной темной темой для dev tools. Вы можете включить её, щелкнув значок трех точек в правом верхнем углу панели dev tools, нажав «Настройки», а затем переключив тему.

Мне кажется что это удобнее для моих глаз, и, очевидно, это выглядит намного круче :)

Режим выбора

Инструменты DevTools предлагают несколько способов выбора элементов — наиболее удобным из которых является режим выбора.

Этот инструмент, активированный нажатием на иконку в верхнем левом углу панели инструментов (или с cmd + shift + c / ctrl + shift + c), позволяет вам выбирать элементы на странице, просто щелкая по ним.

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

Этот инструмент отлично подходит для быстрого выбора элемента на странице, так как выбор cmd + shift + c откроет dev tools и перейдет прямо в режим выбора.

Сохранить как глобальную переменную

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

Для этого щелкните правой кнопкой мыши на объекте в консоли и нажмите «сохранить как глобальную переменную». Это сохраняет объект как глобальную переменную, доступную в консоли под названием temp1, которую вы затем можете использовать с использованием JavaScript.

Инструменты анимации

Недавно команда Chrome добавила ряд новых функций для создания и отладки анимаций.

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

Вы также можете приостановить все анимации. Это особенно полезно для сайта, который набит анимированным контентом.

Средство просмотра анимации позволяет вам индивидуально управлять кривой для каждого свойства

Контроллер CSS анимации

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

Имитация псевдо состояний элемента

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

Этот инструмент позволяет моделировать элементы псевдо-состояний hover, active, focused и visited и просматривать стили, связанные с этими селекторами.

Чтобы добавить стили для этих псевдо-состояний, добавьте новый селектор (с символом +) и добавьте: в конец строки селектора.

Например, чтобы добавить hover правило для li с классом logo, создайте новый селектор, li.logo: hover и добавьте в него стили.

Затем вы можете проверить свои стили, проверив состояние элемента: hover, чтобы имитировать hover состояние элемента.

Улучшаем CSS и JavaScript

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

После открытия минифицированного файла на вкладке «Источники» вы можете щелкнуть логотип скобок в левом нижнем углу файла, а DevTools «улучшит» код.

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

Alt + Up / Alt + Down

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

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

Хранение логов

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

Когда эта опция включена, в консоли появляется новый тип логов «Навигация», чтобы показывать обновления страниц или события навигации на разные страницы.

Фильтр Сеть + Логи

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

В Chrome есть язык фильтрации, который поддерживает множество различных свойств, а также операторов, таких как *, для подстановочных совпадений.

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

Покрытие кода

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

Чтобы использовать эту фичу, убедитесь, что у вас установлен Chrome 59 или выше, и перейдите на вкладку «Покрытие». Нажмите «запись», а затем начните работать с приложением. Когда вы закончите, Chrome покажет вам тот код, который был запущен во время сеанса.

Отладка багов на продакшн

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

LogRocket — это инструмент front-end логирования, который позволяет воспроизводить проблемы, как если бы они произошли в вашем собственном браузере. Вместо того, чтобы угадывать, почему происходят ошибки, или просить пользователей сделать скриншот и дамп логов, LogRocket позволяет воспроизводить сеанс, чтобы быстро понять, что пошло не так. Он отлично работает с любыми приложениями, независимо от структуры, и имеет плагины для регистрации дополнительных контекстов из React, Angular и Vue.js.

LogRocket позволяет вашему приложению записывать логи консоли, сетевые запросы / ответы с заголовками и телами, метаданные браузера, экшены / сторы Redux и время выполнения. Он также записывает HTML и CSS на странице, воссоздавая идеальные видео для самых сложных одностраничных приложений.

Вы можете попробовать LogRocket здесь

Надеюсь эти техники DevToold позволят вам проще и с меньшим стрессом разрабатывать веб приложения!

Присоединяйтесь к нашему каналу FrontEndDev в Телеграм!

Секреты Chrome DevTools: запуск, сеть и производительность

Дата публикации: 2020-03-18

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

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

Горячие клавиши

Использование меню для запуска DevTools — это трата впустую драгоценных секунд! Попробуйте вместо этого один из следующих вариантов горячих клавиш:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

или кликните правой кнопкой мыши любом элементе страницы и выберите «Просмотреть код» или «Просмотреть код элемента».

Chrome предоставляет полезную помощь по сочетанию клавиш. В DevTools нажмите F1или выберите «Настройки» в трехточечном меню в правом верхнем углу. Затем выберите из меню «Ярлыки»:

Перемещение DevTools

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

Настройки

Доступ к настройкам DevTool можно получить из того же меню или нажав F1. Это позволяет вам устанавливать такие параметры, как отображаемые инструменты, тема, размеры вкладок и многое другое.

Автозапуск DevTools

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

где http://localhost:8000/ — это ваш URL для разработки. Аналогично для Firefox:

(Имя исполняемого файла может отличаться в разных системах.)

Режим инкогнито во время разработки

Инкогнито / приватный режим не сохраняет данные, такие как куки и localStorage, после закрытия браузера. Режим идеально подходит для тестирования Progressive Web Apps (PWA) и систем авторизации.

Вы можете запустить браузер в режиме инкогнито вручную или добавив в командную строку Chrome —incognito или Firefox —private.

Палитра команд

Chrome DevTools предлагает редактор-палитру команд. Нажмите ctrl + shift + p:

Он обеспечивает быстрый доступ к большинству функций и исходным файлам (нажмите Backspace, чтобы удалить).

Окно консоли

Консоль полезна независимо от того, какую панель DevTool вы используете. Нажмите Esc чтобы показать и скрыть окно консоли в нижней панели.

Найти цвета страницы

Большинство браузеров показывают палитру цветов, когда вы кликаете любое свойство цвета CSS. Chrome также отображает цвета, используемые на странице внизу панели:

На панели можно кликнуть, чтобы посмотреть другие цвета.

Доступность цветового контраста

Палитра цветов также показывает коэффициент контрастности, который указывает на визуальную разницу между текстом переднего плана и цветом фона. Нажмите на соотношение, чтобы увидеть, как это соответствует стандартам доступности AA и AAA, которые гарантируют, что текст может быть прочитан большинством людей:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Любой цвет ниже линии на цветовой шкале будет соответствовать рекомендациям по контрастности AA.

Скриншоты

В палитре команд Chrome ( ctrl + shift + p) введите «снимок экрана», затем выберите параметр для захвата текущего окна просмотра, всей страницы или активного в данный момент элемента. Файл будет сохранен в папке загрузок. (Chrome 74+ также позволяет захватывать области.)

Firefox предоставляет систему «Сделать снимок экрана», доступную в большинстве меню. Кроме того, вы можете кликнуть правой кнопкой мыши любой элемент в представлении DOM и выбрать Снимок узла.

Найти неиспользуемые CSS и JavaScript

Новая панель покрытия Chrome позволяет быстро находить неиспользуемый код. Выберите «Покрытие» в подменю DevTools Другие инструменты», затем нажмите кнопку записи и найдите свое приложение. Затем кликните на любом файле, чтобы открыть его источник:

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

Отключить сетевой кэш

Установите флажок «Отключить кэш» в панели «Сеть», чтобы загрузить все файлы из сети. Это обеспечивает лучшую оценку загрузки страниц в первый раз.

Дросселирование скорости сети

Точно так же нет смысла тестировать вашу систему на скорости 1 Гбит / с, когда большинство пользователей получают доступ через 3G. Панель «Сеть» предоставляет раскрывающийся список «Онлайн» в Chrome и «Регулирование» в Firefox, позволяющий эмулировать определенные скорости сети.

Chrome также предоставляет возможность добавлять собственные дросселирующие профили.

Изменить порядок сетевых ответов

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

Фильтр незавершенных запросов

Чтобы обнаружить неполные или неотвечающие HTTP-запросы, откройте панель «Сеть» и введите is:running в поле «Фильтр».

Фильтр по размеру ответа

В панели «Сеть» введите larger-than:S в поле фильтр , где S — это размер в байтах (1000000), килобайтах (1000k) или мегабайтах (1M). Будут показаны ответы больше, чем выбранный размер. Чтобы найти ответы, которые меньше, используйте -larger-than:S.

Фильтровать сторонний контент

В панели «Сеть» введите -domain:*.yourdomain в поле фильтр , где yourdomain — это ваш основной URL, например sitepoint.com. В оставшихся ответах отображаются сторонние запросы к CDN, трекерам, кнопкам социальных сетей и т. д. Количество запросов и размеры полезной нагрузки отображаются в строке состояния под таблицей.

Блокировка сетевых запросов

Во время тестирования можно заблокировать трекеры, аналитику, виджеты социальных сетей или любые другие запросы. Кликните правой кнопкой мыши любой HTTP-запрос в панели «Сеть» Chrome и выберите «Блокировать URL-адрес запроса», чтобы заблокировать этот URL-адрес, или «Блокировать домен запроса», чтобы заблокировать любой запрос к этому домену. Откроется панель блокировки запросов, где вы можете добавить или удалить дополнительные URL-адреса или домены:

Воссоздать Ajax-запросы

Операции Ajax XMLHttpRequest можно проверить, кликнув правой кнопкой мыши их запись в таблице «Сеть», а затем выбрав параметр копирования, например cURL, fetch или PowerShell. Это создает команду с одинаковыми заголовками, пользовательским агентом, файлами cookie и ссылками, которые можно вставить в редактор или терминал.

Включить автономные переопределения файлов

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

Откройте панель «Переопределения» в «Источниках», нажмите «+ Выбрать папку для переопределений» и выберите нужную папку.

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

Исследуйте Хранилище

Панель «Приложения» в Chrome и панель «Хранилище» в Firefox позволяют просматривать, изменять и удалять значения, хранящиеся в файлах cookie, кэш-памяти, localStorage, sessionStorage, IndexedDB и Web SQL (если поддерживается).
Через панель «Очистить» в Chrome также можно стереть все значения для домена, что может быть полезно при разработке Progressive Web App.

Монитор производительности

Доступ к новому монитору производительности Chrome можно получить из меню «Дополнительные инструменты», который предоставляет анализ использования процессора, размера JavaScript, узлов DOM, прослушивателей событий, пересчетов стилей и многого другого. В отличие от основной панели «Производительность», графики обновляются в режиме реального времени — нет необходимости сначала записывать профиль.

Аудит

Панель «Аудит» Chrome изначально была разработана для оценки функциональности Progressive Web App, но этот инструмент превратился в инструмент общего назначения для анализа производительности, доступности, лучших практик и SEO как в мобильных, так и в настольных системах.

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

Цукерберг рекомендует:  Анимированный фон

Автор: Craig Buckler

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Инструменты разработчика 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.

Chrome Devtools — полезности при разработке

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

Chrome Devtools горячие клавиши и другие полезности при разработке от Google:

Что такое Google Chrome DevTools?

Инструменты разработчика Google Chrome, также известные как Chrome DevTools, — это инструменты для создания и отладки веб-сайтов, встроенные прямо в браузер. Они обеспечивают разработчикам более глубокий доступ к их веб-приложениям и браузеру. Вы можете делать все, начиная с тестирования вашего видового экрана на мобильном устройстве и заканчивая редактированием HTML / CSS на лету, используя даже для измерения производительности отдельных активов вашего сайта.

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

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

Для активации экспериментальных функций dev панели включите данный пункт:

Открытие Chrome DevTools

Есть несколько способов открыть Chrome DevTools.

1. Откройте меню браузера

Вы можете открыть Chrome DevTools из меню Chrome, нажмите «Дополнительные инструменты», а затем нажмите «Инструменты разработчика».

2. Открыть нажатием правой кнопки мыши

Вы также можете щелкнуть правой кнопкой мыши по любому элементу на веб-странице и нажать «Посмотреть код», который запустит Chrome DevTools.

3. Открыть с помощью клавиш быстрого доступа

Вы также можете использовать следующие сочетания клавиш:

  • Windows: F12 или Ctrl + Shift + I
  • Mac: Cmd + Opt + I

Советы и приемы

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

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

Вы можете легко получить доступ к любому файлу в текущем проекте или веб-странице, нажав Ctrl + P ( Cmd + P), когда Chrome DevTools открыт и ищет имя.

Pretty Print <>

Знаете ли вы, что в Chrome DevTools имеется красивое форматирование как сжатых стилей, так и сжатых java script? Вы можете легко изменить форматирование вводимого кода, нажав <>, который вернет к нормальному виду на самом деле сжатый код.

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

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

Изменить свойства CSS

Как и при редактировании HTML, вы также можете изменить CSS в Chrome DevTools и просмотреть, как будет выглядеть результат. Это, вероятно, одно из самых распространенных применений для этого инструмента. Просто выберите элемент, который вы хотите отредактировать, и под панелью стилей вы можете добавить / изменить любое свойство CSS, которое вы хотите.

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

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

Вы также можете выполнить поиск с помощью селекторов CSS, нажав Ctrl + F( Cmd + F

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

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

Перейти к номеру строки

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

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

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

Изменение положения стыковки DevTools

Вы также можете изменить положение стыковки Chrome DevTools. Есть три варианта выбора: Bottom, Side и Undocked (плавающий). Для переключения между положениями док-станции вы можете нажать Ctrl + Shift + D ( Cmd + Shift + D). Затем в правом верхнем углу выберите положение в котором должна находится док-станция.

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

Режим устройства

Вы можете протестировать свой веб-сайт и мультимедийные запросы что бы убедиться что срабатывает адаптивная верстка, перейдя в режим устройства. Или, возможно, вам нужно увидеть, на каком разрешении экран как отображается страница, поэтому вы знаете, где применять медиа-запросы. Чтобы войти в режим устройства, щелкните значок маленького телефона в Chrome DevTools или вы можете нажать Ctrl + Shift + M( Cmd + Shift + M). Затем вы можете выбрать, какое устройство вы хотите эмулировать, ориентацию и даже разрешение. Вы также можете изменить дросселирование сети, чтобы увидеть, как ваш веб-сайт будет отображаться на обычном 2G-соединении.

Пользовательские цветовые палитры и набор цветов

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

Изменить формат цвета

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

Датчики эмуляции устройства

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

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

Вы когда-нибудь пытались выяснить, откуда приходит скрытый стиль, скажем: атрибут hover? В Firefox инструментарий dev позволяет увидеть это при выборе элемента, но не в Chrome DevTools. Однако в Chrome DevTools есть кое что лучше, называемое состоянием элемента переключения. Это позволяет принудительно ввести состояние элемента:

Копировать изображение как URI данные (закодированные в base64)

Вы можете сохранить любое изображение с веб-страницы в виде URI данных или, скорее, закодировать в base64. Нет необходимости использовать бесплатный онлайн-конвертер, поскольку он уже встроен в Chrome DevTools. Для этого просто нажмите на панель «Сеть», щелкните изображение, а затем щелкните его правой кнопкой мыши и выберите «Копировать изображение в качестве URL-адреса данных».

Затем вы получите изображение в следующем формате: » URURIsdata:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABAAAAAFt…»

Показать агент пользователя Shadow DOM

Когда вы имеете дело с вещами, такими как кнопки и входы, веб-браузер обычно создает скрытые атрибуты. Чтобы увидеть эти щелчки в настройках, нажмите F1( ?), вы можете включить «Показать пользовательский агент DOM». Как вы можете видеть в этом примере, мы теперь можем видеть, что строящийся теневой корень #, который строится. Вы даже можете сделать этот шаг дальше и применить стили CSS к скрытым атрибутам.

Выберите следующее происшествие (вия)

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

Workspaces — подключение локальных файлов к проекту

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

Для этого щелкните правой кнопкой мыши по папке и выберите «Добавить папку в локальную рабочую область». Затем, чтобы сделать ее постоянной, щелкните правой кнопкой мыши файл и выберите «Карта для файлового системного ресурса …».

Сетевой диафильм

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

Для этого щелкните панель «Сеть», щелкните значок камеры и нажмите Ctrl + R( Cmd + R), чтобы обновить страницу. Затем он покажет вам, как ваша страница отображается от начала до конца.

Мониторинг производительности сети

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

Чтобы запустить этот кликните на панели «Временная шкала» и нажмите Ctrl + R( Cmd + R), чтобы обновить страницу. Затем вы можете щелкнуть на панели «Сводка» в панели «Агрегированные».

DOMContentLoaded

В инструментах разработчика вы можете точно увидеть время DOMContentLoaded и общее время загрузки. Чтобы запустить это кликните на панели «Сеть», нажмите «Показать обзор» и нажмите Ctrl + R( Cmd + R), чтобы обновить страницу. Синяя линия появится для DOMContentLoaded вместе с красной строкой для общего времени загрузки. Обычно все, что осталось от синей линии или касается ее, — это активы, которые блокируют DOM или называются ресурсами блокировки рендеринга.

Профили демпфирования сети

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

Чтобы добавить настраиваемый профиль, щелкните панель «Сеть» и выберите раскрывающийся список «Дросселирование». Затем вы можете нажать «Добавить настраиваемый профиль …» и ввести имя, пропускную способность и задержку.

Цукерберг рекомендует:  Вакансии Once upon a time...

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

Chrome добавил еще одну отличную особенность в средствах разработчика под названием «Панель безопасности».Даная панель может быть очень полезной для отладки HTTPS-миграций и быстрого исправления предупреждений о смешанном содержании. Чтобы запустить кликните на панели «Безопасность» и нажмите Ctrl + R( Cmd + R), чтобы обновить страницу. Затем он отобразит защищенные сценарии в зеленом цвете и незащищенные сценарии в красном цвете.

Проверка Google AMP HTML

Google Accelerated Mobile Pages (AMP) — новая инициатива с открытым исходным кодом для ускорения работы мобильной сети с использованием облегченных HTML-страниц. Чтобы Google индексировал версию вашей версии AMP, вы должны убедиться, что она проверена. Для запуска щелкните на панели «Консоль». Затем вам нужно добавить #development=1версию AMP в адресную строку браузера. Затем нажмите Ctrl + R( Cmd + R), чтобы обновить страницу. Затем произойдет отображение. Узнайте больше об ошибках проверки AMP .

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

Знаете ли вы, что вы можете запускать Firefox Developer Tools в Google Chrome? Valence — экспериментальное дополнение от команды Firefox, которая позволяет Firefox Developer Tools отлаживать более широкий спектр браузеров. Valence требует Chrome 37.0 или выше.

Основная часть содержимого — перевод данной статьи:

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

Содержание:

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

На сегодняшний день одними из лучших инструментов разработчика обладает браузер 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 Вы найдёте инструменты для тестирования производительности сайта, что позволит наметить пути для дальнейшей оптимизации.

Цукерберг рекомендует:  Html - HTML png и IE

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

Бесплатные уроки по инструменту Chrome Developers Tool

Авторы и ведущие тренинга: Арсений Батыров и Виталий Котов

Курс создан для быстрого погружения в специфические для тестирования навыки работы с этим инструментом. Знания, приобретенные на этом курсе, помогут вам эффективно работать с 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

Технические требования

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

  • Windows 7/10 / Mac OS High Sierra+ / Ubuntu 16.06+
  • Процессор i-серии (i3, i5, i7) или аналогичный от AMD
  • Минимум 4 GB RAM
  • 1 GB на жёстком диске
  • Разрешение экрана минимум 1280 x 800
  • Желательно — устройство на Andro >Внимание!

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

Если вы не уверены, что знаете все это в должной мере — пройдите простой тест: https://www.learnqa.ru/abc_test. Если по результатам теста вы получите меньше 20 баллов — мы рекомендуем пройти короткий курс “Азбука IT”. На нем вы сможете быстро получить все необходимые знания, которые совершенно точно пригодятся вам в дальнейшем.

Формат

2 занятия (2 часа теории) + много практических заданий для самостоятельной работы + постоянные консультации тренера в скайп-чате.

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

Теоретическую информацию можно посмотреть в любое удобное время.

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

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

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

Условия

Стоимость участия для физических лиц: 3 000 рублей за весь курс.

Стоимость участия для юридических лиц: 4 000 рублей за весь курс за одного участника. При регистрации от 3-х участников на один курс действует 15% скидка.

Услуги оказываются на основании публичного договора оферты. Ознакомиться с договором можно ЗДЕСЬ.

Если Вы хотите оплатить тренинг прямо сейчас, то нажмите кнопку выше (если кнопка активна, значит можно оплачивать не беспокоясь о наличии мест). После оплаты мы пришлем письмо о регистрации на курс и подтверждение оплаты. Если Вы не получили письмо в течение рабочего дня, просто отправьте сообщение на trainings@software-testing.ru

Если Вы хотите совершить оплату позже, для гарантированного участия обязательно забронируйте место на тренинге, для этого необходимо нажать на кнопку ЗАПИСАТЬСЯ справа от тренинга и заполнить все необходимые поля

Если у Вас есть какие-то вопросы, их можно задать по указанному выше адресу.

Chrome DevTools — уникальный инструмент для веб-разработки

Здравствуйте, дорогие друзья!

Сегодня я хочу рассказать об уникальном инструменте для веб-разработчиков, встроенном в популярный браузер Google Chrome. Этот инструмент называется WebTools или веб-инспектор. Из-за простоты и удобства им могут пользоваться как люди, профессионально занимающиеся созданием сайтов, так и те, кто лишь немного знаком с языками HTML и CSS. Инструмент позволяет исправлять ошибки в коде сайта во время его создания, вносить изменения в готовые сайты: изменять расположение элементов, их дизайн и многое другое.

Рассмотрим инструмент WebTools подробнее.

Как открыть окно веб-инспектора

Это можно сделать двумя способами:

  • 1 способ: при активном окне браузера Google Chrome нажать клавишу F12.
  • 2 способ: щелкнуть ПКМ на том элементе, код которого вы хотите посмотреть, и в контекстном меню выбрать Просмотреть код. В этом случае WebTools покажет именно эту часть кода.

Окно инструмента состоит из двух частей. По умолчанию, слева открывается вкладка Elements, в которой отображается HTML-код страницы, а справа – вкладка Styles. В ней расположен CSS-код выделенного элемента.

Сразу следует отметить, что окно WebTools можно располагать по-разному. Для этого щелкаем по значку рядом с кнопкой закрытия и выбираем нужный вариант:

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

Способы перемещения по коду

Возможны два таких способа.

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

Для переключения режимов перемещения используется самая левая кнопка.

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

Главное достоинство WebTools состоит в том, что все изменения в коде сразу видны на веб-странице в окне браузера, то есть этот инструмент превращает ваш браузер в визуальный редактор.

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

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

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

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

Тестирование адаптивной верстки

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

Кодирование изображения в Base64

В статье «Оптимизация сайта с помощью схемы data: URL» я писал о том, что для ускорения загрузки сайта небольшие изображения можно закодировать в формате data URL и вставлять такой код непосредственно в HTML-страницу. Так вот, наш уникальный инструмент позволяет выполнить такую кодировку. Как это сделать?

  1. Переходим на вкладку Network
  2. Нажимаем img
  3. Нажимаем клавишу F5
  4. Выбираем нужную картинку
  5. Щелкаем правой кнопкой по ней и выбираем Копировать data URL
  6. Переходим на вкладку Console и вставляем скопированное
  7. Появляется код, которым можно заменить нашу картинку

Секретная фишка

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

Недостатки

Работая с рассмотренным средством редактирования кода, вы сразу заметите его недостаток – все изменения, вносимые в код, не сохраняются. После обновления страницы в браузере она примет первоначальный вид. Чтобы эти изменения сохранить, необходимо открыть соответствующие файлы в текстовом редакторе, отредактировать код и сохранить их. Хотелось бы, чтобы все корректировки, производимые в WebTools, сразу же сохранялись. Эта проблема решаема, и как это сделать, мы рассмотрим в следующем посте. Поэтому подписывайтесь на обновления блога, чтобы не пропустить новые материалы (форма для подписки справа).

А пока для наглядности предлагаю посмотреть видео:

Сегодня я познакомил вас с одним из инструментов, полезных для веб-разработки, но таких инструментов много, поэтому команда WebForMyself разработала новый курс «Инструменты Front-End разработчика» . Если вы занимаетесь созданием сайтов, то вам этот курс будет наверняка интересен и полезен. Вот ссылка на курс

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

Надеюсь, и моя статья была вам полезна. Если так, не забудьте поделиться ей в cоцсетях.

Напишите в комментариях, используете ли вы инструмент WebTools, и, если пользуетесь, то какими приемами можете поделиться.

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

Инструменты разработчика (Dev Tools, Console) в Chrome открываются либо по нажатию F12 либо по Ctrl+Shift+i либо кликнуть правой кнопкой мыши и выбрать «просмотреть код» .

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

Затем посмотреть какие стили применяются к блоку. Для этого потребуются вкладки Style и Computed. Вкладка Computed также покажет настоящие размеры блока, его внешние и внутренние отступы и положение.

Удобно:

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

Если кликнуть на квадратик у цветовых значений, откроется окно цветовая палитра с пипеткой.

Как проверить адаптивность сайта

На панели инструментов разработчика нужно выбрать вторую слева кнопочку (Toggle Device Toolbar) или нажать Ctrl+Shift+M. Откроется окно в котором можно изменять ширину вьюпорта, масштаб, плотность пикселей, выбрать мобильное устройство или десктоп, поворот экрана. Если вы не видите возможности выбора какой-то из характеристик, то настройте панель, нажав на 3 точки справа.

Используем 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.
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих