#инструменты #devtools
Старая добрая фича для работы с анимацией

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

Как найти инструмент для работы с анимацией: открыть Девтулзы в Хроме - нажать на три точки в верхней панели Девтузов - More tools - Animations.

Самое интересное тут - возможность замедленно воспроизвести анимацию.
Для этого: просмотрим анимацию (она запишется автоматически) - нажмём на play во вкладке анимации - выберем скорость в процентах - кликнем на запись нужной анимации. Результат прилагается, на нём наглядно видно, как отличается анимация при 100% и при 10%.

Подробная дока по вопросу тут.

#chrome #devtools #инструменты
Спасибо дорогому Хрому за доработанный поиск по DOM
(потихонечку к вам возвращаюсь)

В Chrome 107 стало возможным отключить поиск по DOM во время ввода (часто делало оч больно, так как надо было снова искать элемент, к которому пишешь локатор).

Ну так вот.
По дефолту элемент ищется как только введён очередной символ в поиске по elements.
Как включить поиск по нажатию Enter? Settings > Preferences > disable Search as you type.
Доку по вопросу можете найти тут.

Enjoy, дорогие. И берегите себя и свои нервишки

#chrome #devtools #инструменты
DevTools update (Chrome 107)

Только-только появился Хром 108, но там из интересного только дальнейшие доработки Рекордера. Так что поговорим побольше о полезностях Девтулзов 107-го Хрома.

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

Что ещё интересного?
* появилась возможность добавлять кастомные шорткаты (они же hotkeys) для Девтулзов (Settings > Shortcuts)

* помимо привычных шорткатов, появилась возможность добавить такой для light и dark themes (Settings > Shortcuts > Rendering). Это снова всё про эмуляцию предпочитаемой цветовой схемы. Правда чтобы шорткат исправно работал придётся держать открытой вкладку рендеринг (можно найти, например, через More tools).

* немного докрутили HAR-ы (теперь в них отображается полная инфа об initiator, раньше она часто терялась)

Подробнее обо всех доработках данной версии тут.

#chrome #devtools #инструменты
DevTools update (Chrome 108, 109)

Прям коротенечко (потому что ничего супер-интересного, но держим руку на пульсе) пройдёмся по апдейтам ДевТулзов.
1. Продолжаются доработки Recorder (улучшили локаторы, появились новые функции для работы со степами)
2. Добавили свеженькие шорткаты для Sources и автокомплита (по Ctrl + N, Ctrl + P на MacOS и по стрелке вправо)
3. Из экспериментального: улучшенный UI для работы с брейкпойнтами и включенный по дефолту pretty-print в Sources.

Подробности тут: 108 и 109

Кто о чём, а я всё про ДевТулзы

Специально для вас (наконец-то на ютюбе), мой доклад с осеннего Heisenbug - туть.

#chrome #devtools #инструменты
DevTools update (Chrome 110-112)

А вот и регулярный обзор фич ДевТулзов:

* Рекордер теперь поддерживает расширения не только для записи скриптов, но и для воспроизведения
* Реализованы тултипы для CSS-атрибутов (выглядит полезно, см скрин)
* Наконец-то (спасибо!!!) переделали отображение вложенных стилей (см видео)
* В рендеринг добавили опцию симуляции Reduced contrast
* встроенный Лайтхаус обновили до 10 версии. Что в нём нового-хорошего расписано тут
* ДевТулзы расширяют список event listener breakpoint (рассказывала в докладе, как они помогают локализовывать баги и находить локаторы)

Помимо этого, сделаны доработки UI/UX Перформанса, Рекордера, автокомплита в Консоли.

Подробнее тут: 110, 111, 112.

#web #devtools
Как сделать автозаполнение ваших веб-форм great again

Не могу не поделиться с вами этой находкой, потому что в ней прекрасно всё:
* экспериментальная фича ДевТулзов "Highlights a violating node or attribute in the Elements panel DOM tree" (пока только в Chrome Canary - про нестабильные версии браузеров писала тут)
* эта фича помогает бороться с кривым автозаполнением форм (что, согласитесь, бывает крайне бесяче) и повысить аксесабилити
* супер-модный дядька из Хрома рассказывает про неё на идеальном английском (заценить можно тут)

А что по сути?
1. Автофил -- предсказуемо, очень популярная фича (в 50%+ случаев, когда автозаполнение предлагается, его используют, а на формы с доступным автозаполнением реже забивают)
2. Как браузер понимает, что и куда подставлять? Благодаря атрибутам полей ввода (инпутов). Часто таких атрибутов нет/они некорректные/и так далее
3. Что добавили в ДевТулзы? Подсказки о том, что не так с вашими инпутами (см скрин: Elements > Issues)
4. Почему круто, что фича на ранней стадии разработки? Можно потыкать её и отправить фидбэк вот тута.
5. И, кстати, вот тут есть списочек атрибутов (когда-то у нас криво автозаполнялась форма и я его искала), а в видосе рассказывается ещё и про best practices.

Самые внимательные также найдут в видео потенциальные доработки UI автофилла (вместо уродливых менюшек на половину экрана смартфона).

#chrome #devtools #google
Что нового у Гугла?

Тут видосы и материалы с Google I/O 2023 (ежегодная конфа Гугла об их сервисах и продуктах) подвезли. Там как всегда много интересного, например:
* что нового у ChromeOS, web и mobile браузеров, Андроида (сможете рассказать своим разработчикам о новых фичах))
* WebDriver BiDi: The future of cross-browser automation (про историю UI-автотестов тут тоже есть)
* про Passkeys и Google Pay and Google Wallet (в тч про автотесты Гуглопея с тестовыми картами)
* How to test across all screen sizes
* Scalable UI testing solutions

Ну, и мне просто необходимо было пошарить с вами, как выглядели ДевТулзы в далёком 2008-ом)

#chrome #devtools #инструменты
DevTools update: редактирование хэдеров и содержимого респонсов (Chrome 115-117)

Из, наверное, самого интересного за последнее время в ДевТулзах появляются:
1) оверрайд хэдеров респонса (Хром 115)
2) оверрайд содержимого респонса (Хром 117, пока в нестабильной версии)

Override response headers

Network -> выбрать запрос -> Headers -> Response Headers -> по ховеру на хэдер появляется иконка редактирования -> можно изменить значение выбранного хэдера или добавить свой -> рефрешнуть страницу, чтобы изменения применились.

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

Изменённый запрос будет отмечен точкой рядом с запросом.

Зачем это всё?
Авторы фичи показывают её на примере CORS-error, которую можно обойти изменением значения хэдера Access-Control-Allow-Origin. Ну и мало что ещё нужно тестировщику поменять...

Override response content

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

Работать будет аналогично изменению хэдеров: выбрать запрос -> Override content -> отредактировали -> рефрешнулись.

Подробности и ограничения описаны тут и тут.

#chrome #devtools #инструменты
DevTools update
(Chrome 122-123)

1. Добавили фичу "Emulate a focused page"
для исследования элементов, отображаемых только при наведении курсора (в фокусе).
Emulate a focused page можно включить в Rendering или в Elements-Styles-:hov. Является глобальной настройкой, т.е. достаточно применить 1 раз на странице.

2. Опубликована подборка браузерных расширений для работы с Recorder.

3. В Нетворке в Статусе упавшего запроса теперь по дефолту отображается подробный failure reason.

4. В Нетворке навели красоту и появилось больше опций для копирования запроса.

5. Шок (для меня), что теперь в Device mode можно указывать позицию (posture) устройства -- Continuous или Folded. Если вы тоже пропустили эту магия, вот тут можно найти подробности.

6. Совсем модные теперь могут выбрать динамическую тему для ДевТулзов. Подробности здесь.

P.S. В Chrome 123 спрятали Easter egg. Ищите 💫

#chrome #автоматизация #devtools
Хром про тестирование

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

"...sees quality not as a burden, but as an investment. "

* Implement testing in your enterprise with Chrome
* Tools from Chrome for frictionless, automated testing
* Learn Testing. An in-depth course on software testing
* Fun & Powerful: Intro to Chrome DevTools (прям вапще база ДевТулзов)


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