Как отладить приложение Vue с помощью Google Chrome

Question

Я бы хотел все время отказаться от использования console.log и чаще использовать Chrome Developer Debug Tool. Я нашел это хорошее Как прекратить использовать console.log () и начать использовать отладчик вашего браузера об общей отладке (установка точек останова, выполнение построчно и т. Д.)

Но когда я попытался использовать это в реальной жизни - что означает использовать его в приложении vue (nuxt), над которым я работаю, - я не смог заставить его работать.

Все мои файлы объединены в более сложные файлы javascript, которые я не могу отладить.

Я тогда нашел этот пост: Отладка компонента .vue в Chrome Что, как я думал, пролило свет на этот вопрос, но, к сожалению, я не знаю, что делать.

Я добавил это:

configureWebpack: {
  devtool: 'source-map'
},

На мой nuxt.config.js

Но я бы не увидел никаких исходных карт всех моих файлов .js в отладчике. Было бы хорошо, если бы я мог найти все js-файлы для каждого компонента vue, для каждого файла хранилища и для других служебных файлов, которые я написал. Я не уверен, возможно ли это вообще, но я предполагаю, что должен быть способ найти мой код Javascript в инструменте отладчика, чтобы фактически отладить его. Или я не прав?

Спасибо за каждый намек.

Приветствия

Answer 1

Nuxt.js определяет исходную карту в свойстве сборки из файла nuxt.config.js: Шаг 1:

 build: {
        extend (config, { isClient }) {
          // Extend only webpack config for client-bundle
          if (isClient) {
            config.devtool = '#source-map'
          }
        }
 }

Шаг 2: снова запустить командную строку npm (nuxt не будет применять код в nuxt.config.js в отличие от другой страницы

npm run dev

Шаг 3: Откройте Chrome, нажмите Ctrl + Shift + I или F12, чтобы открыть источник с помощью: /// webpack ...

Я нашел это в URL этого официального лица: https://nuxtjs.org/api/configuration-build#extend

Answer 2

Использовать приведенную ниже конфигурацию в конфигурационном файле nuxt

    build: {
        filenames: {
          chunk: '[name].js'
        },
      extend(config, ctx) {
          const path = require('path');
          // Run ESLint on save
          if (ctx.isDev && ctx.isClient) {
            if (ctx.isDev && ctx.isClient) {
              config.devtool = '#source-map'
            }
          }
        }
}

Надеюсь, что это будет соответствовать вашим целям, и вы можете использовать ключевое слово debugger в своем коде javascript для преднамеренной установки точки останова, а также можете установить точку останова в браузере.