Отлаживать расширение Chrome, разработанное в ReactJS с помощью Typescript

#reactjs #typescript #google-chrome #google-chrome-extension #google-chrome-devtools

#reactjs #typescript #google-chrome #google-chrome-extension #google-chrome-devtools

Вопрос:

Я разрабатываю расширение для Chrome, используя ReactJS с помощью TypeScript.

введите описание изображения здесь

Вот как мой код typescript для расширения. Теперь я создаю этот код и создаю исходную карту, используя webpack следующим образом

введите описание изображения здесь

Теперь загрузите расширение в браузер Chrome. При нажатии на значок плагина он появляется во всплывающем окне. Я проверяю эти всплывающие окна на наличие проблем с отладкой. итак, он показывает мне вот так

введите описание изображения здесь

Итак, здесь отсутствует исходный код.

введите описание изображения здесь

Это настройки для инструмента разработчика.

введите описание изображения здесь

Здесь вы можете видеть, что я не получаю возможность прикрепить исходный код.

Без источника не удается отладить проблему. В обычном приложении React я могу легко идентифицировать файл .ts, поместить туда указатель отладки и начать отладку, но в случае расширения я не могу этого сделать. Очень нужно это решение, может кто-нибудь помочь мне с этим. Спасибо.

Комментарии:

1. Вы всегда можете щелкнуть правой кнопкой мыши popup.js в консоли разработчика и используйте опцию «Добавить исходную карту» и укажите ей URL-адрес файла исходной карты на диске.

2. Также убедитесь, что у вас включены исходные карты в настройках консоли разработчика.

3. карта исходных текстов @dwosk включена в режиме разработчика, и я не могу прикрепить свой исходный код к popup.js

4. @dwosk.. Я редактирую вопрос с помощью снимка экрана точки, который вы упомянули, вы можете проверить это

5. Вам нужно щелкнуть правой кнопкой мыши на фактической странице, которая открывается в середине консоли, а не на имени файла на боковой панели.