IDEA Debug Inspector

Пакет состоит из 2 частей:

• локальный bridge (idea-debug start), который открывает файл в IntelliJ IDEA;
• Chrome extension (extension/), который ловит клик по React-компоненту и отправляет запрос в bridge.

Без extension клик-инспектор работать не будет.

Конфиг bridge: C:\Users\<username>\.idea-debug-inspector\config.json

1) Установка

В проекте:

npm i -D idea-debug-inspector

2) Первая настройка bridge

npx idea-debug setup

Пример значений:

• Project ID: next-core
• Project root path: D:/work/next-core/frontend/gtb
• Hosts: localhost:3000
• IDEA command: Enter

Проверка:

npx idea-debug doctor

3) Запуск bridge

npx idea-debug start

Оставь этот терминал открытым.

4) Подключение extension в Chrome

1. Открой chrome://extensions
2. Включи Developer mode
3. Нажми Load unpacked
4. Выбери папку: node_modules/idea-debug-inspector/extension

Если устанавливаешь пакет глобально, путь будет из глобального npm-каталога, но обычно для проекта используй node_modules.

5) Запуск фронта

Во втором терминале:

npm run start

6) Использование в браузере

• Зажми Ctrl+Shift и наведи мышь на элемент: появится зеленая подсветка.
• Клик: откроется исходный файл в IDEA.
• Shift+Click: открыть родительский компонент из trace.
• Alt+I: lock/unlock inspect режима.

В консоли страницы будут логи:

• [IDEA Debug Inspector] page script injected
• [IDEA Debug Inspector] page inspector loaded
• [IDEA Debug Inspector] ready (page context) ...

7) Быстрый чек если не работает

1. npx idea-debug doctor показывает Bridge ... [OK]
2. В chrome://extensions включено именно текущее расширение из node_modules/idea-debug-inspector/extension
3. После обновления пакета нажми Reload на расширении
4. Страница приложения перезагружена
5. В DevTools Console видны логи инициализации

8) Полезные команды

npx idea-debug doctor
npx idea-debug stop

Если порт занят:

npx idea-debug stop
npx idea-debug start

9) Публикация новой версии

npm version patch
npm publish --access public

Если npm publish падает с E403, включи 2FA в npm или используй token с правом publish.