📱

Get Our Mobile App

Take your business learning on the go!

Download on the App StoreGet it on Google Play

Google's Chrome DevTools MCP: This is the BEST & MOST USEFUL MCP by Google! 10X Better Coding!

AICodeKing8:29

Transcription

[Музыка] [Аплодисменты] Привет, добро пожаловать на очередное видео. Итак, Google незаметно выпустил кое-что, что мне очень понравилось. Мне это действительно очень нравится. И это называется Chrome DevTools MCP. Они говорят, что сегодня мы запускаем публичную предварительную версию нового протокола контекста модели Chrome DevTools MCP. Привнося мощь Chrome DevTools в помощь при написании кода с помощью ИИ. Кодирующие агенты сталкиваются с фундаментальной проблемой. Они не могут видеть, что на самом деле делает код, который они генерируют, когда он выполняется в браузере. По сути, они программируют с завязанными глазами. Сервер Chrome DevTools MCP меняет это. Помощники по написанию кода с помощью ИИ могут отлаживать веб-страницы напрямую и использовать возможности отладки и аналитику производительности DevTools. Это повышает их точность при выявлении и устранении проблем. По сути, это позволяет вам подключить этот MCP почти к любому ИИ-кодеру и позволить вашему ИИ-кодеру или агенту перемещаться по сети через браузер, заходить на веб-сайт или локальный URL-адрес и делать там что-то, проверять страницу на наличие ошибок и отлаживать проблемы, которые могут быть видны только тогда, когда что-то происходит. Это достигается с помощью инструментов разработчика, и он может проверять ошибки кода из журналов и аналогичных выходных данных, позволяя ему создавать приложения, тестировать их и проверять, возникают ли какие-либо ошибки. В своих собственных демонстрациях они показывают, как он используется с Gemini CLI, где он может заходить на любую страницу и проверять, например, LCP страницы, а затем улучшать производительность. Обычно это невозможно без ручного вмешательства. потому что обычно вам пришлось бы зайти в консоль, запустить тест производительности, а затем вручную предоставить результаты. Например, они упоминают, что сервер Chrome DevTools MCP предоставляет инструмент под названием performance start trace. При постановке задачи проверки производительности вашего веб-сайта LLM может использовать этот инструмент для запуска браузера, открытия вашего веб-сайта и использования Chrome DevTools для захвата трассировки производительности. Затем LLM может проанализировать трассировку производительности и предложить потенциальные улучшения. Вы можете использовать его для проверки изменений кода в режиме реального времени, диагностики сетевых ошибок и ошибок консоли, а также для автоматизации повторяющихся задач, где он может перемещаться, заполнять формы, воспроизводить ошибки и тестировать сложные пользовательские потоки, при этом проверяя среду выполнения. Вы также можете отлаживать проблемы с живым стилем и макетом. Вы можете попросить своего ИИ-агента подключиться к живой странице, проверить DOM и CSS и получить конкретные предложения для решения сложных проблем с макетом, таких как переполняющиеся элементы. Существует множество вариантов использования этого. Я в основном использовал его со своими ИИ-кодирующими агентами, поскольку это действительно делает вещи намного более эффективными. ИИ-кодер, такой как Claude Code с GLM, может проверять точные изменения, видеть, возникают ли какие-либо ошибки в консоли, и проверять весь пользовательский поток. Итак, чтобы использовать его, вы можете настроить его с любым инструментом, который вы предпочитаете. Но прежде чем продолжить, позвольте мне рассказать вам о Ninja Chat. Ninja Chat — это универсальная ИИ-платформа, где всего за 11 долларов в месяц вы получаете доступ к лучшим ИИ-моделям, таким как GPT40, Claude for Sonnet и Gemini 2.5 Pro, все в одном месте. Я использовал Gemini для быстрого исследования. Но что действительно круто, так это их ИИ-песочница, где вы можете сравнивать ответы от разных моделей бок о бок. Их генератор ментальных карт — это игра, меняющая правила игры для организации сложных идей. Базовый план дает вам 1000 сообщений, 30 изображений и пять видео в месяц с доступными более высокими уровнями. Если вам нужно больше, используйте мой код king 25 для скидки 25% на любой план или king 40 yearly для скидки 40% на годовые подписки. Проверьте ссылку в описании, чтобы попробовать самостоятельно. Теперь вернемся к видео. Если вы просто хотите использовать его как ИИ-агента, который проводит исследования и выполняет задачи для вас, то нет ничего лучше, чем Gemini CLI, поскольку он бесплатен и обычно лучше работает с этим MCP. Они также немного доработали его для MCP, поэтому он лучше всего подходит для такого типа использования, но он не так хорош для задач кодирования. Лично я настроил его с Kilo, потому что мне нравится использовать его с ним. У меня работает Kilo с планом кодирования GLM и моделью GLM 4.6, которую я много использовал, и она отлично работает с этой настройкой. Убедитесь, что вы зашли в настройки MCP в Kilo и в настройках проекта или глобальных настройках MCP, вставьте элемент конфигурации MCP для DevTools MCP, и все будет готово. Здесь я могу перейти и попросить его что-нибудь сделать. Например, у меня есть мое приложение KingBench, и я попрошу его запустить проект, а затем провести проверку производительности приложения и рассказать мне, как можно улучшить скорость. Сначала он попытается запустить приложение с помощью командных инструментов терминала, а затем перейдет к запуску инструмента MCP. Далее он перейдет к локальному приложению, и как только оно откроется, он запустит инструмент проверки производительности. Затем он отправит отчет обратно кодирующему агенту, который сможет использовать информацию для создания отчета или внесения изменений в код для улучшения всего. Аналогично, он также может искать ошибки. Например, я могу попросить его проверить, есть ли какие-либо проблемы, и он запустится, откроет приложение, проверит ошибки или предупреждения в консоли и при необходимости исправит их. Это действительно полезно, безусловно. Это может пригодиться и для многих других вещей. Например, вы можете сохранить файл правил, который предписывает ему всегда использовать MCP после написания кода, особенно для задач фронтенда. Таким образом, он автоматически проверяет наличие каких-либо проблем и проверяет метрики производительности. Например, я могу просто попросить его сделать мне игру "Сапер". И с этими правилами он автоматически будет использовать MCP для тестирования, открытия страницы и проверки ее на наличие ошибок или улучшений. Это действительно здорово видеть в действии. По сути, вот как это работает, и это действительно мощный MCP, который легкий и очень удобный. Это, вероятно, единственный, кроме контекста 7 и байтового сканера, который я действительно использую. Я использую контекст 7 для получения документации, в то время как байтовый сканер работает как слой памяти. Он позволяет вашему ИИ-кодеру создавать воспоминания о важных вещах, которые ему могут понадобиться позже, и получать к ним доступ в любое время. Эти воспоминания также могут синхронизироваться между командами и обновляться, как Git, отслеживая изменения архитектуры с течением времени. Вы даже можете вручную настраивать эти воспоминания многими способами, что довольно круто. Его очень легко установить и настроить, и он значительно улучшает производительность в более длительных задачах. Синхронизация с коллегами также упрощается с ним. Это, пожалуй, все о нем. Это отличный инструмент, который работает без проблем, и поскольку он официально поддерживается Google, он, вероятно, будет продолжать улучшаться с добавлением новых функций со временем. Вы также можете использовать его с Gemini CLI, как они рекомендуют для еще более плавной работы, особенно если вы хотите настроить только агента. В целом, это довольно круто. В любом случае, поделитесь своим мнением ниже и подпишитесь на канал. Вы также можете пожертвовать через опцию Superthanks или присоединиться к каналу и получить некоторые бонусы. Увидимся в следующем видео. Пока. [Музыка]