14 наиболее полезных особенностей Chrome DevTools


Оглавление (нажмите, чтобы открыть):

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

Использование панели команд

Панель команд дает вам доступ к почти всем особенностям Devtools с помощью одной команды.

Для того, чтобы активировать его, используйте Ctrl + Shift + P.

Использование панели команд в Chrome DevTools

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

Если вы удалите > и замените его на ? , вы увидите, как получить доступ к другим командам.

Например, вы можете перейти к определенной строке в файле, написав : после нее номер строки, по которой вы хотите перейти.

Переход к файлам и строкам

>screenshots делать разные скриншоты

>resources очистить данные сайта

>appearance переключиться в темный режим

Панель источников

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

  • Страница: все ресурсы, загруженные страницей. Вы можете редактировать CSS без необходимости сохранения файла, однако изменения в файлах JavaScript должны быть сделаны через панель Файловая система или Переопределения.
  • Файловая система: для локальной разработки. Вы можете использовать Chrome devtools для редактирования файлов из вашего приложения и просмотра изменений.
  • Переопределения: для рабочих сайтов вы можете использовать devtools для редактирования файлов с живых сайтов и просмотра изменений.
  • Сценарии содержимого: см. Источники из расширений.
  • Фрагменты кода. Вы можете написать фрагменты кода для запуска на веб-сайтах.

Изменения в файлах JavaScript:

Файловая система

При локальной разработке изменения в файлах JS могут быть сделаны на панели файловой системы. Для этого выполните следующие действия:

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

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

Внесение локальных изменений с помощью панели файловой системы

Переопределение

Вы также можете вносить изменения в файлы JS на рабочих сайтах с помощью панели «Переопределения».


Как сделать это:

  • Создайте папку на своем компьютере, чтобы сохранить переопределения.
  • Откройте панель Overrides в Chrome и выберите эту папку.
  • Перейдите на панель Page , щелкните правой кнопкой мыши файл, который вы хотите отредактировать, и выберите «Сохранить для переопределений» . Вы должны увидеть фиолетовую точку рядом с добавленными файлами.
  • Вернитесь на панель Overrides , отредактируйте файл, сохраните и перезагрузите.

Теперь вы сможете увидеть свои изменения на живом сайте.

Внесение изменений в рабочие сайты с использованием переопределений

Изменения в файлах в Overrides работают только при открытых devtools.

Вы можете щелкнуть правой кнопкой мыши по файлам и выбрать «Удалить», чтобы удалить переопределения.

Сниппеты

Сниппеты — это фрагменты кода, которые вы можете запустить на любом веб-сайте.

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

Чтобы создать сниппет:

  • Перейти на панель Snippets
  • Нажмите на New snippet
  • Написать код
  • Сохранить
  • Щелкните правой кнопкой мыши и запустите.

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

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

Вы можете быстро получить доступ к панели производительности через панель команд, набрав >performance .

Rendering

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

Coverage

Вы также можете получить доступ к тому, сколько кода на самом деле используется на странице, используя команду >coverage . Он покажет вам все CSS и JS файлы, загруженные на странице, отсортированные по неиспользуемым байтам.

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

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

Monitor

Монитор позволяет отслеживать такие показатели, как загрузка процессора, прослушиватели событий JS, количество восстановленных раскладок и повторных стилей / сек…

Чтобы узнать, какие свойства CSS запускают повторный пересчет стилей, просмотрите этот ресурс: csstriggers.com.

Layers

Эта панель показывает, как ваша страница отображается с высотой слоев в 3D.

На этом пока все, продолжение надеюсь будет позже!)

Какие уникальные функции у Firefox DevTools есть, что у Chrome DevTools нет, и наоборот?

Поэтому мне интересно, какие функции имеют Firefox DevTools, которые не предлагаются Chrome DevTools?

Можете ли вы дать мне объективный ответ на этот вопрос?

firefox google-chrome google-chrome-devtools firefox-developer-tools

2 ответа

4 Решение NoBugs [2020-02-28 12:47:00]

Просмотр свойств DOM Проверьте свойства, функции DOM страницы и т.д. (Вы заметите, что свойства объекта обычно не перечисляются на консоли в Chrome, вы никогда не узнаете, что body.innerHTML существует, глядя на «document.body» в консоли.)

Панель инструментов разработчика Интерфейс командной строки для инструментов разработчика.

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

Редактор веб-аудио Изучите график аудиоузлов в аудиоконференции и измените их параметры.

Выполнение снимков экрана Сделайте снимок экрана со всей страницы или одного элемента.

Некоторые дополнительные инструменты на панели настроек:

Измерьте часть страницы

На панели сети отображается трассировка стека причины каждого сетевого запроса, в Chrome вам нужно пройти через консольный журнал сетевых запросов и найти его и развернуть. Кроме того, вы можете увидеть фактический предварительный просмотр (на вкладке предварительного просмотра) ответа xhr, если он возвращается html.

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

Firefox DevTools

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

  • Редактор холста
  • Редактор веб-аудио
  • Редактор шейдеров
  • Панель инструментов разработчика (GCLI)
  • Scratchpad
  • DOM Inspector
  • Правители страницы
  • Инструменты скриншотов
  • Инспектор шрифтов
  • Измерить части страницы
  • Возможность переключения отображения стилей браузера
  • Тема Firebug
  • Переключение между iframe
  • Инструменты для отладки интерфейса браузера
  • Информация о безопасности для отдельных сетевых запросов
  • Сравнение сетевого кэширования

Chrome DevTools

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

Эти функции включают в себя:

  • точки останова DOM и XHR
  • Панель слушателей событий.
  • Панель свойств
  • Инспектор по безопасности
  • Ревизия
  • Моделирование прикосновений и плотность пикселей в эмуляции устройства.
  • Живое редактирование на панели «Источники».
  • Workspaces
  • Блокировка сетевого запроса
  • Инструмент расширенной памяти
  • Манифест, диспетчер службы и инспектор кэша приложений
  • Вызов производительности прокрутки Highlighter
  • Кадры в секунду.
  • Эмуляция CSS Media.
  • Глобальный поиск файлов
  • Анализатор покрытия кода
  • Геолокация, ориентация и сенсорная эмуляция.

Кроме того, они отличаются многими меньшими функциями и их настройками.

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

Содержание:

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

На сегодняшний день одними из лучших инструментов разработчика обладает браузер 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 доступна после двойного клика по элементу). Хотя, чего мелочиться? Можем убрать все лишние блоки, оставив только один (а заодно можно и скрипт снести :)):

Мастер Йода рекомендует:  Kubernetes, анализ данных и бессерверные вычисления команда Яндекс.Облака представила шесть новых

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

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

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

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

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

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

Консоль

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вкладка Sources

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

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

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

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

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

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

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

Вкладка «Network»

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

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

Вкладка «Performance»

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

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

Вкладка «Memory»

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

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

Вкладка «Application»

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


Вкладка «Security»

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

Вкладка «Audits»

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

Выводы

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

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

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

26 октября 2015

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Палитры

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

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

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

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

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

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

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

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

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

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

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

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

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

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

11. Get the current element with «$0»

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

12. Reveal in Elements

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

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

13. View Event Listeners

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

14. Easing Previews

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

15. Media Query

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

keys и values

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

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

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

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

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

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

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

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

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, которые гарантируют, что текст может быть прочитан большинством людей:

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

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


Скриншоты

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

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

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

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

Мастер Йода рекомендует:  Защита сайта от скачивания PHP

Неиспользуемый код выделяется красным цветом в строке с номером строки. Обратите внимание, что 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 с помощью Chrome DevTools

Вступление

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

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

К счастью в настоящее время вы можете найти в Chrome Canary DevTools полный стек асинхронных обратных вызовов JavaScript !

Краткий тизер с обзором стека асинхронных вызовов. (В ближайшее время мы детальнее разобьем этот демонстрационный тизер).

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

Просмотреть полную трассировку стека для обработчиков событий, setInterval , setTimeout , XMLHttpRequest , promises , requestAnimationFrame , MutationObservers и другие.

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

Давайте подключим эту функцию и рассмотрим некоторые сценарии.

Подключение асинхронной отладки в Chrome Canary

Можете попробовать эту новую функцию включения асинхронной отладки в Chrome Canary (сборка 35 или выше). Перейдите в меню « Источники » Chrome Canary DevTools .

Рядом с панелью « Стек вызова » справа расположена опция « Async ». Переключите чекер в положение включить или отключить. (Хотя в данном случае он включен, вам, возможно, время от времени будет необходимо, чтобы он был отключен):

Захват отложенных событий таймера и XHR-ответы

Вы, возможно, раньше встречались с такой ситуацией в Gmail :

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

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

Полный код JavaScript вы можете найти по приведенной ссылке, но процесс выглядит следующим образом:

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

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

Но посмотрите, как все меняется при подключении асинхронных стеков:

Панель «Стек вызовов» без возможности подключения асинхронных стеков.

Здесь вы можете увидеть, что postOnFail() был инициирован обратным вызовом AJAX , но это и вся информация.


Панель «Стек вызовов» с включенными асинхронными стеками.

Здесь вы можете увидеть, что XHR был инициирован функцией submitHandler() , которая в свою очередь была инициирована обработчиком кликов, связанным с scripts.js . Отлично!

С включенным стеком асинхронных вызовов вы можете просмотреть весь стек вызовов, и тогда вы легко увидите, был ли запрос инициирован из submitHandler ( ) , как в предыдущем случае, или из retrySubmit() , как показано ниже:

С помощью панели « Стек вызовов » вы можете также определить, возникла ли задержка setTimeout() из-за того, что запуск события произошел до события интерфейса, например, « клика », или вследствие другого стандартного события асинхронных обратных вызовов.

Временные выражения асинхронно

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

Определение кода прошлых областей

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

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

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

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

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

Ожидайте вскоре: Разматывание цепочек резолюций promise

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

Давайте обратимся к последнему примеру, который Джейк Арчибальд приводит в своем пособии по JavaScript Promises :

Структурная схема JavaScript Promises.

Вот структурная схема просмотра стека вызовов в примере Джейка async-best-example.html .

Обратите внимание, что при отладке promise в панели « Стека вызовов » довольно мало информации.

Панель «Стека вызовов» с асинхронными функциями.

Ого! Столько promise . Много обратных вызовов.

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

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

Перейдите в раздел chrome://flags/#enable-devtools-experiments и включите « Экспериментальные инструменты для разработчиков ».

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

Разбор веб-анимации

Давайте покопаемся архивах HTML5Rocks . Помните слоган Пола Льюиса Более умная, более насыщенная, более быстрая анимация с requestAnimationFrame ?

Откройте демоверсию requestAnimationFrame и установите контрольную точку в начале метода update() (примерно 874 строка) в файле post.html .

С асинхронными стеками вызовов мы можем более предметно рассмотреть requestAnimationFrame . И так же, как в случае с моделью Gmail, мы можем размотать всю цепочку событий до самого начала — инициирующего события ‘scroll’ .

Панель «Стека вызовов» без асинхронных функций.

Панель «Стека вызовов» с асинхронными функциями.

Отслеживание обновлений DOM, когда используется MutationObserver

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

Добавьте контрольную точку в nodeAdded() (строка 31) в demo.html . Теперь с помощью асинхронного стека вызовов вы можете просмотреть стек вызовов от addNode() до инициирующего события клика.

Панель «Стека вызовов» без асинхронных функций.

Панель «Стека вызовов» с асинхронными функциями.

Советы по отладке JavaScript в асинхронных стеках вызовов

Присваивайте функциям имена

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

Например, возьмем анонимную функцию наподобие этой:

И присвоим ей имя наподобие windowLoaded() :

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

В этом случае его намного проще найти в трассировке стека.

Исследуйте дальше

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

  • Таймеры : Прохождение до места, где были инициализированы SetTimeout () или setInterval ( );
  • XHR : Прохождение до места, где был вызван xhr.send();
  • Фреймы анимации : Прохождение до места, где был вызван requestAnimationFrame;
  • Ожидание события : Прохождение до места, где изначально событие было связано с addEventListener();
  • MutationObservers : Прохождение до места, где возникло событие mutation observer.

Полный стек, который вскоре будет доступен в этом экспериментальном JavaScript приложении:

  • Promises : Прохождение до места, где был утвержден promise;
  • Object.observe : Прохождение до места, где изначально был связан вызов обозревателя.

Возможность увидеть полную трассировку стека ваших обратных вызовов JavaScript поможет вам в отладке этих основных направлений.

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

Одним словом, попробуйте Chrome Canary . Если у вас возникли замечания по этой новой функции, напишите нам в группу Chrome DevTools или сообщите об ошибке в системе отслеживания ошибок Chrome DevTools .

Данная публикация представляет собой перевод статьи « Debugging Asynchronous JavaScript with Chrome DevTools » , подготовленной дружной командой проекта Интернет-технологии.ру

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Очистка куки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Мастер Йода рекомендует:  Задачка на основы криптографии с подробным разбором


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

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

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

Двенадцать полезных Chrome DevTools Tips

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

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

(В статье ниже присутствуют анимированные гифги, которые начинают раздражать после первого цикла. Поэтому я советую открыть dev tools и удалить DOM ноды, которые отвечают за изображения.)

Копируем переменную в буфер обмена

Об этой возможности я узнал из комментариев, и считаю ее достаточно полезной чтобы быть описанной в начале. Иногда бывает нужно скопировать содержимое переменной в буфер обмена. Например html код или json объект. Для этого можно использовать copy функцию.

Теперь текстовое представление переменной скопировано в буфер обмена.

1. Инспектируем анимацию

Анимации прекрасны. Они радуют пользователей, и что более важно, они радуют меня. Меню анимаций в DevTools позволит вам замедлить все анимации на странице до 25% или до 10% (увидеть мир глазами кролика), или подвигать конкретную анимацию.

2. Удобные скриншоты

Когда вы находитесь в режиме эмуляции устройств, вы можете включить device frame и когда вы нажмете на capture screenshot то получите снимок экрана вместе с рамкой устройства.

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

3. $0 в консоли

Напечатав $0 в консоли, вы получите ссылку на текущую выделенную в панели элементов DOM ноду.

Это реальная ссылка на элемент, и как пример, вы можете сделать $0.classList.add(‘touch-of’) или $0.getBoundingClientRect() чтобы узнать размер, или если вы используете jQuery на странице, вы можете напечатать что-то такое $($0).data() чтобы получить данные элемента.

По умолчанию Chrome просто покажет вам объект в виде DOM элемента. Если вы хотите увидеть элемент как JavaScript объект, можете напечатать console.dir($0)

Если вы достаточно круты, и используете React и React dev tools, то $r покажет вам ссылку на react компонент. Чтобы увидеть proprs компонента, просто введите $r.props.

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

4. Стрелочные функции в консоли

Это не совсем DevTools Tip, но я уверен что вы их полюбите. С появлением стрелочных функций стало удобно использовать их в одной строке. Например выражение performance.getEntries().filter(entry => entry.name.includes(‘static’)) выведет некоторую информацию о моих запросах с доменов содержащих “static” в имени.

Конечно, если вам нужно написать более одной строки, вы можете нажать shift+enter чтобы перейти на новую строку без выполнения кода.

5. Поиск по селектору

Поле поиска в панели элементов ищет не только текст (вот это поворот, что же еще он оно ищет?!), но и совпадающие селекторы. Это может быть особенно удобно для не-веб-разработчиков, которым нужно подобрать селекторы, например, для автотестов.

Здесь я ищу совпадения по .section-inner p:nth-of-type(2)

6. Экспериментируя с цветами

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

7. Просмотр отрендеренных шрифтов

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

8. Редактируем любой текст на странице

Если у вас есть меню фиксированной ширины и вы хотите узнать, насколько длинный текст туда поместится и увидеть переносы слов. Переключите документ в режим дизайна! (document.designMode = ‘on’)

После этого вы сможете редактировать все элементы имеющие текстовый контент.

Если вы тот человек, который решил использовать on/off вместо true/false, я бы хотел поговорить с вами в моем офисе.

9. Диафильм

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

Или вы можете просто с иронией посмотреть как грузятся шрифты на странице Adobe.

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

10. Фильтры на вкладке Network

Какую бы работу по производительности вы не делали, вам нужно знать что приходит к вам в браузер. Если вы размещаете рекламу на сайте, то приходит много чего. Для сокращения списка, вы можете отфильтровать ресурсы по типам (удерживайте cmd/ctrl для мультивыбора) и также по доменам.

11. Темная тема

Потому что темная тема.

Включить можно вначале страницы настроек

12. Chrome сниппеты

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

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

Конец

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

И еще одно. При установке Chrome Canary, войдите и синхронизируйте ваш Google аккаунт, но в дополнительных настройках синхронизации уберите галочку с “Extensions”. Так вы получите вашу историю, закладки и все остальные вещи, кроме расширений, которые засоряют ваше рабочее пространство своим кодом.

14 наиболее полезных особенностей Chrome DevTools

• Продукт у нас хороший, и вы бы сами убедились, если бы не…

Онлайн-тренинги

Конференции

Что пишут в блогах (EN)

Разделы портала

Про инструменты

40+ супер-полезных расширений Chrome для тестировщиков
04.05.2020 13:26

Автор: Амандип Сингх (Amandeep Singh)

Перевод: Ольга Алифанова.


Такие браузеры, как Mozilla Firefox и Google Chrome сильно облегчают жизнь тестировщика. Я использую оба, но Chrome лидирует по количеству полезных расширений, которые я могу применять в работе.

Большинство читателей нашего сайта используют Chrome (примерно 70%). Чем не доказательство, как мы, тестировщики, любим этот браузер? Он очень облегчает наш труд. Он облегчает конкретно мой труд, и поэтому я его так люблю. Firefox, я помню о тебе!

Ранее я составлял список важных дополнений Firefox, полезных для тестировщиков, и аналогичный список для Chrome был вполне логичным продолжением. Представляю вам список потрясающих расширений Chrome для тестировщиков! Это вам не просто список случайных расширений — это наиболее полное перечисление тех расширений, которые пригодятся при тестировании ПО.

Расширения Chrome для тестировщиков

Google Chrome — это самый мощный и самый известный браузер в мире (источник). У него удобный интерфейс, он мало весит, и его можно дополнительно улучшать различными расширениями.

Это основная причина его популярности как среди разработчиков, так и среди тестировщиков.

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

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

Итак, хватит предисловий, стартуем!

Расширения Chrome для тестировщиков: тестирование веб-интерфейсов

1. Screen Ruler — простенькое расширение, название которого полностью отражает содержание. Оно помогает измерять высоту, ширину и поля у объектов, просто накладывая поверх них линейку и перетаскивая ее в нужном направлении. Screen Ruler — очень полезное расширение для тестирования веб-интерфейса, так как помогает найти невидимые глазу дефекты и удостовериться, что ваше приложение прекрасно до последнего пикселя.

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

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

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

5. IE Tab — один из самых популярных IE-эмуляторов. С помощью этого расширения вы можете тестировать ваш сайт в разных версиях IE, не покидая ваш ненаглядный Chrome.

6. Spell Checker — расширение для проверки орфографии. Проверяет, правильно ли написаны слова на странице, и предлагает внести правки для слов с опечатками. Это простенькое расширение поддерживает 12 языков, и вы можете добавлять свои слова в его словарь.

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

Расширения Chrome для тестировщиков: автоматизация тестирования.

8. Web Developer — Web Developer Chrome Extension, официальный дубль знаменитого дополнения Firefox, который включает в себя множество инструментов разработчика в форме дополнительной панели. Он не полностью дублирует своего собрата для Firefox , но тем не менее полезен тестировщикам. С его помощью можно заполнять формы, контролировать кэш браузера, управлять cookie-файлами, исследовать и подсвечивать веб-элементы, атрибуты заголовков, информацию о якорях на любой странице, что бережет немало времени.

9. Firebug Lite — это еще одно расширение, которое не заменяет инструменты разработчика Chrome, но отлично его дополняет. Его достоинства — хорошее визуальное представление элементов HTML, DOM, и Box Model. Подходит для исследования HTML-элементов по нажатию кнопки, что неплохо помогает при автоматизации тестирования приложений.

Расширения Chrome для тестировщиков: документальные подтверждения

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

10. Awesome Screenshot — наиболее известный среди тестировщиков скриншотер. Позволяет захватить весь экран, отдельную его часть, видимую область веб-страницы, а также делать на нем пометки, обрезать его, и т. д. Если результат вас удовлетворил, им легко поделиться с окружающими. Его можно сохранить на жесткий диск, временно загрузить на Awesome Screenshot, или — если вам нужна постоянная ссылка — на Google Drive или Diigo.

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

12. Screencastify — еще одно обязательное к установке расширение для тестировщиков. Оно дает возможность делать запись экрана, когда вы тестируете. В результате вы получаете видеозапись пользовательского поведения, которую можно передать разработчикам в качестве подтверждения бага. Просто нажмите «записать», и расширение начнет записывать происходящее в вашей вкладке.

Расширения Chrome для тестировщиков: тестирование cookie-файлов

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

13. Edit This Cookie — очень полезно для А/В тестирования веб-приложений, а также для проверки доступности определенной функциональности разным группам пользователей. Простой, хорошо организованный интерфейс позволяет работать с файлами профессионально. Расширение показывает имеющиеся cookie-файлы и их значения. Значения можно менять, а также вы сможете добавлять, удалять, искать, защищать или блокировать cookie-файлы. Это расширение избавит вас от нудного поиска нужных файлов через настройки Chrome.

14. Cookie Editor — еще одно расширение для редактирования cookie-файлов. Название отражает содержание — оно позволяет добавлять, удалять, редактировать, защищать, блокировать и искать нужные файлы. Дополнительная опция — экспорт в JSON-формате.

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

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

Расширения Chrome для тестировщиков: эмуляторы размеров экрана

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

18. Window Resizer — еще одно полезное для веб-тестирования расширение. Делает в Chrome то же самое, что Firesizer для Firefox — изменяет размеры окна браузера, эмулируя различные разрешения экрана. Позволяет увидеть, как верстка сайта поведет себя при различных размерах экрана. Позволяет выбрать предустановленные разрешения и добавлять новые. Отличается от Resolution Test возможностью устанавливать горячие клавиши, а также экспортировать свои настройки и переносить их на другой компьютер.

Расширения Chrome для тестировщиков: исследовательское тестирование.

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

20. Form Fuzzer — еще одно расширение, позволяющее заполнять поля различными значениями. Как и предыдущее, избавляет от подготовки данных вручную. Просто щелкните правой кнопкой мыши на нужном поле и выберите значение из готового списка.

21. Web Developer Form Filler — это расширение сделает заполнение форм детской забавой. Очень полезно для исследовательского тестирования — любую форму можно заполнить, просто нажав на горячую клавишу.

Расширения Chrome для тестирования API

22. Postman — инструмент для тестирования API-запросов, особенно REST API. Позволяет настраивать и переключать переменные на лету, и бережет ваше время. Самообучается.

23. Advanced RESTClient — еще одно расширение для API-тестирования. Не так богато функциональностью, как Postman, зато хорошо подходит для новичков. REST Client позволяет создавать и тестировать кастомные API-запросы при помощи простого интерфейса.

24. Resteasy — еще одна возможность тестировать REST API в Chrome. Функциональность этого расширения похожа на Advanced REST Client. Попробуйте оба и выберите то, которое вам больше нравится.

25. JSONView — чтение данных JSON может превратиться в кошмар, когда вы тестируете REST API (попробуйте — поймете, о чем я). Расширение JSONView позволяет просматривать отформатированный JSON в форме дерева внутри Chrome, намного упрощая чтение и верификацию.

26. Ghostery — это расширение упрощает тестирование поведения приложения в ситуации, когда сеть падает и API прекращает работать. Оно позволяет увидеть все трекеры страницы и отключать их при необходимости.

Расширения Chrome для тестирования безопасности и проникновения.

27. XSS Rays — это полезное расширение широко используется тестировщиками безопасности. По сути это чистый Javascript XSS сканер, помогающий выявить уязвимости XSS. XSS Rays анализирует все ссылки и формы загруженной страницы и проверяет XSS по параметрам GET и POST.

28. Request Maker — основное расширение Chrome для тестирования на проникновение. Позволяет создавать новые запросы, отлавливать запросы, сделанные страницами, поиграть с URL, изменять заголовки и данные POST. Больше всего мне нравится его возможность делать закладки для запросов по щелчку мыши.

29. d3coder — еще одно расширение для тестирования на проникновение. Позволяет кодировать и декодировать выбранный текст через контекстное меню прямо из Chrome. Скопируйте текст в буфер обмена и выберите «Преобразовать» в меню. После преобразования d3coder копирует полученный текст в буфер обмена. Это классное расширение, позволяющее преобразовывать текст в разные форматы — например, base64, rot13, CRC32, UNIX-время.

30. Site Spider — расширение, сообщающее о битых ссылках на странице. Экономит массу времени — не приходится вручную проверять, все ли ссылки работают. Есть возможность ограничить работу расширения, добавляя ограничения и регулярные выражения. У расширения открытый исходный код — меняйте его в соответствии с вашими нуждами.

Расширения Chrome для тестирования доступности.

Различные принципы доступности (например, WCAG, ARIA, RGAA, Section 508) определяют, как сделать сайты и приложения доступными для людей с ограниченными возможностями. Вот какими расширениями можно воспользоваться, чтобы убедиться, что эти принципы выполняются:

31.Wave evaluation tool — очень крутой инструмент оценки доступности, тестирующий сайт на соответствие принципам WCAG. Отличное расширение, встраивающее дополнительную функциональность прямо в браузер и дающее видимую обратную связь по доступности страницы (вставляет иконки и индикаторы прямо на сайт).

32. Accessibility Developer Tools — добавляет «Оценку доступности» и боковую панель доступности в инструменты разработчика Chrome. При запуске оценки доступности расширение выводит список правил WCAG 2.0, нарушенных на странице, включая недостающие ARIA-элементы.

33. aXe- еще одно расширение, пополняющее возможности для тестирования доступности. Небольшое и легкое, оно основано на aXe Javascript-библиотеке. Сообщает об отклонениях от WCAG 2.0 (W3C Web Content Accessibility Guidelines) и Section 508 (Федеральный стандарт США).

34. ARIA validator — добавляет кнопку, по нажатию на которую проверяется внедрение ARIA в страницу. Для каждого фрейма на странице расширение покажет вкладку с ошибками и предупреждениями.

Расширения Chrome для повышения производительности

35. Session Manager — как тестировщик, вы наверняка ходите по одному и тому же набору сайтов и ссылок ежедневно. Если это про вас, обязательно установите это расширение! Оно позволяет объединять сайты и странички в группы, которые затем можно открывать по щелчку мыши. Работайте на одном дыхании! Правда, круто звучит? Расширение позволяет управлять вкладками — сохранять их, обновлять, удалять и восстанавливать наборы. Вы не пожалеете, что установили его.

36. iMacros — каждый тестировщик в общем и целом делает одно и то же ежедневно. Это расширение упрощает жизнь веб-тестировщику, позволяя записывать и проигрывать действия на странице. Конечно, для этого можно использовать Selenium WebDriver и другие средства автоматизации, однако iMacros позволит автоматизировать ваши рутинные действия — например, smoke-тестирование, которое в норме состоит из стандартного набора одинаковых кликов. Расширение можно также использовать для открытия одних и тех же наборов страниц или ссылок. Ну или просто воспользуйтесь Session Manager!

37. MindMup — отличное расширение для бесплатного создания ментальных карт. Ментальные карты — неплохой способ документировать свое понимание процессов в приложении, записи сценариев тестирования и уточнения зависимостей между различными компонентами. Расширение дает возможность заниматься всем этим, не покидая браузер. Оно позволяет создавать свои карты и работать совместно с другими пользователями, и имеет простой и понятный интерфейс. Интегрируется с Google Drive и Dropbox. Так как ваши карты хранятся в облаке, они доступны откуда угодно — неважно, пользуетесь ли вы браузером на ПК, на планшете, или на телефоне.

38. Proxy SwitchySharp — приходит на помощь, если вам необходимо часто переключаться между прокси. Позволяет легко и непринужденно управлять прокси и переключаться между ними. Больше всего мне нравится, что оно позволяет создавать правила для автоматического переключения прокси, активируя отдельные прокси для соответствующих ссылок. Также оно дает возможность скрывать IP-адреса, что делает его неплохим инструментом тестирования на проникновение.

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

Добавить комментарий