Transcription
У всех и агентов для вайп-кодинга есть одна фундаментальная проблема. У них нет монитора, чтобы посмотреть, что они разрабатывают. Представь себе разработчика, который верстает сайт, и он даже не видит результат своей работы. Это ужасно.
Если ты вайп-кодишь какой-то сложный проект, всё это, в конце концов, может превратиться в бесконечный цикл тестирования, отправки багов в нейросеть, внесения исправлений и повторного ручного тестирования. Но совсем недавно Chrome выпустил инструмент, который решает эту проблему. Chrome Def Tools MCP. Он запускает твой сайт или веб-приложение в браузере Chrome и выполняет различные действия. А тестирует его как реальный пользователь. Он сам находит баги, проблемы с безопасностью, уязвимости, сам тестирует производительность и после этого возвращается обратно к нейросети и говорит, что нужно исправить. После внесения исправлений круг повторяется, и на выходе у тебя получается нормальный, незабагованный продукт, которым можно гордиться.
Я тестирую этот MCP уже неделю и смело могу сказать, что это must-have инструмент для любого разработчика. Давай покажу, как его установить и как с ним работать. Переходим по ссылке в описании на страницу этого MCP на GitHub. Вот. И давай опустимся к инструментам. И обрати внимание, сколько здесь всяких разных инструментов. Это и клики, и перетаскивание, и заполнение форм, и ховеры, и всё, что можно себе придумать: навигация по страницам, всякие эмуляции, эмуляция нетворка, эмуляция ресайза страницы, а, проверка производительности, проверка network, дебагинг, в общем, большое количество всяких инструментов. Твой агент во время разработки может запустить браузер, походить по твоему приложению как реальный пользователь, а, прокликать все элементы, заполнить все формы, посмотреть, какие запросы уходят во вкладке Network, проверить производительность и скорость загрузки.
Возможно, ты спросишь: "А чем это отличается от другого похожего инструмента PlayR MCP, на который я ранее на канале делал обзор и который вроде как многое что из этого умеет?" Или в чём отличие от новой функции браузер, встроенной прямо в курсор, которая появилась совсем недавно? А дело в том, что данный MCP разрабатывается непосредственно командой Chrome. Он может подтягивать твои куки, авторизационные сессии. И я заметил, что он работает немного лучше и более оптимально использует контекст по сравнению как минимум с PlayR, а это сейчас очень важно в условиях дефицита токенов. С браузером внутри курсора я пока ещё не сравнивал, но в MCP от Chrome, как можешь заметить, ну, гораздо больше всяких полезных инструментов.
Показывать я буду установку в курсоре, но здесь же есть инструкции для клода, для клайна, кодекса и других инструментов. Установка, а, в частности, для курсора максимально простая. Просто жмём на кнопку Add to курсоor. Нас перенаправляет на страницу. Жмём открыть приложение. У нас автоматически открывается курсор в разделе установки MCP-серверов. У нас здесь автоматически предзаполнено имя, команда и так далее. И всё, что нам с тобой остаётся - это нажать на кнопку install. И смотри, что у тебя может произойти. У меня в прошлый раз, когда я устанавливал его на Windows, у меня возникла следующая проблема. У меня не загружались инструменты. Если у тебя возникает похожая незадача, а переходи вот сюда в config и в поле Command, а вставляй перед npx cmd/c. Вот такую конструкцию.
Итак, давай посмотрим, как всё работает. Я подготовил небольшой проект, который нам позволяет писать письма в будущее. Пользователь может написать какой-то текст, прикрепить файлы и запланировать отправку имейла, заказного письма или эсэмэски а через год, через 5, через 15 лет. Это базовый функционал. Давайте теперь попробуем внедрить какую-нибудь новую фичу и протестировать с помощью Chrome Def Tools MCP. Я напишу свой промпт. А, добавь слева от кнопки preview кнопку Inspire.me. На фронтде составь список из двадцати идей, о чём написать в письме из разряда Write about your hopes and dreams for coming year. То есть напиши о своих надеждах и мечтах на предстоящий год. А я, как пользователь, хочу иметь возможность нажать на кнопку и получить случайную идею для письма, чтобы побороть проблему чистого листа.
Я сейчас использую для разработки GitHub Spec Kit, который автоматически составляет план реализации фичи, делит её на таски, задаёт тебе дополнительные вопросы, если ты не учёл какие-то важные моменты, и делает ещё, на самом деле, много всего полезного. У себя в Telegram-канале по ссылке в описании я завтра выпущу пост про этот инструмент и про его фундаментальные проблемы. Подпишись, чтобы не пропустить. Также в описании будет ссылка на чат вайп-кодеров. Там уже более 400 участников. Общение идёт очень активно. Есть комнаты по разным инструментам, таким как курсор, код, кодекс и так далее. Также сегодня там появится ветка для поиска исполнителей. Так что если вдруг тебе нужен разработчик, пиши туда.
Итак, у меня теперь есть полный план, как реализовать эту фичу. И я прошу теперь нейросеть её разработать. И после нейросети я прошу протестировать работу с помощью Chrome Death Tools MCP. Так, нейронка нашу кнопку разработала. За кадром она уже всё протестировала. Давай я закрою сейчас браузер, а, и попрошу открыть страницу local host, страницу create с помощью Chrome MCP и протестировать функционал кнопки. Так вот, обрати внимание, что сначала она сделала снимок страницы, чтобы посмотреть, как выглядит наша форма. Затем нажала на кнопку Inspire me. Так. И у нас в вот и после нажатия на кнопку у нас ээ появился текст в текстовом поле. Я вижу, что он нажал на кнопку ещё раз, чтобы убедиться, что она генерирует разные промпты. Отлично. Наша фича успешно разработана, причём с первого раза. А если бы мы с тобой сейчас поймали какой-то баг, то у нас запустился бы циклический процесс тестирования и всяких исправлений, который завершился бы только тогда, когда все проблемы будут решены, либо тогда, когда модель поймёт, что решить проблемы не в её силах.
Отвечу сразу на твой вопрос. Может ли случиться такое, что модель застрянет в бесконечном цикле и будет вносить одни и те же исправления, делать одни и те же баги, пока не съест все твои драгоценные токены? Теоретически, наверное, может, но фактически лично я ни разу с этой проблемой не сталкивался. Я поресёрчил интернет, изучил все ISUS в GitHub репозитории этого MCP и не нашёл ни одного упоминания этой проблемы. Поскольку у нас всё с тобой запустилось с первого раза, давай я что-нибудь специально сломаю, и мы посмотрим, как модель будет с помощью Chrome Death Tools MCP а чинить появившийся баг. И прямо сейчас я удаляю, а, все варианты, э, все идеи, которые у нас появляются, а, при нажатии на кнопку. И одну единственную идею я напишу какую-нибудь белиберду. Вот что-нибудь вот такое. Давай сохраню и попрошу протестировать. А, ещё раз.
Так, обрати внимание, что, э, нейросеть начала тестировать кнопку, видит, что кнопка работает. В текстовое поле добавился наш текст, который мы с тобой случайно написали. Так, заметил какой-то баг. Заметил, что текст не изменился при повторном нажатии. Так вот, нейросеть ээ пишет, что что-то исправила, нажимает на кнопку Inspire. Уже второй раз у неё появляется новый текст. Ну вот, пожалуйста, исправлено у нас теперь два бага. И второй баг - это как раз-таки тот баг, о котором я вообще не догадывался и который я бы, возможно, пропустил.
Давай проверим ещё кое-что. Наш бэкэнд находится на порту 3001, а фронт-энд теперь с моей помощью обращается к порту 3002. Вот я тут изменил, поломал. И теперь давай напишу в нейросеть, чтобы она перешла на страницу авторизации, ввела логин и пароль, протестировала с последующим переходом на страницу написания письма и попробовала написать вот это самое письмо с помощью Chrome MCP и починила все найденные баги. Вот такой вот кейс я хочу протестировать. Разумеется, в течение работы, в течение тестирования нейросеть должна увидеть проблему.
Так, нейросеть видит, что у нас произошла ошибка при авторизации. Ошибка подключения к апе. Давай посмотрим, сможет ли она справиться с этой проблемой. Проблема в том, что бэкэнд не запущен на порту 3002, к которому обращается фронт. Да, и она нашла проблему очень быстренько и исправила порт. Давай посмотрим теперь, сможет ли она всё протестировать до конца. Так, и нейросеть пошла у нас заполнять поля. Почта, тема письма, пытается выбрать дату доставки. проверила систему вдохновения, написала какой-то свой текст. Так, нажал на кнопку отправить, и у нас возникла какая-то ошибка. Давай посмотрим, что там. Вот, как можешь заметить, Chrome MCP пошёл изучать консоль браузера, чтобы понимать, а в чём проблема. Ну вот, как видишь, он перезагрузил приложение, а пытается снова авторизоваться, что-то у него не получается. И вот этот бесконечный цикл, вот попытки исправить проблему будет продолжаться до тех пор, пока она не будет исправлена.
Отлично. Нейросеть у нас перезагрузила приложение, авторизовалась ещё раз и попробовала снова а отправить письмо. И во второй раз а письмо уже отправилось. Хотя оно отправилось и в первый раз, но по какой-то причине мы с бэкэнда получили ошибку 401.
Что ещё из интересного может данный MCP? К примеру, когда ты разрабатываешь какой-то сайт или сервис, ты наверняка хочешь, чтобы он работал быстро и пользователям не приходилось ждать открытия страницы десяток секунд. Для этого ты можешь попросить Chrome MCP запустить проверку производительности и оптимизировать твой сайт или веб-приложение. Итак, я написал Prompt. У меня открыта страница Dashшбор проверь производительность с помощью Chrome MCP. Так, анализ завершён. Провёл полный анализ производительности. Проблема. LCP превышает рекомендуемые 2,5 секунды. Неросеть также увидела, что у нас дважды выполняются запросы Letters Stats и Letters сри параметром статус. Я, кстати, этого не заметил, но это действительно так. Так быть не должно, это проблема. И вот нейронка нам дала рекомендации по оптимизации нашего приложения. Можно попросить её составить план и по этому плану внести все исправления и затем а снова проверить с помощью Chrome MCP.
И последняя и очень важная фишка. который я хотел тебе показать- это поиск уязвимостей с помощью Chrome DE Tools MCP. Если ты разрабатываешь сложное веб-приложение, но при этом ты, скажем так, импровизируешь и делаешь это не по правильным процессам, не указываешь нейронке, какие конкретно дыры в безопасности она должна закрыть, практически со стопроцентной вероятностью в твоём проекте будут уязвимости. Даже если ты делаешь всё правильно, ты не застрахован от ошибок нейросети. И поэтому каждый вайп-кодер должен уметь искать эти уязвимости. Я вручную добавил пару ошибок безопасности в код и сейчас покажу упрощённый вариант их обнаружения с помощью Chrome Def Tools MCP. Но максимально подробно про защиту твоего сайта, поиск исправления уязвимостей и в целом про правильный процесс разработки с помощью нейросетей, как обычного сайта, так и полноценного продукта, который можно продавать, я рассказываю на своём самом полном курсе по вайп-кодингу. В нём мы с тобой шаг за шагом разработаем аналог веб-приложения, собравшего в этом году более 35 млн долларов инвестиций. Трекер питания с интеграцией нейросетей для распознавания калорий блюд по фото. Курс подойдёт даже новичку, потому что мы идём от простого к сложному. Мы сначала изучаем базу вайп-кодинга, верстаем простой лендинг, а затем я даю и прямо разжёвываю всю необходимую теорию по бэкэнду, проектированию апи и фронт. Курс называется самым полным, потому что он содержит буквально всё, что тебе может понадобиться, начиная с того, как генерировать красивый дизайн, заканчивая безопасностью, деплоем приложения на сервер и так далее. За небольшую цену ты получишь огромное количество полезного материала. Убедись сам, переходи на лендинг по ссылке в описании. Там висит программа, отзывы учеников из приватного чата студентов. Я знаю, что ты любишь выгодные предложения, поэтому в качестве благодарности за то, что ты досмотрел до этого момента, я сгенерировал промокод Chrome. Переходи по ссылке в описании, вводи его при оплате и получай скидку в целых 40%. Это почти половина.
Итак, вернёмся к безопасности. А давай попросим Нейросеть проверить наш сайт на различные уязвимости и составить план их исправления. Вот, пожалуйста. Эта нейросеть обнаружила несколько проблем, критических проблем с безопасностью, с связанные с токенами, засветившимися, да, в Local storage токенами, да, передача токенов в открытом виде в запросах, логирование в консоли. В общем, большое количество проблем с безопасностью. Часть из них сделал я специально для этого видеоролика, а часть из них действительно реальные проблемы, о которых я не знал. Составил план исправления и вот готов начать исправлять эти проблемы прямо сейчас.
Что ж, у меня на этом всё. Напиши в комментариях, будешь ли пользоваться новой Chrome Death Tools MCP. А также не забывай подписываться на канал и ставить лайки на это видео. Своим небольшим действием ты очень сильно поможешь моему каналу и внесёшь свой вклад в развитие сообщества вайпкодеров в России. Спасибо за просмотр.