Почему DevTools может не загружаться в Chrome при работе с локальными файлами и как это исправить?

Разбираемся с проблемой

Когда ты открываешь локальный HTML файл прямо в Chrome через протокол file://, React DevTools может не загрузиться из-за ограничений безопасности Chrome на доступ расширений к файлам.

Решение

Чтобы исправить эту проблему, тебе нужно дать явное разрешение React DevTools на доступ к локальным файлам:

1. Открой Chrome и перейди на chrome://extensions/
2. Найди React Developer Tools в списке расширений
3. Нажми на детали расширения, чтобы открыть его настройки
4. Включи переключатель "Allow access to file URLs"

Почему это происходит

Chrome по умолчанию запрещает расширениям доступ к локальным файлам из соображений безопасности. Это защищает от ситуации, когда потенциально вредоносное расширение могло бы читать чувствительные файлы на твоём компьютере без твоего ведома.

Альтернативный подход

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

или с простым HTTP-сервером:

Этот подход рекомендуется для разработки на React, так как он больше соответствует продакшн-окружению и избавляет тебя от необходимости выдавать специальные разрешения.

Главный вывод

При разработке с локальными файлами и DevTools либо выдай расширению разрешение на доступ к file URLs, либо используй локальный сервер — это надёжнее и соответствует общепринятым практикам разработки.