#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

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

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

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

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

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

#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
Chrome for Testing

Сенсация! Сенсация! Товарищи из Хрома выпустили браузер, созданный для мануального и автоматизированного тестирования веб-приложений.

Помните боль, связанную с внезапным обновлением версии Хрома или необходимостью найти бинарник с непоследней версией браузера?

Особенности Chrome for Testing решают эти проблемы:
1) не автообновляется
2) доступен для каждой версии Хрома (в тч нестабильных)

Разработчики предупредупреждают: для повседневного использования браузер не очень подходит (наверняка из-за отсутствия автообновления).

При этом Chrome for Testing максимально приближен к пользовательской версии браузера.

Как добыть себе Chrome for Testing?
* через puppeteer/browsers command-line utility
* через апишку

Максимум подробностей можно найти тут. Стоит почитать, потому что в статье описаны боли и причины, из-за которых появился Chrome for Testing.

#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
Начало конца third-party cookies

Если коротко, то к концу 2024 года Хром отключит third-party cookies у 100% пользователей. Сейчас у 1% пользователей они уже не работают.

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

Где прочитать подробности про отключение:
- Preparing for the end of third-party cookies
- The next step toward phasing out third-party cookies in Chrome

Что дальше?
Хром предлагает альтернативы, например, Related Website Sets и Storage Access API.

Как быстро проверить наличие third-party cookies на своём вебе?
Начиная с Chrome 118, информацию об этом можно посмотреть в Issues в ДевТулзах (см картинку). Более сложные альтернативы здесь.

Как протестировать функциональность с отключенными third-party cookies?
Начиная с Chrome 118, перейди по

chrome://flags/#test-third-party-cookie-phaseout

и включи флаг. Более сложные альтернативы тут.

#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амая первая версия с Подлодки живёт тут, а теперь будет целый день практики и инфы, проверенной на международных конфах и существенно доработанной.