Vue - показать строку с ошибкой в ​​Chrome инструментах разработки - PullRequest
Новая
       3

Vue - показать строку с ошибкой в ​​Chrome инструментах разработки

0 голосов
/ 30 марта 2020

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

Я пробовал эти опции в vue.config.js: 

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

и 

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

Но я все еще получаю такую ​​ошибку:

enter image description here

Это мой package.json фрагмент 

"scripts": {
  "serve": "vue-cli-service serve",
...
"devDependencies": {
  "@vue/cli-plugin-babel": "^3.12.1",
  "@vue/cli-plugin-pwa": "^3.12.1",
  "@vue/cli-service": "^4.2.3",

Как это исправить? Как выглядит ошибка при правильно настроенной исходной карте?

Обновление: минимально воспроизводимый проект: https://wwww.github.com/literakl/vue-errors Это происходит при ошибках в vue компонентах.

Ответы [ 3 ]

2 голосов
/ 31 марта 2020

Ошибка должна выглядеть примерно так, если ошибка возникает в части javascript компонента: enter image description here

Похоже, у вас правильные настройки, мой vue.config.js выглядит так: 

module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  }
}

Я также использую "@vue/cli-service": "^4.2.0"

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

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

Я не уверен, что вы уже используете расширение VueJS devtool, но вы обязательно должны использовать его и в своем общем рабочем процессе. Доступно для Chrome и Firefox.

Причина, по которой я советую использовать это, заключается просто в том, что иногда ваш код может быть правильным, но как написано в вашем примере ошибки «Не удается прочитать свойство 'poll' of undefined", похоже, что опорный запрос неправильно заполняется родительским компонентом или чем-то, что передает данные в файл PollHeading. vue.

С помощью Vue devtools вы можете проверять данные, реквизиты и вычисленные свойства одного компонента, наблюдать за событиями по мере их развертывания и визуально следить за потоками данных во всем приложении.

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

Тем не менее, получение явных номеров строк ошибки в Vue2 является своего рода ситуацией попадания или пропуска; с Vue 2.5 и выше вы можете поместить ловушку errorHandler () внутри вашего компонента, которая даст вам детальную трассировку стека. Попробуйте поместить его в файл PollHeading. vue и посмотрите, какой вывод он вам даст. Должен быть намного более подробным, чем вывод по умолчанию.

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

Похоже, ваша ошибка связана с частью template компонента.

Карты не будут работать при ошибках шаблона, поскольку шаблон преобразуется в большую функцию javascript (рендеринг), а связь между шаблоном и функцией рендеринга теряется.

Лучше всего настроить обработчик ошибок и зарегистрировать его.

...