Есть ли хороший способ отладки vuejs вычисленных свойств и шаблонов?

Question

У меня есть некоторые проблемы при отладке vuejs, например при отладке вычисленных свойств или значений данных в шаблонах и т. Д. c ...

Сейчас я использую метод IIFE для его отладки, который упоминается в https://vuedose.tips/tips/debugging-templates-in-vue-js/:

<h2 dir="auto">
  {{(function(){debugger;let temp = headerMessage})()  ||  headerMessage}}
</h2>

, и у меня есть большая проблема с исходной картой в chrome для отладки в vue файлах, как показано на картинке ниже. слишком много дубликатов с разными кодами из одного файла (эта панель. vue, показанная ниже, не та, что у меня есть в моем проекте, это может быть отрендеренная версия или что-то еще, чего я не хочу видеть, я просто хочу увидеть панель реальной сделки. vue файл, чтобы работать лучше на нем):

Как решить эту проблему и есть ли способ правильной отладки таких деталей в vuejs, например, установить точку останова, используя?

Answer 1

Я предлагаю вам использовать vue-dev-tools. Расширение браузера, которое позволяет вам проверять компонент по компонентам data, computed и многое другое.

Вы можете скачать его и установить из любого магазина расширений браузера: Chrome , Mozilla , et c.

Vue Dev Tool хранилище.