Отладка JSX с помощью браузера/плагинов

Есть ли способ отладки файлов JSX?

Я не могу видеть файлы .jsx, когда я проверяю вкладку ресурсов в сафари/хром. Можно ли использовать отладчик?

Ответ 1

После установки Расширения Chrome откройте devTool (f12), и вы увидите:

Новая вкладка "реакция" - используется для проверки элементов реакции (например, регулярного осмотра).

В закладке source (левая панель) появится новый список приложений, в котором вы можете увидеть файлы JSX и установить точки останова на стороне вашего кода.

ПРИМЕЧАНИЕ: может потребоваться перезапустить хром, чтобы получить его

Ответ 2

Существует Расширение Chrome, которое добавляет другую вкладку в Инструменты разработчика и позволяет отлаживать компоненты React. Вы можете просмотреть предварительный просмотр и узнать больше об этом в Восстановить документацию.

Другие браузеры не поддерживают React Debugger, но.

Ответ 3

Если вы используете webpack, вы можете предоставить конфигурацию devtool внутри webpack.config.js.

module.exports = {
    devtool: 'source-map'
   // rest of the webpack configurations
}

Он будет поддерживать исходный исходный код. Вы можете просмотреть этот исходный код на вкладке источника в инструментах разработчика браузера. (Если вы используете chrome/firefox, то на вкладке source вы можете нажать Ctrl + P, чтобы быстро найти файл, который вы хотите отлаживать/анализировать.)

Подробнее о webpack devtool здесь.

Надеюсь, что это поможет:)

Ответ 4

Браузер и просмотр с помощью -d поможет сгенерировать исходную карту, если вы используете их для создания источника, затем вы можете отслеживать, какой файл приводит к ошибке.