Каждый разработчик хотя бы раз спрашивал у ChatGPT или Claude: «Почему мой код не работает?» — и вставлял в чат фрагмент кода. Модель бодро отвечала, предлагала исправления, но после их применения баг либо оставался, либо трансформировался в новый. Причина в том, что без контекста — стектрейса, логов, шагов воспроизведения и минимального примера — LLM не отлаживает, а гадает. Отладка — это цикл «воспроизвёл → сузил → проверил гипотезу → подтвердил фикс», и каждый шаг можно закрыть конкретным промтом.
В этой подборке — 10 промтов, которые превращают LLM в детектива. Они не заменяют DevTools, а работают в паре с ним: вы даёте модели точные данные из браузера, а она помогает их интерпретировать, строить гипотезы и проверять. Каждый промт содержит задачу, формулировку и пример результата. Все примеры кода — рабочие, на JavaScript, с реальными API браузера.
Базовые промты: сбор контекста и первичный анализ
Промт 1. Чтение стектрейса и выделение ключевых кадров
Задача: быстро понять, где именно произошла ошибка, и какие функции в стеке заслуживают внимания.
Промт:
Ты — опытный frontend-разработчик. Ниже — стектрейс из браузера Chrome. Разбери его по шагам:
1. Определи тип ошибки и её непосредственную причину.
2. Выдели 3–5 кадров, наиболее релевантных для отладки (исключи шум из node_modules и внутренних вызовов браузера).
3. Для каждого релевантного кадра объясни, что делает функция и как она могла привести к ошибке.
4. Предложи 2–3 гипотезы о причине и способа их проверки в DevTools (точки останова, watch-выражения).
Стектрейс:
TypeError: Cannot read properties of undefined (reading 'map')
at ProductList.render (ProductList.jsx:42:15)
at renderWithHooks (react-dom.development.js:14985:18)
at mountIndeterminateComponent (react-dom.development.js:17811:13)
at beginWork (react-dom.development.js:19049:16)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945:14)
Пример результата: модель определяет, что ошибка в ProductList.render на строке 42 — попытка вызвать .map у undefined. Исключает кадры из react-dom.development.js как внутренние. Предполагает, что products не передан в пропсы или пришёл undefined из-за асинхронной загрузки. Предлагает поставить точку останова на строке 42 и добавить watch-выражение products.
Промт 2. Восстановление шагов воспроизведения бага
Задача: сформулировать чёткую последовательность действий, которая стабильно приводит к ошибке.
Промт:
Ты — тестировщик. У меня есть баг: при клике на кнопку «Добавить в корзину» на странице товара иногда появляется ошибка «Cannot read property 'id' of undefined». Ошибка плавающая, воспроизводится не всегда.
Помоги составить минимальный сценарий воспроизведения:
1. Какие действия пользователя или состояния приложения могут влиять на появление ошибки?
2. Какие данные нужно логировать, чтобы поймать момент возникновения?
3. Предложи код для логирования в браузере (console.log или debugger), который поможет собрать контекст.
Опиши шаги так, чтобы их можно было выполнить в DevTools.
Пример результата: модель предлагает проверить, не является ли ошибка следствием гонки между запросом за деталями товара и кликом. Рекомендует логировать productId, состояние корзины и время между событиями. Даёт сниппет:
function addToCart(productId) {
console.log('addToCart called', { productId, time: Date.now() });
if (!productId) {
console.trace('productId is undefined');
}
// ...
}
Промт 3. Анализ сетевых запросов из вкладки Network
Задача: интерпретировать данные из вкладки Network, чтобы найти причину ошибки, связанной с API.
Промт:
Ты — эксперт по отладке сетевых запросов. Вот выгрузка из Chrome DevTools → Network для запроса, который завершился ошибкой 500. Разбери:
1. Какие заголовки запроса и ответа указывают на проблему?
2. Есть ли в ответе тело с сообщением об ошибке?
3. Какие ещё запросы могли повлиять (например, предварительный OPTIONS)?
4. Предложи, как воспроизвести запрос через curl или fetch и как проверить гипотезу в консоли.
Данные:
URL: https://api.example.com/products
Method: POST
Status: 500 Internal Server Error
Request Headers: Content-Type: application/json, Authorization: Bearer ...
Response Headers: Content-Type: application/json
Response Body: {"error":"Missing required field: category"}
Пример результата: модель замечает, что сервер вернул 500 вместо 400, но в теле указано отсутствие поля category. Предлагает проверить, отправляется ли это поле из формы, и даёт команду для curl:
curl -X POST https://api.example.com/products \
-H "Content-Type: application/json" \
-H "Authorization: Bearer <token>" \
-d '{"name":"Test","price":100}'
Продвинутые промты: гипотезы и проверка
Промт 4. Бисекция по коммитам для поиска регрессии
Задача: найти коммит, который внёс баг, с помощью бинарного поиска (git bisect) и подсказок LLM.
Промт:
Ты — senior-разработчик, помогаешь найти регрессию. Есть баг: после последнего релиза перестала работать сортировка товаров по цене. Известно, что вчера всё работало. У меня есть список коммитов за последние 2 дня (30 штук).
Предложи стратегию бисекции:
1. Как выбрать первый коммит для проверки?
2. Какие коммиты можно сразу исключить по описанию (например, не связанные с сортировкой)?
3. Напиши команды git bisect для автоматизации.
4. Как с помощью LLM анализировать диффы подозрительных коммитов?
Список коммитов: ...
Пример результата: модель предлагает начать с середины списка, исключить коммиты с сообщениями «fix typo», «update README» и оставить только те, что меняют логику сортировки или API. Даёт последовательность:
git bisect start
git bisect bad HEAD
git bisect good <commit-hash>
# далее git bisect good/bad по результатам проверки
Промт 5. Чтение точек останова и watch-выражений
Задача: научиться использовать точки останова в DevTools для проверки гипотез, предложенных LLM.
Промт:
Ты — наставник по DevTools. Я поставил точку останова на строке 42 в файле ProductList.jsx, но не понимаю, как интерпретировать значения в панели Scope. Вот скриншот (описание): в локальной области видимости есть переменные: products = undefined, isLoading = false, error = null.
Объясни:
1. Что означает каждое значение и как это связано с ошибкой?
2. Какие watch-выражения добавить, чтобы отследить, когда products станет undefined?
3. Как использовать условную точку останова, чтобы остановиться только при products === undefined?
4. Предложи шаги для дальнейшей отладки.
Пример результата: модель объясняет, что products = undefined и isLoading = false указывают на то, что загрузка завершилась, но данные не пришли. Предлагает добавить watch-выражение products и условную точку останова с выражением products === undefined. Рекомендует проверить, не перезаписывается ли products где-то ещё.
Промт 6. Проверка гипотезы о race condition
Задача: подтвердить или опровергнуть гипотезу о состоянии гонки (race condition) с помощью логов и точек останова.
Промт:
Ты — эксперт по асинхронному JavaScript. Подозреваю race condition: при быстром переключении между вкладками «Товары» и «Корзина» иногда отображаются товары не из той категории. Вот код загрузки данных:
async function loadProducts(category) {
setLoading(true);
const res = await fetch(`/api/products?category=${category}`);
const data = await res.json();
setProducts(data);
setLoading(false);
}
Предложи:
1. Как с помощью console.log и временных меток подтвердить race condition?
2. Какие точки останова и watch-выражения помогут увидеть порядок завершения запросов?
3. Как исправить код, чтобы избежать гонки (например, AbortController или проверка актуальности)?
4. Напиши исправленный код.
Пример результата: модель предлагает логировать category и Date.now() до и после await, чтобы увидеть, какой запрос завершился последним. Даёт исправление с AbortController:
let currentController;
async function loadProducts(category) {
if (currentController) currentController.abort();
currentController = new AbortController();
const { signal } = currentController;
setLoading(true);
try {
const res = await fetch(`/api/products?category=${category}`, { signal });
const data = await res.json();
setProducts(data);
} catch (e) {
if (e.name === 'AbortError') return;
throw e;
} finally {
setLoading(false);
}
}
Экспертные промты: сложные случаи и автоматизация
Промт 7. Анализ утечек памяти через DevTools Memory
Задача: найти причину утечки памяти, используя снимки кучи (heap snapshots) и подсказки LLM.
Промт:
Ты — эксперт по производительности frontend. Приложение на React стало потреблять много памяти после длительной работы. Я сделал два снимка кучи (heap snapshot) до и после 10 минут работы. Вот список объектов, которые выросли в количестве (топ-5):
1. Detached HTMLDivElement: было 100, стало 5000
2. Closure: было 2000, стало 15000
3. Array: было 3000, стало 10000
Объясни:
1. Что означают detached DOM-элементы и почему они появляются?
2. Как связаны Closure и Array с возможной утечкой?
3. Какие шаги предпринять, чтобы найти источник утечки в коде?
4. Предложи промт для анализа конкретного компонента.
Пример результата: модель объясняет, что detached DOM-элементы — это узлы, удалённые из документа, но на которые остались ссылки в JavaScript. Предлагает искать компоненты, которые не отписываются от событий или не очищают таймеры. Даёт пример промта для анализа компонента:
Проанализируй код компонента на предмет утечек: есть ли подписки на события без отписки, таймеры без очистки, замыкания, сохраняющие большие объекты?
Промт 8. Разбор ошибок в асинхронных цепочках (async/await)
Задача: найти причину ошибки в цепочке промисов, где стектрейс неинформативен.
Промт:
Ты — специалист по асинхронному JS. Ошибка «Unhandled promise rejection: undefined is not a function» возникает где-то в цепочке, но стектрейс обрывается. Вот код:
async function init() {
const user = await fetchUser();
const settings = await fetchSettings(user.id);
const data = await fetchData(settings.theme);
render(data);
}
Предложи:
1. Как с помощью try/catch и логирования локализовать шаг, на котором происходит ошибка?
2. Какие инструменты браузера помогут увидеть полный стек асинхронных вызовов (async stack traces)?
3. Как переписать код для лучшей отладки (например, добавить метки)?
4. Напиши исправленный код с обработкой ошибок.
Пример результата: модель предлагает обернуть каждый шаг в try/catch с логированием имени шага. Упоминает, что в Chrome DevTools можно включить «Async stack traces» в настройках. Даёт код:
async function init() {
try {
const user = await fetchUser();
console.log('user fetched', user);
const settings = await fetchSettings(user.id);
console.log('settings fetched', settings);
const data = await fetchData(settings.theme);
console.log('data fetched', data);
render(data);
} catch (e) {
console.error('Init failed at step', e);
throw e;
}
}
Промт 9. Использование conditional breakpoints и logpoints
Задача: освоить продвинутые точки останова для отладки циклов и часто вызываемых функций.
Промт:
Ты — эксперт по DevTools. У меня есть функция, которая вызывается сотни раз в цикле, и я хочу остановиться только при определённом условии. Вот код:
function processItem(item) {
// ... много кода
if (item.price < 0) {
// хочу остановиться здесь
}
}
Объясни:
1. Как поставить условную точку останова, чтобы остановиться только при item.price < 0?
2. Как использовать logpoints, чтобы логировать значения без остановки?
3. Какие ещё типы точек останова (DOM, event listener) полезны в данном случае?
4. Предложи промт для автоматической генерации условий для точек останова.
Пример результата: модель объясняет, что в DevTools нужно кликнуть правой кнопкой на номере строки и выбрать «Add conditional breakpoint», ввести item.price < 0. Для logpoints — выбрать «Add logpoint» и ввести item.price. Предлагает промт для генерации условий: «Сгенерируй условие для точки останова, которое остановит выполнение только когда item.price < 0 и item.id === 123».
Промт 10. Автоматизация сбора контекста для LLM
Задача: создать сниппет, который автоматически собирает данные об ошибке (стектрейс, состояние, логи) и формирует готовый промт для LLM.
Промт:
Ты — инженер по инструментам. Напиши JavaScript-функцию, которая перехватывает ошибки через window.onerror и unhandledrejection, собирает:
- сообщение и стектрейс,
- текущий URL и user-agent,
- значения из localStorage (первые 5 ключей),
- последние 10 записей console.log (если возможно).
Функция должна формировать строку — готовый промт для LLM, который можно скопировать и вставить в чат. Предложи, как хранить эти данные временно (например, в sessionStorage) и как потом извлечь.
Пример результата: модель предлагает код:
const logs = [];
const originalLog = console.log;
console.log = (...args) => {
logs.push(args.map(a => JSON.stringify(a)).join(' '));
if (logs.length > 10) logs.shift();
originalLog(...args);
};
window.addEventListener('error', (event) => {
const context = {
message: event.message,
stack: event.error?.stack,
url: location.href,
userAgent: navigator.userAgent,
localStorageKeys: Object.keys(localStorage).slice(0, 5),
recentLogs: logs,
};
sessionStorage.setItem('debugContext', JSON.stringify(context));
originalLog('Debug context saved. Use copy(sessionStorage.getItem(\'debugContext\')) to get it.');
});
После возникновения ошибки в консоли можно выполнить copy(sessionStorage.getItem('debugContext')) и вставить в промт.
Как использовать эти промты в реальной работе
Главное правило: не просите LLM «починить код», пока не дали ей контекст. Начните с промта 1 (чтение стектрейса), затем переходите к воспроизведению (промт 2) и сбору данных из сети (промт 3). Для сложных багов используйте бисекцию (промт 4) и анализ точек останова (промт 5). Если подозреваете асинхронные проблемы — промты 6 и 8. Для утечек памяти — промт 7. Продвинутые точки останова (промт 9) и автоматизация сбора контекста (промт 10) сэкономят время в повторяющихся сценариях.
Помните: LLM — не оракул, а инструмент для структурирования ваших наблюдений. Чем точнее данные вы дадите, тем полезнее будет ответ. И всегда проверяйте предложенные гипотезы в браузере — только там можно увидеть реальное поведение.
Если вы хотите глубже разобраться в отладке и других инженерных практиках, обратите внимание на наш курс по Golang с нуля — там мы разбираем конкурентность и типичные ошибки, или на материал о юнит-тестах на Python с LLM, где показаны похожие подходы к генерации тестов.