Как остановить рендер?

Как отлаживаешь код?

DevTools - основной инструмент

Breakpoints:

1. F12 -> Sources
2. Кликаю на номер строки -> breakpoint
3. При срабатывании код останавливается
4. Вижу переменные, стек вызовов
5. Step over (F10), step into (F11), continue (F8)

Conditional breakpoints:

• Правый клик на номер строки
• "Add conditional breakpoint"
• Вводу условие: count > 5
• Breakpoint срабатывает только если условие true

Watch expressions:

• Watch вкладка
• Добавляю выражения: user.name, arr.length
• Вижу значения в реальном времени

Console логирование

// === Обычное логирование === 
console.log('value:', value);        // обычный лог
console.warn('warning:', data);      // оранжевый
console.error('error:', error);      // красный

// === Таблица === 
const users = [{name: 'John'}, {name: 'Jane'}];
console.table(users);                // красивая таблица

// === Группировка === 
console.group('User');
console.log('name:', user.name);
console.log('email:', user.email);
console.groupEnd();

// === Тайминг === 
console.time('fetch');
const data = await fetchData();
console.timeEnd('fetch');            // выведет время в ms

React DevTools

1. Установить расширение Chrome/Firefox
2. F12 -> Components вкладка
3. Могу видеть component tree
4. Инспектировать props, state, hooks
5. Изменять props в реальном времени для тестирования

Network девбаг

// === Медленная сеть для тестирования === 
// F12 -> Network
// Throttling dropdown -> 'Slow 3G'
// Видю как приложение работает на медленном интернете

// === Кэширование === 
// Disable cache checkbox
// Обходит кэш браузера для тестирования

VS Code Debugging

// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src"
    }
  ]
}

Нажимаю F5 -> отладка в VS Code вместо браузера

Отладка асинхронного кода

// === Логирование с async/await ===
async function fetchUser(id) {
  console.log('Fetching user:', id);
  
  try {
    const response = await fetch(`/api/users/${id}`);
    console.log('Response status:', response.status);
    
    const data = await response.json();
    console.log('User data:', data);
    
    return data;
  } catch (error) {
    console.error('Fetch error:', error);
    throw error;
  }
}