DevTools предоставляет панель помощи с использованием искусственного интеллекта , которая помогает вам понять ваш веб-сайт и устранить проблемы, общаясь с агентом на основе ИИ.
С помощью ИИ вы можете отлаживать стили , сетевые настройки , производительность и исходный код вашего веб-сайта.
Чтобы эффективно общаться с Gemini в панели помощи ИИ , узнайте, как открыть панель, задать вопросы и управлять ходом разговора .
Откройте панель помощи ИИ.
Панель помощи ИИ открывается в выдвижном меню .
Чтобы открыть панель, нажмите кнопку « Помощь ИИ» , расположенную в точке входа справа от главной панели инструментов вверху.
Вы также можете открыть панель непосредственно из панелей «Элементы» , «Сеть» , «Источники» или «Производительность» , щелкнув правой кнопкой мыши по элементу или запросу и выбрав «Спросить ИИ» .
Из командного меню
Чтобы открыть подсказку ИИ из командного меню, введите AI , а затем выполните команду «Показать подсказку ИИ» , рядом с которой находится значок выдвижной панели .
В меню «Дополнительные инструменты»
В качестве альтернативы, в правом верхнем углу выберите «Дополнительные параметры» > «Дополнительные инструменты» > «Помощь ИИ» .
Подсказка
При начале нового разговора помощник на основе искусственного интеллекта предлагает примеры подсказок, которые помогут вам быстро начать.
Нажмите на любой из вариантов ответа, чтобы автоматически заполнить поле ввода в нижней части панели.
В качестве альтернативы, вы можете ввести свой собственный вопрос или подсказку в поле ввода.
Чтобы отправить запрос, нажмите клавишу Enter или щелкните стрелку в правой части поля ввода.
С помощью бесплатного чата вы можете задавать вопросы более высокого уровня, например, «как использовать инструменты разработчика для отладки доступности?» или «какие сетевые запросы выполняются медленно?», а также копировать части файла, например, из панели «Источники» , и вставлять их в чат, чтобы узнать, для чего он нужен.
Искусственный интеллект помогает в создании стиля.
Используйте панель помощи ИИ для настройки стилей, чтобы понять общую структуру веб-сайта, стили конкретных элементов и получить сгенерированные ИИ исправления ошибок CSS.
Откройте панель «Искусственный интеллект» в качестве помощника.
Чтобы открыть подсказку ИИ на панели «Элементы» , при проверке узла DOM щелкните по нему правой кнопкой мыши и выберите пункт «Спросить ИИ» .
Когда вы открываете голосового помощника таким образом, проверяемый элемент DOM уже предварительно выбран в качестве контекстного элемента для диалога.
В качестве альтернативы, нажмите на плавающую кнопку, прикрепленную к наведенному DOM-узлу.
Контекст разговора
В чатах с использованием ИИ-помощника ссылка всегда относится к текущему проверяемому элементу, которым является последний элемент, выбранный в дереве DOM панели «Элементы». Ссылка на этот элемент отображается в левом нижнем углу панели.
Измените контекст, используя средство выбора элементов рядом с текущим элементом или выбрав элемент в дереве DOM на панели «Элементы» .
Выбрав контекст, вы можете сделать снимок экрана области просмотра и отправить его в чат. Нажмите кнопку Сделать снимок экрана » рядом с полем ввода чата.
Скриншоты можно использовать для предоставления дополнительного визуального контекста вашим подсказкам, например, чтобы проверить, имеют ли все видимые кнопки одинаковое расстояние между ними.
В то время как текущий проверяемый элемент является основой диалога, система искусственного интеллекта имеет доступ ко всем веб-API для сбора дополнительной информации с проверяемой страницы. Это включает в себя запрос к другим элементам с помощью document.querySelector или оценку вычисленных стилей.
Искусственный интеллект для помощи в работе с сетями
Используйте панель помощи ИИ для анализа сетевых запросов, отправляемых вашим веб-сайтом.
Откройте панель «Сеть» для получения помощи с помощью ИИ.
Чтобы открыть запрос с помощью ИИ из панели «Сеть» , щелкните правой кнопкой мыши по запросу и выберите пункт «Задать вопрос ИИ» .
При открытии голосового помощника с использованием ИИ выбранный сетевой запрос автоматически выбирается в качестве контекста для разговора.
В качестве альтернативы, нажмите на плавающую кнопку рядом с сетевым запросом, на который вы наведете курсор.
Контекст разговора
Чаты с участием ИИ-помощника связаны с текущим запросом в панели «Сеть» . Ссылка на этот запрос отображается в левом нижнем углу панели.
Измените контекст, щелкнув по другому запросу на панели «Сеть» .
Искусственный интеллект использует URL-адрес запроса, заголовки, временные параметры и цепочку инициаторов запроса для ответа на ваши вопросы.
Важно: заголовки, которые могут содержать конфиденциальную информацию, автоматически удаляются.
После начала разговора нажмите кнопку «Развернуть » (нажмите в разделе Analyzing network data , чтобы увидеть необработанные данные, используемые системой искусственного интеллекта .
Искусственный интеллект помогает повысить производительность.
Воспользуйтесь панелью помощи ИИ для анализа производительности, чтобы ознакомиться с профилями производительности, записанными на панели «Производительность» .
Откройте панель «Искусственный интеллект» для получения помощи.
Чтобы включить помощь ИИ на панели «Производительность» , сначала создайте профиль производительности .
В зависимости от того, что вы хотите исследовать, вы можете открыть панель **помощи ИИ** либо из отдельных отчетов о производительности, либо для действий в представлении трассировки производительности.
Анализ производительности
На вкладке «Аналитика» откройте аналитический отчет, например, **LCP по фазам **, а затем нажмите кнопку «Задать вопрос ИИ».
В DevTools открывается панель помощи ИИ , в которой эта информация о производительности предварительно выбрана в качестве контекста для беседы.
Просмотр трассировки производительности
Чтобы открыть подсказку ИИ из окна трассировки, щелкните правой кнопкой мыши по действию и выберите параметр «Спросить ИИ» .
В данном случае это действие заранее выбрано в качестве контекста для разговора.
Контекст разговора
Выбранное действие используется в качестве контекста для вашего разговора с ИИ-помощником . Ссылка на это действие отображается в левом нижнем углу панели.
Анализ производительности
Если вы нажали «Задать вопрос ИИ по конкретному показателю производительности», этот показатель отобразится в качестве выбранного контекста. Вы можете нажать «Задать вопрос ИИ» под другими показателями, чтобы изменить свой выбор.
После начала разговора разверните раздел Analyzing insight: ... , чтобы увидеть исходные данные, используемые системой искусственного интеллекта.
Трассировка просмотра
Вы можете выбирать различные элементы в трассировке производительности, и контекст будет изменяться соответствующим образом.
Система искусственного интеллекта использует временные параметры из выбранной схемы обработки вызовов для ответа на ваш запрос.
После начала разговора нажмите кнопку в разделе Analyzing call tree , чтобы увидеть необработанные данные, используемые системой искусственного интеллекта .
Искусственный интеллект помогает в поиске источников.
Воспользуйтесь панелью помощи ИИ , чтобы понять, какие файлы загружаются и используются вашим веб-сайтом.
Откройте панель «Источники» для получения помощи от ИИ.
Чтобы открыть подсказку ИИ на панели «Источники» , щелкните правой кнопкой мыши файл и выберите пункт «Спросить ИИ» .
При открытии голосового помощника с использованием ИИ выбранный файл автоматически выделяется в качестве контекста для разговора.
В качестве альтернативы, нажмите на плавающую кнопку при наведении курсора на файл.
Контекст разговора
Выбранный файл используется в качестве контекста для вашего разговора с ИИ-помощником . Ссылка на этот файл отображается в левом нижнем углу панели.
Изменить контекст можно, щелкнув по другому файлу на панели «Источники».
Система помощи на основе искусственного интеллекта использует имя выбранного файла, URL-адрес, карту исходного кода (если имеется) и содержимое, чтобы ответить на ваши вопросы.
После начала разговора нажмите кнопку в разделе Analyzing file , чтобы увидеть необработанные данные, используемые системой искусственного интеллекта .
Ход разговора
Отправка запроса запускает диалог со стилистом. Чтобы получить необходимую информацию для наилучшего ответа на ваш запрос, агент генерирует и выполняет JavaScript-код, который вызывает веб-API. Ход выполнения запроса агентом отображается поэтапно. Статус начального этапа: Investigating… .
Метка шага обновляется по мере того, как агент выполняет более конкретные действия для решения вашего вопроса.
После того как агент придет к окончательному ответу, он отобразится ниже этапов расследования, включая предложения по дальнейшим действиям.
Нажмите на любой из предложенных вариантов, чтобы продолжить разговор. Нажмите
Это один из этапов расследования, призванный лучше понять, что именно делал искусственный интеллект за кулисами.
При разворачивании индикатора выполнения вы увидите код, выполненный агентом, вместе с его возвращаемым значением. Скопируйте выполненный код для дальнейшего использования, например, для его выполнения с помощью панели консоли .
Приостановленные разговоры
Искусственный интеллект может генерировать код с побочными эффектами. В этом случае диалог приостанавливается перед выполнением кода.
Когда разговор приостанавливается, просмотрите код, предложенный агентом. Нажмите кнопку « Продолжить , чтобы продолжить, или кнопку «Отмена» , чтобы предотвратить выполнение.
Сохраните изменения в рабочей области.
При наличии подключенной папки рабочей области вы можете сохранять изменения стиля, предложенные помощником ИИ, обратно в исходные файлы CSS на вашем компьютере.
Для этого:
Сначала сгенерируйте файл метаданных и подключите папку рабочей области .
В качестве альтернативы вы можете добавить папку вручную .
Начните чат из панели «Элементы» .
Воспользуйтесь помощью искусственного интеллекта для оперативной корректировки ваших CSS-стилей.
Искусственный интеллект может генерировать код и приостанавливать его выполнение . Просмотрите код и нажмите «Продолжить» , чтобы протестировать изменения в режиме реального времени.
Разверните раздел «Несохраненные изменения» и нажмите «Применить к рабочей области» .
Просмотрите изменения в
diffи нажмите «Сохранить все» .
Чтобы ознакомиться с этим рабочим процессом, см.:
Ответ не дан.
Искусственный интеллект может не дать ответов по разным причинам.
Если вы считаете, что ваш запрос должен обсуждаться системой искусственного интеллекта , сообщите об ошибке .
История разговоров
Как только вы начинаете разговор, каждый последующий ответ основывается на вашем предыдущем взаимодействии с искусственным интеллектом.
Искусственный интеллект сохраняет историю ваших переписок между сеансами, поэтому вы можете получить доступ к предыдущим чатам даже после перезагрузки окна инструментов разработчика или Chrome.
Для управления историей переписки используйте элементы управления в верхнем левом углу панели.
Начать новый
Чтобы начать новую беседу в контексте выбранного диалога , нажмите кнопку ».
Продолжать
Чтобы продолжить предыдущую беседу, нажмите кнопку и выберите её в контекстном меню.
Удалить
Чтобы удалить переписку из истории, нажмите кнопку .
Оцените ответы и оставьте свой отзыв.
Функция помощи с помощью ИИ находится на стадии эксперимента. Поэтому мы активно собираем ваши отзывы, чтобы узнать, как мы можем улучшить качество ответов и общее впечатление от использования сервиса.
Проголосуйте за ответы
Оцените ответ, используя кнопки «палец вверх ) и «палец вниз , расположенные под ответом.
Ответы на вопросы отчета
Чтобы сообщить о неприемлемом контенте, нажмите кнопку рядом с кнопками для голосования.