Вопрос по google-chrome-devtools, debugging, webpack, reactjs, javascript – Реагировать на отладку в браузере при использовании bundle.js

18

Инструменты: Инструменты разработчика Chrome, ReactJs и Webpack

Возможно, это было, когда я переключился на пакетирование с веб-пакетом, но первоначально, когда я начал свой проект, я смог объединить свои js в файл bundle.js, но все еще имел доступ к файлам в инструменте отладки браузера. Теперь все, что я вижу в браузере в моей папке js - это bundle.js

Используя веб-пакет, как мне вернуться к возможности видеть все мои файлы Javascript в отладчике браузера, чтобы я мог делать такие вещи, как вставка точек останова?

Ваш Ответ

3   ответа
3

Его обновление теперь нужно просто включить mode: "development" в верхней части module.exports и установить отладчик в любом месте вашего файла .js, который будет работать, и открыть chrome devtools
webpack.config.js:

const path = require('path')
module.exports = {
    mode: 'development',
entry: path.join(__dirname,'src/js','index.js'),
  output: {
    path: path.join(__dirname, 'dist'),
      filename: 'build.js'
   },
  module: {}
}

проверять

ссылка "check" - 404 ... похоже, что свойство "mode" больше не является допустимым синтаксисом ... Andrew
13

Ты можешь использоватьdevtool вариант чтобы веб-пакет генерировал исходные карты, которые (при включении в настройках Chrome devtools) позволит Chrome перевести код вbundle.js (который может даже быть уменьшен) в исходный код.

Для разработки я установил эту опцию наeval-source-map или жеcheap-eval-source-mapи для производства я либо оставляю это отключенным, либо генерирую отдельные файлы исходных карт сsource-map.

Я помню, как кто-то очень рекомендовал «исходные карты», я попробую и дам вам знать, как это происходит! Nick Pineda
Я добавил их в мой файл webpack.config.js. Debug: true, devtool: "# eval-source-map", а в инструментах разработки dev карты ссылок включены для js, но я все еще вижу только bundle.js. Nick Pineda
18

После долгого бессмысленного использования множества печатных заявлений я наконец вернулся и выяснил, как это сделать.

Вот как вы получаете возможность снова использовать точки останова после объединения:

1)

Перейдите к файлу webpack.config.js и установите devtools из «true» в «source-map» или в одну из других опций, которые @MichelleTilley объяснил в своем ответе.

webpack.config.js (вот пример)

module.exports = {
  entry: "./js/app.js",
  output: {
    filename: "js/bundle.js"
  },
  debug: true,
  devtool: "#eval-source-map",
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
,        exclude: /(node_modules|bower_components)/,
        loader: 'babel'
      }
    ]
  }
};

2)

Также, как @MichelleTilley объяснила в своем ответе, вам может понадобиться включить опции devtools в Chrome.

3)

После этого, когда вы перейдете к отладке, вам придется искать новую папку с именем "." это супер трудно заметить!

Благодаря ответу Stackoverflow ниже с опубликованными изображениями я наконец нашел, где находится эта папка.

Настройте веб-пакет, чтобы разрешить отладку браузера

«Свойство debug удалено в веб-пакете 2.0.0». Смотрите новый ответ. vishvAs vAsuki
Ах, теперь я вижу «включить исходную карту JavaScript» и «включить исходную карту CSS» в Chrome devtools, и оба проверены по умолчанию. Интересно, что после некоторого обхода теперь работает и хром. пойди разберись. newman
Кто-нибудь может сказать, какие "опции devtools в Chrome" позволяют сделать эту работу? У меня это работает в FireFox, но в Chrome я вижу javascript открытым текстом, но моя точка останова не останавливается. В Firefox связанные скрипты настолько перегружены, поэтому мне нравится, как Chrome отображает их в папках, но сначала я должен заставить его работать. newman

Похожие вопросы