Помощь искусственного интеллекта в создании стиля

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

Откройте панель «Помощь ИИ»

Панель помощи ИИ открывается в ящике .

Панель помощи ИИ открыта в состоянии по умолчанию.

Из панели «Элементы»

Чтобы открыть помощь ИИ из панели «Элементы», при проверке узла DOM щелкните правой кнопкой мыши узел и выберите параметр «Спросить ИИ» .

Контекстное меню элемента с выделенной опцией «Спросить ИИ».

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

Либо нажмите плавающую кнопку, прикрепленную к наведенному узлу DOM.

Плавающая кнопка, прикрепленная к узлу DOM.

Из меню команд

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

Открытое меню команд с выделенным пунктом «Показать помощь ИИ».

Из меню «Дополнительные инструменты»

Либо в правом верхнем углу выберите Дополнительные параметры > Дополнительные инструменты > Помощь ИИ .

Открылось меню дополнительных инструментов.

Контекст разговора

Чаты с поддержкой ИИ всегда относятся к текущему проверяемому элементу, который является последним выбранным элементом в дереве DOM панели «Элементы». Ссылка на этот элемент отображается в левом нижнем углу панели.

Панель помощи ИИ с выделенным элементом контекста.

Измените контекст с помощью средства выбора элементов рядом с текущим элементом или выбрав его из дерева DOM панели «Элементы» .

Выбрав нужный контекст, вы можете сделать снимок экрана области просмотра и отправить его в чат. Нажмите кнопку Сделать снимок экрана » рядом с полем ввода чата.

Кнопка «Сделать снимок экрана» и прикрепленный снимок экрана в поле ввода.

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

Хотя текущий проверяемый элемент является основой диалога, ИИ-помощник имеет доступ ко всем веб-API для сбора дополнительной информации с проверяемой страницы. Это включает в себя запросы к другим элементам с помощью document.querySelector или оценку вычисляемых стилей.

Подсказка

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

Панель помощи ИИ с выделенными примерами подсказок.

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

Или введите свой собственный вопрос или подсказку в поле ввода.

Чтобы отправить запрос, нажмите клавишу Enter или щелкните стрелку справа от поля ввода.

Ход разговора

Отправка запроса запускает диалог с агентом стилизации. Чтобы получить информацию, необходимую для наилучшего ответа на ваш запрос, агент генерирует и выполняет JavaScript-код, который вызывает веб-API. Ход выполнения агента отображается пошагово. Начальный статус шага — Investigating… .

Панель помощи ИИ после начала разговора.

Метка шага обновляется по мере того, как агент выполняет более конкретные действия для решения вашего вопроса.

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

Панель помощи ИИ с ответом, данным ИИ.

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

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

Панель помощи ИИ с расширенным этапом разговора.

При раскрытии чипа прогресса вы увидите код, выполненный агентом, и его возвращаемое значение. Скопируйте выполненный код для дальнейшего использования, например, с помощью панели «Консоль» .

Приостановленные разговоры

Помощь ИИ может генерировать код с побочными эффектами. В этом случае диалог приостанавливается перед выполнением кода.

Панель помощи ИИ с приостановленным разговором.

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

Сохраните изменения в вашем рабочем пространстве

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

Для этого:

  1. Сначала создайте файл метаданных и подключите папку рабочей области .

    Кроме того, вы можете добавить папку вручную .

  2. Начните чат с панели «Элементы» .

  3. Оперативная помощь ИИ для изменения вашего CSS.

  4. Помощь ИИ может сгенерировать код и приостановить выполнение . Проверьте код и нажмите «Продолжить» , чтобы протестировать изменения в режиме реального времени.

  5. Разверните раздел Несохраненные изменения и нажмите Применить к рабочей области .

  6. Просмотрите изменения в файле diff и нажмите кнопку Сохранить все .

Чтобы изучить этот рабочий процесс, см.:

Ответ не дан

Помощь ИИ может не дать ответов по разным причинам.

Панель помощи ИИ с отказом в разговоре.

Если вы считаете, что ваш запрос должен быть обсужден службой поддержки ИИ , сообщите об ошибке .

История разговоров

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

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

Используйте элементы управления в левом верхнем углу панели для управления историей разговоров.

Панель помощи ИИ с выделенными элементами управления историей.

Начать новый

Чтобы начать новый разговор с текущим выбранным контекстом разговора , нажмите кнопку .

Продолжать

Чтобы продолжить прошлую беседу, нажмите кнопку и выберите ее в контекстном меню.

Удалить

Чтобы удалить беседу из истории, нажмите кнопку .

Оцените ответы и оставьте отзыв

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

Панель помощи ИИ с выделенными элементами управления рейтингом.

Голосование за ответы

Оцените ответ с помощью кнопок большой палец вверх) и большой палец вниз) под ответом.

Сообщить ответы

Чтобы сообщить о неприемлемом контенте, нажмите кнопку рядом с кнопками голосования.