Русский
Русский
English
Статистика
Реклама

Chrome devtools

Перевод Профессиональное применение инструментов разработчика Chrome 13 советов

03.08.2020 18:13:27 | Автор: admin
Автор статьи, перевод которой мы сегодня публикуем, хочет поделиться советами по профессиональной работе с инструментами разработчика браузера. А именно, эти советы рассчитаны на программистов, которые по какой-то причине решили, что их основным браузером будет Google Chrome.



Общие сведения


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


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

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


Панель Console

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

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

1. Пункт меню Run command


Для начала мне хотелось бы в двух словах рассказать о пункте меню инструментов разработчика, который называется Run command. Этот пункт меню для Chrome всё равно, что командная оболочка для Linux. Он позволяет вводить команды для управления Chrome.

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

  • В Windows Ctrl + Shift + P.
  • В macOS Cmd + Shift + P.

Или можно просто щёлкнуть по трём точкам в правой части заголовочной области инструментов разработчика и выбрать в появившемся меню пункт Run command.


Пункт меню Run command

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


Панель команд

Поговорим о некоторых командах из данной панели.

2. Продвинутые механизмы создания скриншотов


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

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

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

  • Screenshot Capture full size screenshot
  • Screenshot Capture node screenshot

Пример


Откройте какую-нибудь страницу, например раздел Medium с самыми популярными материалами по JavaScript.

Теперь откройте панель команд и выберите в ней команду Screenshot Capture full size screenshot.


Команда для снятия скриншота всей страницы

В нашем распоряжении окажется скриншот всей страницы, который попадёт в папку загрузок.


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

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

Аналогично, если нужно сделать скриншот элемента DOM, можно воспользоваться сторонней программой, которая, правда, не позволит получить изображение, относящееся в точности к нужному элементу. Решить эту задачу нам поможет команда Screenshot Capture node screenshot.

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


Создание скриншота области экрана, относящейся к конкретному элементу DOM

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


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

3. Обращение к результатам последней операции в консоли


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

'abcde'.split('').reverse().join('')

Вы попробовали запустить этот код в консоли и, как оказалось, работает он правильно.


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

Итак, строку этот код переворачивает. Однако вам непонятно то, как работают методы split(), reverse() и join(). Вы не знаете о том, с чем именно они работают на промежуточных этапах переворачивания строки. Поэтому вы решаете выполнять этот код пошагово. Начинаете вы с первого метода, получив его результат, запускаете на этом результате второй метод и так далее.


Исследование кода

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

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


Использование $_

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


Пример использования $_

4. Повтор отправки XHR-запроса


При работе над фронтенд-проектами часто бывает нужно пользоваться API XHR для выполнения запросов к бэкенду на получение данных. А что если нужно повторно отправить уже отправленный XHR-запрос?

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


Команда повтора XHR-запроса

Для того чтобы повторно выполнить уже отправленный XHR-запрос, надо действовать так:

  • Откройте панель Network.
  • Щёлкните по кнопке XHR.
  • Вызовите контекстное меню запроса, который нужно повторить.
  • Выберите в меню команду Replay XHR.

Вот анимированный пример выполнения вышеописанных действий.


Повтор XHR-запроса

5. Мониторинг загрузки страницы


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

В инструментах разработчика Chrome можно делать скриншоты страницы в разные моменты загрузки, установив флаг Capture screenshots на панели Network.


Флаг Capture screenshots и наблюдение за загрузкой страницы

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


Анализ загрузки страницы

6. Копирование содержимого JavaScript-переменных


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


Копирование содержимого JS-переменной

Этой функции нет в стандарте ECMAScript. Она доступна нам благодаря Chrome.

7. Копирование изображения в виде Data URL


Есть два способа работы с изображениями, выводимыми на веб-страницах. Первый способ заключается в загрузке изображений из внешних источников. Второй в кодировании изображений в виде так называемых Data URL. На MDN можно узнать о том, что Data URL это URL с приставкой :data. Такие URL позволяют встраивать прямо в документ файлы небольшого размера. Раньше их называли Data URI, так было до тех пор, пока это название не было выведено из обращения WHATWG.

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

Как, пользуясь Chrome, превратить изображение в Data URL?

Ниже приведена анимированная демонстрация этого процесса.


Копирование изображения в виде Data URL

8. Удобное представление массивов объектов


Представьте, что у нас имеется массив объектов. Например такой:

let users = [{name: 'Jon', age: 22},{name: 'bitfish', age: 30},{name: 'Alice', age: 33}]

Выведем его в консоли.


Массив объектов, выведенный в консоли

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

К нашему счастью, в Chrome есть специальная функция, table(), которая позволяет форматировать массивы объектов.


Отформатированный массив объектов

Часто эта функция оказывается очень кстати.

9. Перетаскивание объектов в панели Elements


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


Перетаскивание элемента

На вышеприведённом анимированном рисунке показано, как я, перетаскивая мышью элемент <div> на панели Elements, меняю положение этого элемента на веб-странице.

10. Обращение к текущему выделенному элементу из консоли


Поговорим об ещё одной магической переменной, которой можно пользоваться в консоли. Это переменная $0. Она позволяет обратиться из консоли к элементу, который выделен в панели Elements.


Обращение к элементу с помощью $0

11. Исследование псевдоклассов


На MDN можно узнать о псевдоклассах следующее:

Псевдоклассы дают возможность стилизовать элемент на основе не только отношений в DOM-дереве, но и основываясь на внешних факторах, таких как история посещений (например, :visited), состояние содержимого (вроде :checked у некоторых элементов формы) или позиции курсора мыши (например, :hover определяет, находится ли курсор мыши над элементом).

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


Управление псевдоклассами

Пример


Вот код веб-страницы:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{font-size: 150px;}div:hover{color: red;}div:active{color: blue;}div:focus{color: brown;}</style></head><body><div>hello world</div></body></html>

Нам надо проверить стилизацию псевдоклассов. Для этого мы можем воспользоваться панелью Elements.


Исследование стилей псевдоклассов

12. Быстрое скрытие элемента


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


Быстрое скрытие элемента

Это приводит к добавлению стиля visibility: hidden !important; к соответствующему элементу.

13. Сохранение ссылки на DOM-элемент во временной глобальной переменной


Если нам нужно быстро получить ссылку на DOM-элемент в консоли, мы можем выполнить следующую последовательность действий:

  • Выделить элемент.
  • Щёлкнуть по нему правой кнопкой мыши, вызвав контекстное меню.
  • Выбрать в меню команду Store as a global variable.


Сохранение ссылки на элемент DOM в виде временной глобальной переменной

А какими малоизвестными возможностями инструментов разработчика Chrome пользуетесь вы?

Подробнее..

Перевод Как мы создали вкладку WebAuthn в Chrome DevTools

03.11.2020 18:06:31 | Автор: admin
Сегодня, в преддверии старта нового потока курса по JavaScript, делимся с вами полезным переводом статьи о том, как разрабатывалась вкладка WebAuthn в Chrome DevTools, какие решения принимались и почему, с какой проблемой столкнулись разработчики.

image




Web Authentication API, также известный как WebAuthn, позволяет серверам использовать криптографию с открытым ключом (а не пароли) для регистрации и аутентификации пользователей. Этот API включает интеграцию между серверами и сильными аутентификаторами. Эти аутентификаторы могут быть специализированными физическими устройствами (например, ключами безопасности) или они могут иметь интеграцию с платформами (например, считывателями отпечатков пальцев). Прочитать больше о WebAuthn по адресу webauthn.guide.

Проблемы разработчика


До этого проекта в WebAuthn не было встроенной поддержки отладки в Chrome. Разработчику создающему приложение, которое использует WebAuth, требовался физический доступ к реально существующим аутентификаторам. Это было особенно сложно по двум причинам:

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

Нам хотелось упростить задачу, добавив поддержку отладки прямо в Chrome DevTools.

Решение: новая вкладка WebAuthn


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



Реализация


Добавление поддержки отладки в WebAuthn состояло из двух частей.



Часть 1. Добавление домена WebAuthn в протокол Chrome DevTools


Во-первых, мы реализовали новый домен в Chrome DevTools Protocol (CDP), который подключается к обработчику, взаимодействующему с бекендом WebAuthn.

CDP объединяет интерфейс DevTools с Chromium. В нашем случае действия домена WebAuthn используются для соединения вкладки WebAuthn DevTools и реализации WebAuthn в Chromium.

Домен WebAuthn позволяет включать и отключать виртуальную среду аутентификатора, которая отключает браузер от реального обнаружения аутентификатора, подключая виртуальное обнаружение.

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

Хотя домен WebAuthn сделал возможным существование вкладки WebAuthn, это еще не все. Этот домен изначально был большей частью API тестирования WebAuthn и используется ChromeDriver для включения тестов веб-платформы. Узнайте больше о WebAuthn API для тестирования.

Часть 2. Создание ориентированной на пользователя вкладки


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

Модель


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

Представление




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

  1. Панель инструментов для включения виртуального аутентификатора.
  2. Раздел добавления аутентификаторов.
  3. Раздел для созданных аутентификаторов.

Посмотрите на код.

Панель инструментов для включения среды виртуального аутентификатора



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

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

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

Добавление раздела аутентификаторов




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

Представление аутентификатора




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

Имя аутентификатора


Имя аутентификатора изменяемо и по умолчанию имеет значение Authenticator, объединенное с последними 5 символами его ID. Первоначально имя аутентификатора было его полным идентификатором и не могло изменяться. Мы реализовали настраиваемые имена, чтобы пользователь мог маркировать аутентификатор в зависимости от его возможностей, эмулируемого физического аутентификатора, или любого псевдонима, который понять легче, чем идентификатор из 36 символов.

Таблица учетных данных


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

Кнопка Active

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

Статус Active реализован с помощью метода SetUserPresence на виртуальных аутентификаторах. Метод SetUserPresence устанавливает, успешны ли тесты присутствия пользователя для данного аутентификатора. Если мы отключим его, аутентификатор не сможет прослушивать учетные данные. Следовательно, убедившись, что он включен не более чем для одного аутентификатора (установленного активным), и отключив присутствие пользователя для всех остальных, возможно добиться полной определенности поведения. Интересная проблема, с которой мы столкнулись при добавлении кнопки Active как избежать состояния гонки. Рассмотрим такую ситуацию:

  1. Пользователь нажимает переключатель Active у аутентификатора X, отправляя запрос к CDP, чтобы установить X в активное состояние. Итак, для X выбран переключатель Active, а все остальные переключатели не выбраны.
  2. Сразу после этого пользователь нажимает переключатель Active аутентификатора Y, отправляя запрос в CDP, чтобы установить Y активным. Для Y установлен переключатель Active, а все остальные, в том числе для X, не выбраны.
  3. На бекенде вызов для установки Y как активного завершается и разрешается. Y теперь активен, а все остальные аутентификаторы нет.
  4. В серверной части вызов для установки X как активного завершен и разрешен. X теперь активен, а все остальные аутентификаторы, включая Y, нет.

В результате получается следующая ситуация: X активный аутентификатор. Однако переключатель Active для X не установлен. Y не активен. Но для Y выбран переключатель Active. Есть разногласия между внешним интерфейсом и фактическим статусом аутентификаторов. И это проблема.

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

 async _setActiveAuthenticator(authenticatorId) {   await this._clearActiveAuthenticator();   await this._model.setAutomaticPresenceSimulation(authenticatorId, true);   this._activeId = authenticatorId;   this._updateActiveButtons(); }_updateActiveButtons() {   const authenticators = this._authenticatorsView.getElementsByClassName('authenticator-section');   Array.from(authenticators).forEach(authenticator => {     authenticator.querySelector('input.dt-radio-button').checked =         authenticator.getAttribute('data-authenticator-id') === this._activeId;   }); }async _clearActiveAuthenticator() {   if (this._activeId) {     await this._model.setAutomaticPresenceSimulation(this._activeId, false);   }   this._activeId = null; }

Показатели использования


Мы хотели отслеживать использование этой функции. Изначально мы придумали два варианта.

  1. Подсчитывать каждое открытие вкладки WebAuthn в DevTools. Такой подход потенциально приводит к неправильному расчету: кто-то может открыть вкладку, но не работать с ней.
  2. Отслеживать, сколько раз устанавливался флажок Enable virtual authenticator environment на панели инструментов. У этого варианта также была потенциальная проблема с неверным расчетом: кто-то может включать и выключать среду несколько раз за один сеанс.

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

Резюме


Спасибо, что прочитали! Если у вас есть предложения по улучшению вкладки WebAuthn, сообщите нам об этом, заполнив баг-репорт.

На тот случай если вы задумали сменить сферу или повысить свою квалификацию промокод HABR даст вам дополнительные 10% к скидке указанной на баннере.

image




Рекомендуемые статьи


Подробнее..

Приглашаем на DINS JS EVENING разбираем Chrome DevTools и Cypress

15.01.2021 16:07:39 | Автор: admin

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


Программа

19:00-19:40 Инструменты отладки в Chrome DevTools (Андрей Соколов, DINS)

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

Вместе со спикером рассмотрим главные вкладки для отладки фронтенда: elements, console, source и network. Андрей расскажет о кнопках и функциях, которые вы видели, но не использовали.

Презентация будет полезна всем, кто взаимодействует с UI: фронтендерам, QA-инженерам, бэкенд-разработчикам.

Андрей Соколов Frontend Developer в DINS. Помимо работы увлекается написанием странных Telegram-ботов.

19:40-20:30 Cypress как ядерное оружие для багов на проекте со сложной бизнес-логикой (Константин Поздникин, Usetech)

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

В такой ситуации важно использовать интеграционное тестирование, тестирование API и unit-тесты для frontend, backend и их связки в окружении. Константин расскажет, как с этой задачей поможет справиться Cypress настоящее ядерное оружие в войне против багов. Вы узнаете, как с помощью Cypress заменить Selenium, экономить время и проводить комплексное эффективное тестирование.

Доклад будет интересен специалистам уровня Middle и выше.

Константин Поздникин ведущий разработчик компании Usetech. Преподаватель и ментор в Корпоративном университете компании.

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

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

Как проходят встречи

Записи предыдущих митапов можно посмотреть на нашем YouTube-канале.

О нас

DINS IT EVENING это место встречи и обмена знаниями технических специалистов по направлениям Java, DevOps, QA и JS. Несколько раз в месяц мы организуем встречи, чтобы обсудить с коллегами из разных компаний интересные кейсы и темы. Открыты для сотрудничества, если у вас есть наболевший вопрос или тема, которой хочется поделиться пишите на itevening@dins.ru!

Подробнее..

5accessibilityинструментов вChromeDevTools

29.11.2020 14:18:58 | Автор: admin

Введение

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

Небольшой дисклеймер, я знаю, что многие из вас активно пользуютсяDevTools, тем не менее, я напомню, что для открытияDevToolsудобно использовать сочетание клавишCmd+Shift+ C /Ctrl+Shift+ C.

Accessibilityinspector.

Помимо DOM браузер строитAccessibilityTree(AOM,AccessibilityObjectModel) или Дерево специальных возможностей (чуть подробнее тут). СоответственноAccessibilityinspectorпозволяет просматривать информацию в этом дереве, аналогично тому, как вы просматриваете структуру DOMдевера, во вкладкеElements.

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

Найти этот и инструмент можно во вкладкеElements, в дополнительной вкладкеAccessibility.

Accessibilityinspector в DevToolsAccessibilityinspector в DevTools

Эмулятор плохого зрения.

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

Для того чтобы включить эмуляцию проблем со зрением откройтеDevTools, кликните на три точки на верхней панели. В выпадающем списке выберете менюMoretools, дальшеRendering. В низу откроется дополнительная панель, прокрутите ее до самого конца, там будетпукт Emulatevisiondeficiencies.

Результат работы эмулятора плохого зренияРезультат работы эмулятора плохого зрения

На момент написания статьиDevToolsэмулирует следующие нарушения:

  • Нечеткое зрение

  • Протанопияищи цветовая слепота (помните такие тесты в ГИБДД где среди кружочков необходимо увидеть цифру?)

  • Дейтеранопия - частичная цветовая слепота, в основном к зеленому цвету.

  • Тританопия- частичная цветовая слепота обычно в синежёлтых, фиолетовокрасных цветов.

  • Ахроматопсия илидальтонизм - полная цветовая слепота

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

Lighthouseумеет находить очевидные проблемы на вашем сайте, в том числе и проблемы с доступностью. Поскольку в данной статье мы рассматриваем только доступность, то отключим все остальное и протестируемХабрна наличие проблем сAccessibility.

Настройка и результат работы Lighthouse на сайте habr.comНастройка и результат работы Lighthouse на сайте habr.com

Lighthouseпроверяет такие вещи как:

  • ARIA - атрибуты

  • ROLE - атрибуты

  • Контраст

  • Langатрибуты в HTML

  • Tabindexна формах

  • Наличие описания в атрибутахalt

  • И многое другое

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

Контрастность

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

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

Что узнатькоэфициентконтрастности какого-либо элемента необходимо открытьDevTools, затем выберете любой текстовый элемент, и найдите CSS свойствоcolor

Инструмент измерения контрастности в DevToolsИнструмент измерения контрастности в DevTools

Если посмотреть на скриншот, то можно выделить три основных показателя:

  • текущее значение контраста

  • Минимально допустимое значение контраста (АА)

  • Достаточно значение контраста (ААА)

Inspectelementtooltip

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

InspectelementtooltipInspectelementtooltip

ВInspectelementtooltipвыводится сводная информация о выделенном элементе, в том числе общая информация по доступности.

Заключение

Готовя статью, я наткнулся на цитату, которая отлично передает мое отношение к вопросу доступности сайтов

Доступность не обязана сразу быть идеальной, она просто должна быть немного лучше, чем вчера.Леони Уотсон на FronteersConf

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

Подробнее..

Полезные функции DevTools для тестировщиков

21.05.2021 18:18:17 | Автор: admin

Всем привет! Меня зовут Миша, я работаю на позиции ручного тестировщика, или Manual QA - кому как удобно. В связи с тем, что в моей работе преобладает ручное тестирование - я часто сталкиваюсь с консолью разработчика в браузере (думаю как и 99.9% web-тестировщиков).

В интернете огромное количество источников, в которых можно найти информацию про DevTools, как для разработчиков, так и для тестировщиков. Конечно, наполнение таких статей очень сильно разнится в зависимости от ее направленности. Изучив большое количество подобного материала и поняв, что нас (тестировщиков) обделяют информацией :), решил залезть в первоисточник для изучения инструментов разработчика в полном объеме. Пройдясь по всем пунктам огромного меню, выписал для себя порядка 20 пунктов, которые были бы интересны (читай полезны) для тестировщиков. Сразу скажу, что в статье я не буду рассказывать, как пользоваться тем или иным инструментом, так как это подробно описано в статьях, которые будут прикреплены к каждому из пунктов. Цель моего повествования - скорее вычленить из огромного списка возможностей DevTools, именно те, которые были бы полезны для QA-специалистов. Не претендую на объективность и полную раскрытость темы, но постараюсь это сделать.

P.S.: Очередность пунктов в списке не говорит об их важности.

  1. Эмуляция android и ios, подключение android при отладке.

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

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

  2. Переопределение геолокации и подмена User-Agent.

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

    Подмена User-AgentПодмена User-Agent
  3. Определение JS пути к строке.

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

  4. Изменение стилей CSS у элементов.

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

    Пример изменения размера поля элементаПример изменения размера поля элемента
  5. Неиспользуемые CSS и Javascript в вёрстке.

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

    Отчет о покрытии кодаОтчет о покрытии кода
  6. Немного интересного про debug JavaScript.

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

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

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

  8. Имитация медленного сетевого соединения.

    Эффект DevTools, который демонстрирует, как ведет себя страница при её загрузке на мобильных устройствах. Разработка, в 90% случаев, ведется при хороших условиях, связанных со скоростью интернета и его стабильностью, также как и тестирование, в связи с чем выловить баг, который воспроизводится у пользователя, становится возможным только полностью воспроизведя все окружение, в котором этот баг проявился. С появлением нового высокоскоростного интернета для мобильный устройств, возможно эта проблема будет не совсем актуальной, но пока этого не происходит. По крайней мере не во всех странах .

    Выбор скорости соединенияВыбор скорости соединения
  9. Настройка столбцов на вкладке Network.

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

    Список возможных столбцов в NetworkСписок возможных столбцов в Network
  10. Снимки экрана при загрузке страницы.

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

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

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

  12. Все о cookies во вкладке applications.

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

Бонусы:

Здесь я бы хотел оставить те ссылки (с небольшими пометками), которыми я лично еще не пользовался, но которые, по моему мнению, были бы полезны для изучения и последующего применении тестировщиком на практике:

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

Всем спасибо за внимание!

Подробнее..

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

18.11.2020 20:10:57 | Автор: admin

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

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


1. Командное меню.

Одна из особенностей, которую я люблю в своем редакторе (VS Code) - это функция палитры команд. Она даёт разработчикам возможность выполнять множество команд прямо с клавиатуры. Всё, что вам нужно нажать ctrl + shift+p, и у вас появятся сотни доступных команд. Эта функция реализуется в нескольких приложениях, а теперь она доступна и в инструментах Chrome.

Давайте представим, что вам необходимо сделать скриншот HTML узла на web-странице. Всё, что вам нужно сделать для этого это:

1. Открыть инструменты разработчика
2. Выбрать узел, который вам необходим
3. Нажать ctrl + shift+p и написать слово Screenshot

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

Делаем скриншот выбранного узлаДелаем скриншот выбранного узла

2. Консоль может сделать многое.

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

Информирование, предупреждение и ошибки.

В приложениях у нас есть различные уровни сообщений. Error, warn и info являются наиболее распространенными. У вас уже есть эта поддержка в Chrome Dev Tools с помощью методов console.info, console.warn и console.error. Давайте посмотрим на них в действии.

Разные уровни логированияРазные уровни логирования

Печать массива в виде таблицы.

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

console.table в действииconsole.table в действии

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

Вы можете добавить стили CSS при выводе логов, чтобы выделить необходимые детали.

Стилизованное сообщениеСтилизованное сообщение

Группировка логов.

Если у вас есть множество логов, то время их отладки / анализа резко сократится, если вы сможете их сгруппировать. Консоль предлагает для этого три метода: console.group, console.groupCollapsed и console.groupEnd.

Группировка логовГруппировка логов

Измерение времени выполнения операциями.

Хотя существуют и другие способы измерения времени выполнения кода в JavaScript, вы также можете использовать console.time и console.timeEnd, чтобы легко его измерить.

Измерение времени с помощью console.timeИзмерение времени с помощью console.time

3. Копирование запроса как fetch / cURL / NodeJS fetch.

Когда мы вызываем API из внешнего интерфейса, если предполагаемого результата нет, мы обычно используем Postman или cURL для дальнейшего исследования. Вместо того, чтобы вручную вводить URL-адрес, заголовки и параметры в эти инструменты, вы можете скопировать запрос как вызов fetch, cURL или как вызов NodeJS fetch, открыв вкладку Network в Chrome Dev Tools.

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

4. Ссылка на текущий выбранный тег.

Если вы хотите выполнить какие-то действия с узлом HTML, вы можете просто получить ссылку на него. В Chrome Dev Tools $0 в консоли всегда будет ссылаться на текущий выбранный узел.

$0 в действии$0 в действии

5. Точки останова.

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

Условные точки останова.

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

Условная точка остановаУсловная точка останова

Точки останова изменений DOM.

Я сталкивался с ситуациями, когда несколько сценариев изменяют элементы DOM. В таких ситуациях очень трудно найти правильный блок скрипта, который произвел модификацию. Chrome Dev Tools упрощает это, позволяя нам добавлять точку останова в HTML-узел в событии модификации поддерева.

Точка останова DOMТочка останова DOM

В дополнение к этому, в Chrome Dev Tools есть поддержка точки останова для запросов XHR, исключений, функций и Event Listener.

6. Отмена минификации кода.

При попытке выявить проблему в веб-приложении, выпущенным в продакшн, вероятность того, что придется отлаживать минифицированный код JS, очень высока. Если вы откроете минифицированный файл в Chrome Dev Tools, выплывет окно для отмены минификации. В нижней части редактора есть еще одна кнопка с фигурными скобками, которая имеет ту же функциональность. Это поможет вам привести минифицированный код в читаемое состояние.

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

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

Подобно hover, он может переключать состояния active, focus, focus-within и visited.

8. Возможность сохранить логи.

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

9. Отладка произвольных функций.

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

10. Режим проектирования.

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

document.designMode="on"

Последние штрихи

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

От переводчика:

Надеюсь, вам понравилась эта статья. Эту и многие другие полезные статьи для начинающих Frontend-разработчиков я транслирую в Telegram-каналеFrontend.school(), где также готовлю полезные викторины для проверки своих знаний.

Подробнее..

Категории

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

  • Имя: Макс
    24.08.2022 | 11:28
    Я разраб в IT компании, работаю на арбитражную команду. Мы работаем с приламы и сайтами, при работе замечаются постоянные баны и лаги. Пацаны посоветовали сервис по анализу исходного кода,https://app Подробнее..
  • Имя: 9055410337
    20.08.2022 | 17:41
    поможем пишите в телеграм Подробнее..
  • Имя: sabbat
    17.08.2022 | 20:42
    Охренеть.. это просто шикарная статья, феноменально круто. Большое спасибо за разбор! Надеюсь как-нибудь с тобой связаться для обсуждений чего-либо) Подробнее..
  • Имя: Мария
    09.08.2022 | 14:44
    Добрый день. Если обладаете такой информацией, то подскажите, пожалуйста, где можно найти много-много материала по Yggdrasil и его уязвимостях для написания диплома? Благодарю. Подробнее..
© 2006-2024, personeltest.ru