У Google Chrome з’явився вбудований АІ-асистент. Як використовувати його для розробки та тестування

💡 Усі статті, обговорення, новини про Front-end — в одному місці. Приєднуйтесь до Front-end спільноти!

Вітаю. З вами Артур! Я дуже люблю AI та все, що з ним повʼязано. Тому не міг пройти повз оновлення Google Chrome, в яке був доданий АІ-асистент. Розберемо детальніше, що ж там в середині та як можна його використовувати.

Як завжди у мене для вас є відеоверсія статті, якщо не любите лонгріди.

Як знайти AI-асистента в Google Chrome

Через Elements

Є декілька способів його побачити. Найлегший — відкрити DevTools та у табі Elements тицьнути на якийсь елемент правою кнопкою, після чого обрати Ask AI.

Ну а далі можна поставити найскладніше питання — як центрувати елемент :)

Результат:

Через command menu

Через More tools меню

Стилізація

Контекст

Чати завжди стосуються поточного елемента, що інспектується. Посилання на цей елемент показано в нижньому лівому куті панелі. Змінити контекст можна за допомогою вибору елемента (кнопка-стрілочка для вибору елементів).

Хід розмови

Для отримання необхідної інформації та надання найкращої відповіді агент генерує й виконує JavaScript, який взаємодіє з веб-API. Статус оновлюється з виконанням агентом конкретніших дій для вирішення вашого запитання. Коли агент приходить до остаточної відповіді, її відображають включно з пропозиціями для подальших запитів.

Клацніть будь-який із запропонованих запитів, щоб продовжити діалог. Можна натиснути кнопку вниз на етапі інвестігейшену, щоб отримати краще розуміння того, що AI зробив під капотом.

Коли ви розгортаєте етап прогресу, бачите код, який агент виконав — разом із його результатом. Можна його скопіювати для подальшого використання, наприклад, в панелі Console.

Призупинені діалоги
AI-асистент може генерувати код із побічними ефектами. У таких випадках діалог призупиняється перед виконанням коду. Коли діалог призупиняється, можна переглянути код, запропонований агентом. Або натиснути кнопку Продовжити, щоб продовжити.

Відповідь не надана
Звісно, AI-асистент може не надати відповідь з дуже різних причин.

Історія діалогів
Коли ви розпочинаєте діалог, кожна наступна відповідь базується на ваших попередніх взаємодіях з AI. Діалог можна продовжити, почати новий або видалити.

Оцінка відповідей і надання відгуку
AI-асистент є експериментальною функцією. Тому Гугл активно збирає ваші відгуки, щоб покращити якість відповідей і загальний досвід. Тому ви можете оцінювати відповідь, використовуючи кнопки Палець вгору і Палець вниз під відповіддю.

Аналіз консолі

Друга прикольна штука — тепер можна аналізувати еррори у консолі за допомогою АІ.

Виглядає це отак:

Допомога у автоматизації

Тепер шукати селектори просто та легко. Виділяєте елемент та пишете побудуй мені унікальний селектор для цього елементу. Все :)

Загалом доволі цікаво виглядає.

Які ще задачі можна робити

Краще розуміння макета

Можна запитати у AI про макет, щоб зрозуміти, чому він відображається саме так до найдрібнішого вузла. І чому, наприклад, overflow: hidden; в цьому елементі дійсно має сенс.

Приклад запиту

Give me a summary of how this element and its children are laid out and re-create the layout in ASCII

Парне програмування

CSS став дійсно потужним. Іноді ви точно знаєте, що хочете зробити, але не можете знайти правильний набір CSS-властивостей. Поясніть свою проблему AI, і він допоможе.

AI проаналізує ваш наявний код, порівняє його з тим, що ви хочете досягти, і запропонує потрібні виправлення для перегляду, застосування та копіювання в вашу базу коду.

Консультант з accessibility

Зробити ваш вебсайт доступним і зручним для використання дуже важливо. Використовуйте допомогу AI, щоб отримати підказки про те, де <div> можна замінити на більш семантичний HTML-елемент, як допоможуть додаткові атрибути aria-* або як можна покращити контраст кольорів.

Кастомізація

Тренди змінюються: від градієнтів, тіней і грубих рамок до плоского дизайну, а тепер — до яскравих неонових кольорів на темному фоні.

Попросіть AI додати веселощів і зробити застосунок трохи цікавішим — наприклад, у стилі парку атракціонів!

Приклад запиту

This element looks a little boring. Can you make it look like a pirates theme park ride?

Трошки пограйтесь

Ну і на завершення — тут є доволі прикольна іграшка, як полагодити літак за допомогою АІ — chrome.dev/devtools-hangar. Треба тицяти на хрестики й там будуть підказки, як полагодити елементи.

Вийшло прикольно, як на мене. Також команда Гугла обіцяє додати АІ-асистента до табів Network, Sources та Performance. Будемо чекати нових оновлень та тестити, як працюють поточні фічі :)

P.S. Всім гарного дня та буду радий бачити вас у своїй групі, щоб слідкувати за оновленнями світу тестування та розробки!