# bdg

Скилл даёт агенту CLI для настоящего Chrome: навигация, клики, формы, разбор сетевых запросов и ошибок консоли. Пригодится, когда надо проверить изменение интерфейса в запущенном приложении.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · ★ 181
- Автор: szymdzum
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/szymdzum/browser-debugger-cli/tree/HEAD/.claude/skills/bdg/SKILL.md
- Обновлён: 2026-10-23
- HTML: https://affpapa.org/nevibecode/skills/bdg

## Что делает

Скилл учит агента работать с `bdg` — CLI поверх Chrome DevTools Protocol. Сессия поднимается командой `bdg <url>`, дальше идут `dom query`, `dom inspect`, `dom fill`, `dom click`, `console`, `network list`, `eval`. Скриншоты нужны только для визуального доказательства: размеры, шрифты, цвета и контраст `dom inspect` отдаёт текстом. Цикл простой — запустить, посмотреть, сделать действие, прочитать, что изменилось, проверить ошибки.

Сам бинарник ставится отдельно: `npm i -g browser-debugger-cli`, проверить можно через `bdg --version`. Сессия живёт до `bdg stop`, таймаута нет, поэтому с HMR-сервером её удобно поднять один раз и переиспользовать. На macOS Chrome открывается окном, для запуска без присмотра нужен `--headless`. Сессий может быть несколько: у каждой своё окно Chrome, имя задаётся через `--session`.

Есть режим `bdg attach` — подключение к уже открытой вкладке. Тогда bdg читает `DevToolsActivePort` из профиля Chrome, пользователь включает удалённую отладку на `chrome://inspect/#remote-debugging` и подтверждает запрос в браузере. Вкладка при этом не перезагружается, её состояние сохраняется, но более ранние сетевые запросы недоступны. Логин между сессиями переносится файлом состояния: `bdg state save /tmp/login.json`, затем запуск с `--state`. Файл содержит секреты, поэтому его место — не в репозитории.

## Требования
- Работает с: Chrome

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add szymdzum/browser-debugger-cli --skill bdg -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/bdg/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/bdg/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add szymdzum/browser-debugger-cli --skill bdg -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/bdg/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add szymdzum/browser-debugger-cli --skill bdg -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/bdg/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install szymdzum/browser-debugger-cli bdg
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/bdg/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add szymdzum/browser-debugger-cli --skill bdg -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/szymdzum/browser-debugger-cli --path .claude/skills/bdg
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/bdg/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add szymdzum/browser-debugger-cli --skill bdg -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/szymdzum/browser-debugger-cli/tree/HEAD/.claude/skills/bdg/SKILL.md

## Когда брать
- проверить, что клик по кнопке действительно привёл к навигации
- найти ошибки в консоли после отправки формы
- посмотреть размеры и шрифты элемента без скриншота
- отловить 4xx и 5xx на текущей странице
- подключиться к уже открытой вкладке и не потерять её состояние

## Примеры запросов агенту
- Открой `https://example.com` в headless-режиме и покажи, что там на странице
- Заполни поле `input[name='email']` значением `a@b.co` и нажми `button[type='submit']`, потом покажи, что изменилось
- Проверь ошибки консоли на текущей странице и список запросов с кодами 4xx и 5xx

## Похожие
- [open-browser-use](https://affpapa.org/nevibecode/skills/open-browser-use.md) — скилл · 500 установок
- [web-browser](https://affpapa.org/nevibecode/skills/web-browser.md) — скилл · 677 установок
- [agent-browser](https://affpapa.org/nevibecode/skills/vercel-labs-agent-browser.md) — скилл · 1200000 установок
- [chrome-cdp](https://affpapa.org/nevibecode/skills/chrome-cdp.md) — скилл · 2100 установок
- [chrome-cdp-live-browser](https://affpapa.org/nevibecode/skills/chrome-cdp-live-browser.md) — скилл · 1500 установок
- [d3k](https://affpapa.org/nevibecode/skills/d3k.md) — скилл · 859 установок

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md