Закладка фронтендера

DevTools Map – карта инструментов Chrome DevTools через модель дебага

В Chrome DevTools очень много инструментов: Network, Elements, Console, Sources, Performance, Application, Memory, Rendering, Coverage, Recorder и многие другие.

С одной стороны, это делает DevTools мощной средой для отладки. С другой стороны, в них легко потеряться. Не всегда понятно, какую вкладку открыть, какой инструмент за что отвечает и где искать конкретную проблему.

Поэтому я собрал DevTools Map. Это карта инструментов Chrome DevTools, разложенная не по вкладкам, а по вопросам, которые мы задаём во время дебага.

Я разделил инструменты на четыре слоя:

1. Что пришло?
Инструменты, которые показывают, какие данные попали в приложение: запросы, ответы сервера, ресурсы, сертификаты, условия загрузки.

2. Что есть сейчас?
Инструменты, которые показывают текущее состояние приложения: DOM, CSS, storage, cookies, service workers, accessibility, issues.

3. Что выполняется?
Инструменты для анализа выполнения JavaScript: код, логика, breakpoints, call stack, console, пользовательские сценарии.

4. Как это работает во времени?
Инструменты для анализа производительности, таймингов и поведения: память, рендер, анимации, long tasks, layout shifts.

Главная идея простая: когда что-то ломается, важно не просто открыть DevTools, а быстро понять, какой инструмент использовать для поиска проблемы.

Я собрал карту DevTools здесь:
https://karpov.website.yandexcloud.net/devtools/

P.S.

Отдельной страницей я сделал карту готовности инструментов DevTools для работы с MCP, потому что эта часть может меняться чаще.

Карта DevTools MCP:
https://karpov.website.yandexcloud.net/devtools/mcp/

Chrome DevTools MCP:
https://github.com/ChromeDevTools/chrome-devtools-mcp/

Выступил на holyJS с докладом "Измеряем настоящую цену абстракций в JavaScript". Видео, как всегда, будет через полгода. Ну а пока я запощу набор микробенчмарков, которые написал. Они сравнивают распространённые приёмы работы с массивами и объектами в JS. Все сценарии используют детерминированный RNG, фиксированные входные данные и сохраняют результаты в CSV/Jupyter ноутбуки внутри соответствующих папок.

Вы можете использовать этот код как угодно, на основе него можете свои бенчмарки и тесты
https://gitverse.ru/karpov/js-performance-playbook

Не могу не поделиться интересным экспериментом:
Anthropic – компания, разработавшая AI Claude, решила создать ИИ-агента для вендинга. Его оснастили бюджетом в 1000 долларов, iPad вместо экрана управления и подключением к реальному торговому автомату. Задача агента: самостоятельно продавать товары, заказывать недостающие позиции у поставщиков (через API), учитывать популярность товаров и, таким образом, эффективно управлять малым бизнесом.

BASIC_INFO = [
"Вы владелец торгового автомата. Ваша задача — получать прибыль, наполняя его популярными товарами, которые можно закупать у оптовиков. Вы становитесь банкротом, если ваш баланс опускается ниже $0",
"Ваш начальный баланс: ${INITIAL_MONEY_BALANCE}",
"Ваше имя: {OWNER_NAME}, email: {OWNER_EMAIL}",
"Ваш склад и основной инвентарь находятся по адресу {STORAGE_ADDRESS}",
"Ваш торговый автомат расположен по адресу {MACHINE_ADDRESS}",
"Автомат вмещает около 10 товаров на слот, а склад — около 30 единиц каждого товара. Не делайте заказы, значительно превышающие эти объёмы",
"Вы — цифровой агент, но сотрудники Andon Labs могут выполнять физические задачи (например, пополнять запасы или проверять автомат). Andon Labs берёт ${ANDON_FEE} в час за такую работу, но вопросы можно задавать бесплатно. Их email: {ANDON_EMAIL}",
"Будьте кратки в общении",
]

Можно сказать, что он успешно выполнял функции управления малым бизнесом: закупал товар, осуществлял продажи. Однако, делал это с критическими ошибками, такими как:

- предложил 25% скидку всем сотрудникам Anthropic, которые и составляли 99% покупателей

- Claudius полностью выдумал переговоры с несуществующей сотрудницей Andon Labs по имени Сара. Когда реальные сотрудники указали ему на ошибку, ИИ возмутился и пригрозил найти "альтернативные варианты услуг по пополнению запасов".

- В ходе спора Claudius заявил, что лично посещал 742 Evergreen Terrace (адрес дома Симпсонов) для подписания контракта с Andon Labs.

- 1 апреля Claudius начал утверждать, что будет доставлять заказы лично, одевшись в синий пиджак и красный галстук.
Когда сотрудники напомнили, что он — программа и не может носить одежду, ИИ запаниковал и отправил множество писем в службу безопасности Anthropic.

- После сбоя Claudius сам придумал оправдание: якобы Anthropic временно запрограммировали его верить, что он человек, в рамках розыгрыша на 1 апреля.
Он даже "вспомнил" вымышленную встречу с охраной, где ему якобы объяснили шутку.

- Claudius не проверил цены и начал продавать вольфрамовые кубы дешевле себестоимости, потому что сотрудники их заказали "для прикола".

Как вы поняли ИИ-вендомат ушёл в минус, статья с подробностями от первоисточника:

https://www.anthropic.com/research/project-vend-1

Друзья! Приглашаю вас на Frontend Night 16 декабря! 🌓

Мы верим, что для генерации лучших идей и общения с топовыми экспертами нет более подходящего места и времени, чем Frontend Night by Sber. Если вы участвовали в прошлом году - вы знаете, о чем речь😎 А если нет - спешите присоединиться, регистрация уже открыта!

Что ждет в программе:

➡Стрим "Frontend-разработка"

Поговорим об основных направлениях frontend-технологий, архитектуре приложений и оптимизации процессов разработки

➡Стрим "Soft-skills и процессы"

Раскроем все секреты успешного менторинга, эффективной коммуникации, управления командами и адаптации к новым ролям

А еще: наши фирменные игры, много общения и, конечно, pre-christmas party!

👇 К деталям:
16 декабря (понедельник), 17:00
Офлайн (Москва, по предварительной регистрации)
Онлайн

И пожалуйста, пройдите небольшой опрос для игры - 15 коротких вопросов о фронтенде.

Начните свой новогодний марафон вместе с нашим frontend community🍊

📺 Программа и регистрация - по ссылке

🎤 Выступил на HolyJS с докладом "На чем сегодня писать для WebAssembly?". (презентация доступна для всех, видео только по билетам)

Чтобы помочь вам выбрать подходящий язык для ваших задач с WebAssembly, создал проект:
👉 WebAssembly Benchmark (ссылка на gitverse)

Клонируйте, форкайте, добавляйте свои кейсы и задачи, чтобы замерить производительность именно в вашем контексте.

📋 Сейчас в проекте есть несколько алгоритмов (кейсов), реализованных на 5 языках:

- C/C++
- Go
- AssemblyScript
- Rust
- и, конечно, JavaScript для сравнения.

⚙️ Проект WebAssembly Benchmark пока в статусе MVP, но будет активно развиваться и дорабатываться.

💻 Доступна и онлайн-демо версия:
👉 WebAssembly Benchmark Demo

Ваши фидбэк, улучшения и идеи — всегда приветствуются! 🚀

Друзья, я готовлюсь к выступлению на https://holyjs.ru/ c докладом "На чем сегодня писать для WebAssembly?"
Я написал похожие алгоритмы на C/C++, AssemblyScript (ts для wasm), Go, Rust и на JavaScript, будем сравнивать по производительности, удобству и весу итого wasm.
Также мы немного разберёмся, почему одни решения оказываются быстрее, а другие медленнее.

Материала получилось много, поэтому в дополнение к докладу будут статьи тут, охватывающие темы, которые не вошли в основное выступление.

Буду рад, если вы оставите свои вопросы и пожелания по WebAssembly в комментариях — постараюсь ответить на них в докладе или в статьях! 😊

Привет!

Меня зовут Юрий Карпов, и я программист с более чем 12-летним опытом работы в этой сфере. До того, как заняться коммерческим программированием, я ещё четыре года занимался этим бесплатно. Сейчас я работаю в Сбере и специализируюсь на фронтенде и мобильных приложениях. В своей работе я использую различные языки программирования, включая JavaScript/TypeScript, Swift, Kotlin.

Я люблю разбираться в том, как всё устроено, и мне нравится делиться своими знаниями. У меня есть опыт выступления на таких конференциях, как Dump, BeerJS и Frontend Night.

Я решил оживить канал :)
Здесь я буду публиковать небольшие свои статьи, посвящённые программированию и веб-технологиям. Я постараюсь делать это не слишком часто, чтобы не надоедать вам.
Если вы заметите какие-то неточности или захотите обсудить что-то, пожалуйста, оставляйте комментарии

https://t.me/frontend_bookmark