Developer tools что это за программа

Анализ производительности с помощью Chrome Dev Tools

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

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

В этой статье мы поговорим про один из таких инструментов: Chrome Developer Tools. В частности, мы рассмотрим использование вкладок Audits и Performance при оценке веб-приложений и обнаружении проблем с производительностью.

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

Всё, Что Нужно Знать О Chrome DevTools. Продвинутый Курс Тестирование ПО. Занятие 5.

Требования

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

1: Подготовка браузера

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

• Скорость загрузки
• Производительность кода во время выполнения

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

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

Запустите браузер Chrome и откройте вкладку в режиме инкогнито (COMMAND+SHIFT+N в macOS или CTRL+SHIFT+N в Windows или Linux). Перейдя в режим инкогнито, откройте сайт, который вы хотите протестировать.

Затем откройте DevTools, нажав COMMAND+OPTION+I в macOS или CTRL+SHIFT+I в Windows или Linux. Если вы хотите изменить расположение консоли DevTools, нажмите на три вертикальные точки на панели инструментов и сделайте выбор в опции Dock Side.

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

Примечание: Вкладка Audits может быть скрыта за кнопкой со стрелкой More Panels.

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

На следующем этапе мы проведем аудит для поиска узких мест в производительности.

2: Проведение аудита

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

Обзор DevTools за 30 минут для новичков HTML/CSS/JavaScript

Во вкладке Audits в Chrome DevTools мы настроим инструмент аудита. Перед нами на экране следующие настройки:

• Device: дает возможность переключать пользовательский агент между опциями Mobile и Desktop. По состоянию на третий квартал 2018 года более половины веб-трафика генерируется мобильными устройствами, поэтому мы будем проводить аудит Scotch.io в режиме Mobile.
• Audits: этот параметр позволяет нам выбирать, какое качество приложения мы хотим оценить и улучшить. В нашем случае производительность является основной проблемой, поэтому вы можете снять все остальные флажки.
• Throttling: позволяет имитировать условия просмотра веб-страниц на мобильном устройстве. Мы будем использовать опцию Simulated Fast 3G, 4x CPU Slowdown. Это поможет рассчитать, сколько времени займет загрузка страницы в условиях мобильного устройства.
• Clear Storage: позволяет очистить все кэшированные данные и ресурсы для протестированной страницы, чтобы проверить, как посетители воспринимают сайт, открывая его впервые. Поставьте этот флажок, если еще не сделали этого.

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

3: Анализ отчета по аудиту

По завершении аудита на экране появится отчет. Давайте рассмотрим его подробнее.

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

В разделе Metrics вы найдете количественное представление различных аспектов эффективности сайта.

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

В разделе Diagnostics представлена ​​дополнительная информация о производительности, обычно указывающая на факторы, определяющие время загрузки веб-страницы.

В разделе Passed audits выделены виды проверки производительности, которые прошла веб-страница.

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

4: Устранение проблем

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

First Meaningful Paint

First Meaningful Paint сообщает вам, когда основной контент страницы становится визуально доступным. По данным аудита, прежде чем вы увидите основной контент, проходит около 3,4 секунды. Это можно подтвердить, нажав кнопку View Trace. Перейдите во вкладку Performance, где вы сможете просматривать различные состояния пользовательского интерфейса во время загрузки, чтобы узнать, что происходит в каждый конкретный момент времени.

Обратите внимание, в какое время контент страницы становится видимым.

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

Speed Index

Speed Index показывает, как быстро визуализируется контент на странице.

В нашем случае это заняло около 7.2 секунд.

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

First CPU Idle

Метрика First CPU Idle (также известная как First Interactive) сообщает, когда страница становится минимально интерактивной (свободного CPU достаточно, чтобы обрабатывать вводимые пользователем данные, такие как клики, смахивания и т.д.). Согласно данным аудита, это занимает примерно 6,5 секунд. Всегда рекомендуем сводить это значение к минимуму.

Чтобы решить эту проблему, вам необходимо предпринять те же действия, что и с метрикой Speed Index.

Time to Interactive

Метрика Time to Interactive показывает время, которое необходимо, чтобы страница стала полностью интерактивной. Аудит в нашем примере показывает 6,9 секунды. Интерактивность в этом контексте описывает точку, в которой:

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

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

Estimated Input Latency

Метрика Estimated Input Latency описывает реакцию приложения на ввод пользователя. По этой метрике аудит фиксирует около 170 миллисекунд. У приложений обычно есть 100 миллисекунд для ответа на ввод пользователя, а Lighthouse и вовсе нацеливается на 50 миллисекунд. Причина этого несоответствия заключается в том, что Lighthouse использует прокси-метрику, которая представляет доступность основного потока для оценки ввода, а не для его измерения.

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

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

5: Решение проблем в разделе Opportunities

В разделе Opportunities перечислены советы по оптимизации, которые могут улучшить производительность.

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

Чтобы исправить это, вы можете позволить браузеру использовать такие ресурсы, добавив атрибут rel к тегам ссылок:

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

Заключение

Итак, в этом мануале мы получили отчет о производительности сайта (на примере Scotch.io) с помощью инструмента аудита, а также изучили перспективные методы устранения выявленных узких мест.

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

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

Раздел основ веба на сайте Google Developers – отличный ресурс для дальнейшего изучения производительности и методов ее оптимизации.

Источник: www.8host.com

Введение в Chrome DevTools. Панель Elements

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

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

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

macOS — Ctrl + Cmd + I

Linux — Ctrl + Shift + I

Настройки DevTools

Тема интерфейса

Можно настроить инструменты разработчика и изменить их внешний вид — например, выбрать тёмное оформление интерфейса.

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

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

Расположение панелей

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

Вкладка Elements

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

Как получить информацию об элементе

Есть три способа получить информацию о любом элементе на странице — выбирайте самый удобный для себя.

Через инспектор. Способ удобен, если вы точно видите элемент и можете кликнуть по нему правой кнопкой мыши. Выберите Inspect или «Посмотреть код». Заодно сразу откроется панель разработчика.

Поиск по элементам. При показанном отладчике нажимаем Ctrl+F, и внизу появится окно поиска по тегу, атрибуту, классу или текстовому содержимому элемента.

Введём, например, класс header , и увидим все подходящие элементы:

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

Как внести изменения в элемент на странице

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

Чтобы переместиться вперёд, нажмите Tab, назад — Shift+Tab, а чтобы скрыть элемент, нажмите H.

Как изменить разметку страницы

Любители мыши кликают правой кнопкой на элемент и выбирают Edit as HTML, а фанаты клавиатуры нажимают F2. Результат сразу отображается на экране.

Проверка вёрстки на переполнение

Мы верстали, редактировали, а как проверить, что вёрстка не развалится, если количество элементов изменится? Сделаем тесты на переполнение.

Проверка на переполнение текстом. Есть два способа:

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

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

Сетка при переполнении не должна ломаться, а логика потока должна сохраняться.

Просмотр и тестовое редактирование стилей

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

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

Блок с метриками (на скриншоте) на самом деле находится в самом низу — нужно проскроллить список до конца.

Меняем стили прямо в браузере

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

Напишем правило с ошибкой. Правило не применится, потому что его не существует. Оно зачёркнуто, а слева появляется иконка с предупреждением.

А ещё мы можем разворачивать сокращённое правило, кликнув на стрелку. Например, так можно развернуть правило для border-style .

Слева у всех элементов есть чекбокс для включения и выключения стилей.

Данные о цвете

У элементов со свойством color легко меняется цвет — для этого нужно воспользоваться пипеткой. Можно выбрать любой цвет из интерфейса или указать цвет в RGBA или HSL.

Это далеко не все возможности Chrome DevTools, но рассказ обо всём сразу займёт не один час. Подпишитесь на рассылку, чтобы не пропустить следующие выпуски.

Следующая часть

Источник: htmlacademy.ru

DevTools для «чайников»

Технологический митап, организованный международным IT-разработчиком Altenar в формате открытого и доверительного разговора про насущные проблемы в области разработки ПО, собрал немало участников из числа начинающих и продвинутых программистов.

Наиболее заметным стало выступление независимого WEB-разработчика Антона Грибанова. Он поделился своим опытом использования DevTools. На самом деле, обзорных статей по заявленной тематике для профессионалов немало. С ними легко можно ознакомиться на профильных ресурсах (тык, тык, тык, тык).

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

Говорим по понятиям

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

Современные браузеры, Safari, Firefox, Microsoft Edge, Chrome, Яндекс и другие, имеют встроенные инструменты разработчика, позволяющие просмотреть исходный код сайта. Отдельно устанавливать их не требуется. С их помощью можно просматривать и отлаживать HTML сайта, его CSS и Javascript. Также можно проверить сетевой трафик, потребляемый сайтом, его быстродействие и много других параметров.

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

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

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

HTML (англ. HyperText Markup Language) ─ это скелет веб-страницы. Для того, чтобы вся эта история начала двигаться и нужен Javascript (календарики, выпадающее меню, всплывающие окна, анимация и прочее, делается с помощью JS). Для придания странице божеского вида вам понадобится CSS (каскадные таблицы стилей).Представим HTML-документ в простейшей форме:

Источник: vc.ru

Chrome Developer Tools для тестировщика

Какой была ваша первая зарплата в QA и как вы искали первую работу? Мега-обсуждение в нашем телеграм-канале.

• Что такое DevTools
• Как открыть инструменты разработчика
• Поиск элемента
• Добавление и редактирование элементов
• Изменение расположения DOM-элементов в дереве
• Поиск CSS-свойства в Sources
• Скриншот элемента
• Использование результатов предыдущей операции в консоли
• Многострочные скрипты
• Локаторы для автоматизированного тестирования в Selenium
• Очистка cookies
• Переход к определенной строке
• Переключение между файлами в рамках проекта
• Watch Expression
• JavaScript Breakpoints
• XHR/Fetch Breakpoints
• Включение нескольких курсоров
• Мониторинг производительности

Что такое DevTools

Google Chrome — один из самых популярных браузеров. Он доминирует на рынке, и в ближайшие пару лет это вряд ли изменится.

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

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

Вообще инструменты разработчика доступны во всех основных браузерах. Но Chrome Dev Tools выделяются на их фоне, поскольку команда Google Chrome постоянно улучшает и расширяет их функционал.

В этой статье мы дадим 16 советов по использованию инструментов разработчика Chrome для кроссбраузерного тестирования. В следующем разделе мы расскажем, как зайти в Dev Tools. Если вы знаете, как это сделать, можно пролистать дальше и перейти сразу к советам.

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

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

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

1. Откройте Google Chrome. Кликните правой кнопкой мыши по экрану. В открывшемся меню выберите Inspect.

2. Второй способ открыть инструменты разработчика — использовать сочетание клавиш. Можно нажать или Ctrl + Shift + C (Cmd + Option + C), или Ctrl + Shift + J (Cmd + Option + J).

В этой статье мы будем работать с инструментами разработчика в Google Chrome. Но аналогичный функционал есть и в других браузерах, например, в Mozilla Firefox и Safari. Открывается он примерно так же, как в Chrome: правый клик мышью и выбор Inspect Element в появившемся меню.

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

1. Поиск элемента

Эта функция помогает тестировщику (или разработчику) искать в DOM-дереве нужные элементы страницы.

Откройте Chrome Dev Tools и зайдите на вкладку Elements. Собственно, ее не нужно искать: по умолчанию она открывается первой. Находясь в этом разделе, нажмите Ctrl + F (Cmd + F).

Откроется поле для ввода, где вы сможете вставить искомое слово. После ввода инструмент подсветит этот элемент в коде.

2. Добавление и редактирование элементов

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

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

3. Изменение расположения DOM-элементов в дереве

Вы можете изменить позиции элементов во вкладке Elements, просто перетаскивая их.

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

4. Поиск CSS-свойства в Sources

Тестировщику часто приходится искать в Sources свойство, определенное в Elements, для внесения каких-то изменений. Это можно быстро сделать при помощи Ctrl + Click (Cmd + Click). Затем перейдите во вкладку Sources, где нужное свойство будет подсвечено.

5. Скриншот элемента

Тестировщики могут делать скриншоты элементов. Для этого выберите элемент и нажмите Ctrl + Shift + P (Cmd + Shift + P).

Откроется палитра команд. Выберите в ней Capture Node Screenshot, чтобы сделать скриншот элемента.

6. Использование результатов предыдущей операции в консоли

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

7. Многострочные скрипты

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

Консоль разработчика работает аналогично.

Но в Console в Chrome Dev Tools тестировщик может применять многострочные скрипты. Для этого в конце каждой строки нажимайте не Enter, а Shift + Enter.

Вкладка Console быстро заполняется различными логами. Чтобы очистить консоль, нажмите Ctrl + L (Cmd + K) или напишите команду clear();

8. Локаторы для автоматизированного тестирования при помощи Selenium

Для автоматизированного тестирования с использованием Selenium очень часто используются локаторы. Они нужны для поиска конкретных элементов на странице.

В Selenium есть следующие локаторы:

1. ID
2. Name
3. Linktext
4. Partial Linktext
5. Tag Name
6. Class Name
7. CSS Selector
8. Xpath

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

Например, если вам нужен Xpath элемента, вы можете скопировать его при помощи инструментов разработчика, и «скормить» своим скриптам в Selenium.

9. Очистка cookies

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

В Google Chrome для этого есть специальная опция в настройках. Но тестировщик может сэкономить время и быстро очистить все cookies на конкретном сайте или странице.

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

10. Переход к определенной строке

В инструментах разработчика можно перейти к указанной строке, введя ее номер в строке поиска. Для открытия поиска нажмите Ctrl + O (Cmd + O).

11. Переключение между файлами в рамках проекта

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

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

Поиск по файлам открывается клавишами Ctrl + P (Cmd + P).

12. Watch Expression

В инструментах разработчика Chrome есть функция под названием Watch Expression. Найти ее можно во вкладке Sources, в колонке справа.

Тестировщику во время дебага нужно постоянно следить за переменными и выражениями. Искать их снова и снова очень затратно по времени. Watch Expression может делать это за вас.

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

13. JavaScript Breakpoints

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

Например, API-запрос, использующий AJAX, может запускаться 4 раза и возвращать разные коды статуса. Для эффективного тестирования его нужно проверять на каждом этапе. Для этого в инструментах разработчика есть специальная фича — JavaScript Breakpoints.

Используя JavaScript Breakpoints, вы можете определять строку, на которой хотите приостановить выполнение кода.

Чтобы воспользоваться этой функцией, просто кликните на номер строки, на которой выполнение JavaScript-кода должно прерваться.

14. XHR/Fetch Breakpoints

Во вкладке Sources под Watch Expression есть раздел XHR/Fetch Breakpoint. С его помощью вы можете устанавливать брейкпоинт в скрипте при каждой отправке запроса.

Тестировщик также может использовать эту функцию только для определенных запросов, с конкретными URL.

15. Включение нескольких курсоров

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

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

Dev Tools позволяют тестировщику следить за производительностью сайта прямо в панели инструментов. Для этого нужно зайти во вкладку Performance, нажать Ctrl + E (Cmd + E), а затем — Ctrl + R (Cmd + R) для перезагрузки страницы. Чтобы прекратить замеры производительности, нажмите кнопку «Stop».

Инструменты разработчика сильно упрощают и ускоряют работу. Обязательно используйте их во время тестирования!

Источник: testengineer.ru

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

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

Я собрал подборку полезных инструментов внутри DevTools, которые не очень распространены в QA, но при этом могут значительно упростить и ускорить вашу работу. Отмечу, что говорить мы будем именно о Chrome DevTools, хотя и в других браузерах есть аналогичные консоли разработчиков. Итак, поехали!

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

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

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

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

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

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

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

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

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

1. Откройте панель разработчика (F12) и вызовите Command Menu (Ctrl+Shift+P). 2. Введите Show Coverage и нажмите Enter. Откроется вкладка Coverage. Дальше будет работать в ней. 3.

Нажмите на кнопку Start instrumenting coverage and reload page. 4. После этого в DevTool выведется таблица, где по функциям (или по блокам) будет отображено, сколько на странице неиспользуемого кода. 5. Кликните по одному из пунктов. После этого на вкладке Sources появится код с соответствующим цветным маркером.

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

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

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

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

1. Откройте панель разработчика (F12). 2. Откройте вкладку Sources. 3. На панели файлов слева откройте вкладку Overrides. 4. Нажмите на кнопку Select folder for overrides. 5. Выберите папку, в которой вы будете хранить изменения, которые вносите на страницу. 6. Во всплывающем окне разрешите доступ DevTools к выбранной папке.

7. Найдите файл с кодом страницы во вкладке Network. Для этого нужно перезагрузить страницу и сортировать все по Doс. Чаще всего этот файл называется index.html. В нашем примере ниже это Projects. 8. Кликните правой кнопкой по этому файлу и сохраните его Save for overrides.

Теперь можно вносить в код изменения, которые сохранятся и после перезагрузки страницы. 9. Для этого найдите код нужного элемента во вкладке Elements с помощью специального инструмента (Ctrl+Shift+C) и скопируйте его. 10.

Найдите скопированный элемент во вкладке Sources в документе с кодом страницы (чтобы открыть поисковую строку, нажмите Ctrl+F). 11. Внесите в него изменения и нажмите Ctrl+S, чтобы сохранить их. Перезагрузите страницу. Готово!

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

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

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

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

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

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

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

1. Откройте панель разработчика (F12) и вызовите Command Menu (Ctrl+Shift+P). 2. Введите Show Request Blocking и выберите Show Network Request Blocking. Ниже откроется панель Network Request Blocking. 3. На вкладке Network выберите элемент, запрос к которому вы хотите заблокировать.

4. Из меню Headers скопируйте его и нажмите на кнопку Add Pattern в панели Network Request Blocking. 5. Вставить запрос в поле в меню Network Requesting Block и нажмите на кнопку Add. 6. Убедитесь, что чек-боксы запроса и Enable network request blocking активированы. 7. Перезагрузите страницу и проверьте изменения.

Готово! Мы видим, что вместо картинок, запрос к которым мы заблокировали, появился альтернативный текст:

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

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

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

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

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

Если нужного города в списке не оказалось, кликайте по кнопке Manage справа от выпадающего списка с доступными локациями. Затем Add Location и добавляйте город сами — с названием, координатами и часовым поясом. Мне эта возможность DevTools пригодилась, когда мы работали над сайтом одного из британский футбольных клубов. Нужно было проверить, учитывается ли геолокация посетителя на странице с расписанием будущих игр.

Подмена User-Agent

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

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

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

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

После этого из выпадающего списка ниже вы сможете выбрать нужный User-Agent. Если в списке нет нужного User-Agent, можно ввести данные вручную. Для этого в выпадающем списке выберите пункт Custom и пропишите параметры в строке ниже.

Заключение

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

Источник: fuse8.ru