DevTools предоставляет панель помощи с использованием искусственного интеллекта , которая помогает вам понять ваш веб-сайт и устранить проблемы, общаясь со встроенным агентом ИИ.
Панель управления с использованием искусственного интеллекта работает на платформе Gemini и выполняет следующие функции:
- Специализируется на веб-разработке.
- Может ответить на общие вопросы о всей веб-странице, а также предоставить конкретные рекомендации по различным темам, включая, помимо прочего, стилизацию, сетевые возможности, производительность и многое другое.
- Автоматически сужает круг тем и выбирает конкретный контекст для обсуждения, например, элементы DOM, сетевые запросы, события трассировки производительности и многое другое.
- Может выполнять автономные действия, такие как проведение аудитов и запись трассировок производительности.
- Предоставляет пошаговое описание своих действий и обоснований, а также ссылки на соответствующие разделы DevTools, позволяющие просмотреть их одним щелчком мыши.
- Может предлагать изменения в коде и генерировать запрос с подсказками для выполнения вашим агентом по кодированию.
С помощью ИИ вы можете отлаживать стили, сетевые настройки, производительность, исходный код вашего веб-сайта и многое другое.
Чтобы эффективно общаться с Gemini в панели помощи ИИ , узнайте, как открыть панель, задать вопросы и управлять ходом разговора .
Откройте панель помощи ИИ.
Панель помощи с использованием искусственного интеллекта по умолчанию открывается в выдвижном меню .
Чтобы открыть панель, нажмите кнопку « Помощь ИИ» , расположенную в точке входа справа от главной панели инструментов вверху.
С панелей
Вы можете открыть панель с выбранным контекстом беседы непосредственно из панелей «Элементы» , «Сеть» , «Источники» или «Производительность» двумя способами:
Нажмите
Кнопка «Отладка с помощью ИИ» находится рядом с элементом, сетевым запросом, исходным файлом или расширенным анализом производительности. 
Щелкните правой кнопкой мыши элемент, запрос, файл или запись трассировки и выберите один из распространенных вариантов подсказок в контекстном меню «Отладка с помощью ИИ» .
Из командного меню
Чтобы открыть подсказку ИИ из командного меню, введите AI , а затем выполните команду «Показать подсказку ИИ» , рядом с которой находится значок выдвижной панели .
В меню «Дополнительные инструменты»
В качестве альтернативы, в правом верхнем углу выберите «Дополнительные параметры» > «Дополнительные инструменты» > «Помощь ИИ» .
Подсказка
При начале нового разговора помощник на основе искусственного интеллекта предлагает примеры подсказок, которые помогут вам быстро начать.
Нажмите на любой из вариантов ответа, чтобы автоматически заполнить поле ввода в нижней части панели.
В качестве альтернативы, вы можете ввести свой собственный вопрос или подсказку в поле ввода.
Чтобы отправить запрос, нажмите клавишу Enter или щелкните стрелку в правой части поля ввода.
Вопросы открытого типа без контекста
В свободном чате вы можете задавать сложные открытые вопросы без предварительного контекста. Например:
How to use DevTools to debug accessibility?Для более эффективного ответа на ваш запрос ИИ-помощник сначала проведет проверку доступности с помощью Lighthouse.
What are the slowest network requests on this page?Искусственный интеллект предоставит список подозрительных запросов и ссылки на них в панели «Сеть» , так что вы сможете одним щелчком выбрать запрос в качестве контекста разговора.
What performance issues exist on the page?Искусственный интеллект автоматически запишет график производительности с выбранными вами настройками, чтобы ответить на этот запрос.
Запросы типа
How do I use the Animation panel?илиWhere is the high contrast setting in DevTools?предоставят прямую помощь по работе с самими инструментами разработчика.
После начала чата искусственный интеллект будет интеллектуально обновлять контекст на основе ваших действий, когда чат пуст, при этом учитывая ваши ручные настройки.
Подсказки с контекстом
Когда вы открываете помощника с искусственным интеллектом из панели , в окне чата выбирается соответствующий контекст разговора, поэтому вы можете общаться именно по выбранной вами теме.
В любой момент вы можете вручную изменить контекст, выбрав элемент в разделе «Элементы» , запрос в разделе «Сеть» , запись трассировки в разделе «Производительность» или файл в разделе «Источники» .
Вы также можете скопировать части файла, например, из панели «Источники» , и вставить их в чат, чтобы узнать, для чего он нужен.
Далее, узнайте больше о построении диалога в системах искусственного интеллекта .
Ход разговора
Отправка запроса запускает диалог с агентом. Чтобы получить информацию, необходимую для наилучшего ответа на ваш запрос, агент генерирует и выполняет JavaScript-код, который вызывает веб-API.
Ход работы агента отображается поэтапно. Начальный статус этапа: Investigating… .
Метка начального шага обновляется по мере того, как агент выполняет более конкретные действия в ответ на ваш запрос.
В зависимости от того, что вы отлаживаете, агент также может выполнять действия в инструментах разработчика, такие как запись трассировки производительности или запуск аудита Lighthouse.
Пошаговое руководство агента
После того как агент сгенерирует ответ на ваш запрос, метка начального шага изменится на «Показать пошаговое руководство агента» или «Показать ход размышлений» , которые вы можете развернуть, чтобы увидеть шаги, предпринятые агентом для анализа данных, в боковой панели справа.
В эти шаги входят:
- Разворачиваемые фрагменты кода отображают выполняемый агент вместе с возвращенными данными. Вы можете скопировать код и выполнить его в консоли .
- Виджеты, представляющие результаты в более удобочитаемом формате.
В правом верхнем углу виджетов находится кнопка «Показать» , которая переводит вас в соответствующий раздел инструментов разработчика.
Дополнительные вопросы
После того как оператор придет к окончательному ответу, он может предложить дополнительные вопросы. Нажмите на любой из них, чтобы продолжить разговор.
Сгенерируйте подсказку для вашего агента по программированию.
Чтобы создать запрос для вашего агента по кодированию, нажмите «Скопировать агенту по кодированию» .
Агент обобщит свои выводы и идеи и предоставит действенную подсказку в сжатом виде или в удобочитаемом формате Markdown, которую вы можете скопировать в буфер обмена и продолжить программирование с помощью выбранного вами ИИ-агента.
Приостановленные разговоры
Искусственный интеллект может генерировать код с побочными эффектами. В этом случае диалог приостанавливается перед выполнением кода.
Когда разговор приостанавливается, просмотрите код, предложенный агентом. Нажмите кнопку « Продолжить , чтобы продолжить, или кнопку «Отмена» , чтобы предотвратить выполнение.
Вы можете просмотреть предлагаемые изменения кода на панели «Изменения» .
Агент применяет изменения внутри DevTools, но вы можете настроить свою рабочую область так, чтобы DevTools сохранял изменения в исходном коде.
Сохраните изменения в рабочей области.
При наличии подключенной папки рабочей области вы можете сохранять изменения стиля, предложенные помощником ИИ, обратно в исходные файлы CSS на вашем компьютере.
Для этого:
Сначала сгенерируйте файл метаданных и подключите папку рабочей области .
В качестве альтернативы вы можете добавить папку вручную .
Начните чат из панели «Элементы» .
Воспользуйтесь помощью искусственного интеллекта для оперативной корректировки ваших CSS-стилей.
Искусственный интеллект может генерировать код и приостанавливать его выполнение . Просмотрите код и нажмите «Продолжить» , чтобы протестировать изменения в режиме реального времени.
Разверните раздел «Несохраненные изменения» и нажмите «Применить к рабочей области» .
Просмотрите изменения в
diffи нажмите «Сохранить все» .
Чтобы ознакомиться с этим рабочим процессом, см.:
Ответ не дан.
Искусственный интеллект может не дать ответов по разным причинам.
Если вы считаете, что ваш запрос должен обсуждаться системой искусственного интеллекта , сообщите об ошибке .
История разговоров
Как только вы начинаете разговор, каждый последующий ответ основывается на вашем предыдущем взаимодействии с искусственным интеллектом.
Искусственный интеллект сохраняет историю ваших переписок между сеансами, поэтому вы можете получить доступ к предыдущим чатам даже после перезагрузки окна инструментов разработчика или Chrome.
Для управления историей переписки используйте элементы управления в верхнем левом углу панели.
Начать новый
Чтобы начать новую беседу в выбранном контексте, нажмите кнопку ».
Продолжать
Чтобы продолжить предыдущую беседу, нажмите кнопку и выберите её в контекстном меню.
Удалить
Чтобы удалить переписку из истории, нажмите кнопку .
Оцените ответы и оставьте свой отзыв.
Функция помощи с помощью ИИ находится на стадии эксперимента. Поэтому мы активно собираем ваши отзывы, чтобы узнать, как мы можем улучшить качество ответов и общее впечатление от использования сервиса.
Проголосуйте за ответы
Оцените ответ, используя кнопки «палец вверх ) и «палец вниз , расположенные под ответом.
Ответы на вопросы отчета
Чтобы сообщить о неприемлемом контенте, нажмите кнопку рядом с кнопками для голосования.