Ускорьте свой рабочий процесс разработки с помощью Gemini, интегрированного непосредственно в Chrome DevTools. Оптимизируйте отладку с помощью ИИ для стилей, производительности, сети и источников.

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

Can you center this element?

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

Why does this request fail?

Редко бывает так, что вы написали весь код на своем сайте - не уверены, для чего используется определенный скрипт? Помощь ИИ может помочь:

What is this file used for?

Плохие основные веб-показатели? Поиск первопричины медленного веб-сайта может быть сложным. Помощь ИИ может исследовать и предлагать решения для вас:

Help me optimize my LCP score

Получайте помощь ИИ, где бы вы ни находились

Нажмите кнопку «Спросить ИИ» , чтобы получить помощь от Gemini с вашей текущей задачей.

Демо

Ознакомьтесь с нашими интерактивными демонстрациями, чтобы узнать, как начать использовать искусственный интеллект в своих проектах.
Попробуйте исправления стиля на основе искусственного интеллекта, чтобы превратить статичный самолет в парящее чудо, при этом соблюдая меры безопасности!
Сможете ли вы преодолеть полосу прокрутки гибели с помощью ИИ или команда водолазов навсегда останется в ловушке кошмара макета?

Не знаете, с чего начать?

Изучите идеи для помощи ИИ в DevTools. Экспериментируйте с нашими демонстрациями или попробуйте на своих собственных веб-сайтах.

Исправить соотношение сторон изображения

Make all teaser images always be 16:9

Одно из изображений обрезано не так, как другие?

  • Откройте страницу chrome.dev/cinemai/devtools/ и откройте DevTools .
  • Найдите и выберите раздел « Узнайте больше, посмотрев» .
  • Нажмите на значок помощи ИИ.
  • Подсказка: Make all teaser images always be 16:9 .
  • Нажмите Apply the suggested change и продолжите.
  • Кнопка должна быть расположена по центру.

Устранить проблему переполнения

How can I make this element visible?

Элемент не виден?

  • Откройте страницу chrome.dev/cinemai/devtools/ и откройте DevTools .
  • Найдите элемент img дайвера .
  • Нажмите на значок помощи ИИ.
  • Подсказка: How can I make this element visible without scrollbars?
  • Нажмите Apply the suggested change и продолжите.
  • Дайвер должен быть виден на экране.

Демистификация заголовков

Are there any security headers present?

Чтобы узнать больше о заголовках безопасности определенного ресурса...

  • Откройте страницу chrome.dev/cinemai/devtools/ и откройте DevTools .
  • На панели «Сеть» выберите запросы v4-chrome.dev.js .
  • Нажмите на значок помощи ИИ.
  • Подсказка: Are there any security headers present?
  • Магистр права объяснит заголовки, связанные с безопасностью ресурса.

Глубокие погружения

Посмотрите видео, объясняющие, как использовать помощь ИИ в DevTools для решения распространенных проблем веб-разработки.
Исследуйте историю чата с постоянным ИИ в Chrome 133-135
Присоединяйтесь к Джеселин, Оливеру и Маттиасу, которые представят помощь ИИ в Chrome 130-132

Начать

Убедитесь, что вы используете последнюю версию Chrome и вошли в систему. Вам должно быть не менее 18 лет, и вы должны находиться в одном из поддерживаемых местоположений.
Помощь ИИ отключена по умолчанию. Чтобы включить, перейдите в раздел Настройки > Помощь ИИ. Вам необходимо принять Условия обслуживания Google, чтобы использовать помощь ИИ.
Политика Enterprise может использоваться для контроля того, регистрируются ли данные, предоставленные Gemini, и используются ли они для обучения.

Помогите нам стать лучше!

Эта функция экспериментальная и может быть изменена в будущем. Она может генерировать неточную или оскорбительную информацию, которая не отражает точку зрения Google. Голосуйте за ответы, чтобы помочь нам улучшить ее и поддерживать обратную связь!