Блог

Главная - Вопросы по программированию - Импорт ES6 в chrome devtools

Импорт ES6 в chrome devtools

#angular #reactjs #webpack #google-chrome-devtools #source-maps

#angular #reactjs #webpack #google-chrome-devtools #источник-карты

Вопрос:

Кто-нибудь знает, как просмотреть импорт es6 в chrome devtools в приложении webpack? например. import {map} from 'lodash' и в devtools мы получаем Uncaught ReferenceError: map is not defined в любой точке останова. Это может не зависеть от webpack.

Я пробовал настраивать исходные карты, но так и не смог заставить это работать. Изучение приложений Angular (2 ) и React, аналогичный опыт.

Для минимальных шагов репликации: любой может легко воспроизвести это с помощью angular cli или инструментов cli create-react-app — создайте пустой проект и начните отладку — проверьте импорт. Однако любое веб-приложение javascript, использующее импорт ES6, должно выполнять — ie. если у вас есть веб-приложение, и вы можете видеть, как определен импорт, пожалуйста, прокомментируйте.

Например, из быстрого запуска create-react-app https://github.com/facebook/create-react-app , просто запустите:

 npx create-react-app my-app
cd my-app
npm start

Открыть, chrome devtools, открыть app.js , поставьте точку останова render и попробуйте выполнить проверку React .

Сценарий отладки

При ссылке на Lodash выше, Lodash является простым примером зависимости npm, установленной с npm install lodash помощью .

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

1. Есть lodash ли внешняя зависимость в вашей конфигурации webpack?

2.Я могу добавить пример, однако он будет просто воспроизводиться: github.com/facebook/create-react-app cli.angular.io developers.google.com/web/tools/chrome-devtools/javascript

3. @JonasWilms не уверен насчет «внешней зависимости в конфигурации webpack» — однако, похоже, на это стоит обратить внимание.

4. Один трюк, который я только что нашел, чтобы обойти это: добавьте свойство, например. _ = {map} в класс, затем this._.map будет доступен для проверки в точке останова в классе.

5. @try-catch-наконец-то я добавил MVCE в описание, т.Е.. запустите create-create-app, откройте devtool, проверьте React — не определено. Однако любое веб-приложение с ES6 должно вести себя одинаково.

Метки: