@scrumno/d-insp-react

Мой теперь повседневный в работе с реактом помощник. Визуализация сетевых запросов, логгирование данных, отслеживание количества рендров компонента без использования console.log.

Features

• 📡 Network: Отслеживает все fetch и XMLHttpRequest (заголовки, body, статусы, тайминги).
• ⚛️ Renders: Счетчик рендеров компонентов (хук useDebugRender).
• 📦 Logs: Глобальная функция d() для логгирования значений и промисов.
• 🛡 Production Safe: В продакшене код вырезается или становится пустышкой.
• Copy Utils: Копирование URL запроса и тела ответа/запроса в один клик.

Installation

npm install @scrumno/d-insp-react
# или
yarn add @scrumno/d-insp-react

Use

1. Оберни приложение

Добавь в корневой файл (например, main.tsx или App.tsx):

import { DebugProvider } from '@scrumno/d-insp-react'

ReactDOM.createRoot(document.getElementById('root')!).render(
	<DebugProvider>
		<App />
	</DebugProvider>
)

Справа внизу появится кнопка 🐛 (только в NODE_ENV !== 'production').

2. Network Inspector

Инспектор автоматически перехватывает все запросы. Никакой настройки axios или fetch не требуется.

Что в панели:

• URL, Method, Status
• Request Body & Headers
• Response Body (авто-парсинг JSON)
• Время выполнения

3. Логгирование данных d()

Пакет регистрирует глобальную функцию d(). Не нужно ничего импортировать.

// Лог переменной
d(userData)

// Лог промиса (покажет результат или ошибку, когда промис разрешится)
d(fetch('/api/status'))

// Функция возвращает значение, можно встраивать
const result = d(calculateValue())

4. Отслеживание рендеров

Тоже самое, ничего импортировать не нужно

import { useDebugRender } from '@scrumno/d-insp-react'

export const UserCard = props => {
	// Передайте имя компонента и пропсы, если нужно
	useDebugRender('UserCard', props)

	return <div>...</div>
}

Открой таб RENDER, чтобы увидеть счетчик. Хук использует useEffect и useRef для корректного подсчета коммитов.