Chrome DevTools не показывает правильное имя файла - PullRequest
Новая
       5

Chrome DevTools не показывает правильное имя файла

5 голосов
/ 11 апреля 2020

Я использую ReactJS и при разработке и использовании Google Chrome DevTools у меня проблема с отображаемыми именами файлов.

Проект создается с использованием create-react-app.
Я получаю main.chunk. js имя в консоли, и я хочу, чтобы src / Index.jsx .

Как это исправить?

image of problem

Ответы [ 4 ]

3 голосов
/ 14 апреля 2020

Из документации create-react-app :

Вам не нужно устанавливать или настраивать такие инструменты, как Webpack или Babel. Они предварительно настроены и скрыты, так что вы можете сосредоточиться на коде.

Таким образом, у вас есть два пути:

1 - Создайте свой проект из scrath и определите свой файл конфигурации Webpack.

2- Изменить файл конфигурации Webpack create-реагировать-app (вы можете найти этот файл, используя , это отвечает ).

В любом случае для изменения имен чанков в Webpack вам необходимо укажите желаемые имена чанков в конфигурационном файле Webpack (обычно webpack.config. js): 

module.exports = {
  //...
  output: {
    //...
    chunkFilename: '[id].js'
  }
};

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

Вы также можете разбить чанк файлы с использованием SplitChunksPlugin. Подробнее об этом здесь .

2 голосов
/ 20 апреля 2020

То, что вы ищете, называется исходной картой, которая позволяет Chrome (и другим инструментам отладки) знать, как минимизированный пакет JS соответствует исходному коду.

По умолчанию create- Конфигурация response-app создает исходные карты, но есть несколько настроек, которые могут повлиять на то, что вы видите. Проверьте каждое из следующего, чтобы убедиться, что исходные карты генерируются и что Chrome обнаруживает их:

  1. В настройках Devtools в разделе «Источники» убедитесь, что «Включить JavaScript исходные карты» проверено. Когда вы открываете пакет в Devtools, должно появиться сообщение «Обнаружена карта источника». Вы увидите, что ваши оригинальные папки выделены оранжевым цветом на левой панели.

  2. Убедитесь, что для переменной среды GENERATE_SOURCEMAPS не установлено значение false в create-response- Конфигурация приложения . Возможно, вы захотите попробовать явно включить это.

  3. Вы можете проверить, что файл конфигурации Webpack, используемый create-response-app в node_modules/react-scripts/config/webpack.config.js. Найдите параметр для devtool и попробуйте явно изменить его на source-map или inline-source-map

  4. Возможно, вам потребуется настроить пользовательскую конфигурацию Webpack и выбрать другой параметр карты источника документация . Варианты inline-source-map и source-map будут наилучшими, но имейте в виду, что inline-source-map добавит несколько МБ к вашим пакетам кода.

Чтобы изолировать проблему, вы можете сделать новое приложение React по умолчанию и посмотрите, появляется ли источник в Devtools. Это скажет вам, если проблема в Webpack / вашем приложении или Devtools.

2 голосов
/ 13 апреля 2020

Это потому, что реагирует, компилирует все файлы в пакет и дает ему имя. Однако вы можете go перейти на вкладку источников и просмотреть там файлы, если они были скомпилированы в папку stati c, как это делается в следующем. js. По умолчанию он не поддерживается, чтобы не иметь хэшированных имен. Документация, однако, предполагает, что вы можете сделать это, но вам придется извлечь и настроить пользовательский веб-пакет.

1 голос
/ 20 апреля 2020

Вы можете создать новый проект без create-react-app. В файле webpack.config.js убедитесь, что вы включили сопоставление источника (https://webpack.js.org/configuration/devtool/). В итоге вы должны получить что-то вроде этого: 

{
    mode: "development"
    devtool: "inline-source-map"
    output: {
        index: "./index.js"
    }
    // more configuration
}

Исходные карты в основном отображают линии в источнике (ваш файл JSX реагирования) на выходной комплект (0.chunk.js или main.chunk.js в вашем случае).

...