Какой лучший способ отладить Vue.js SPA

Question

В настоящее время я работаю над одностраничным приложением (SPA) с помощью Vue.js. Я загружаю все пакеты узлов через NPM и Browserify.

Что действительно раздражает, так это то, что если я неправильно закоучу или забуду скобок, весь скрипт просто не работает и вообще не работает с сообщением об ошибке. Я пробовал использовать firebug, но поскольку это SPA-браузер, он не генерирует никакой ошибки.

Есть ли способ генерации сообщения об ошибке, например PHP, который расскажет мне, как отлаживать сценарий?

Answer 1

Если это как раз синтаксис, как вы упомянули, забыв о скобках и т. Д., Вы также можете использовать eslint, в котором будут отображаться сообщения об ошибках в консоли, для всех синтаксических ошибок, включая ошибки в стиле, например, отступы. Однако вы можете disable те rules если хотите.

Вот конфиг, вы должны положить в WebPack конфигурации, чтобы включить это:

module: { 
    preLoaders: [ 
    { 
     test: /\.vue$/, 
     loader: 'eslint', 
     include: projectRoot, 
     exclude: /node_modules/ 
    }, 
    { 
     test: /\.js$/, 
     loader: 'eslint', 
     include: projectRoot, 
     exclude: /node_modules/ 
    } 
    ], 

Answer 2

, что вы используете в качестве сервера разработки?

У меня есть here настройка, которая дает хорошие сообщения об ошибках.

ключевые инструменты для лучшей отладки, на мой взгляд, являются горячей заменой модуля и сервером budo dev.

дайте ему попробовать

Answer 3

Вот хороший пример.

Я получаю эту ошибку:

[Vue warn]: Error in render: "TypeError: Cannot read property 'length' of null"

Отлично! Откуда это происходит?

В вашем браузере инструменты разработчика разверните исключение и прокрутите вниз. Вы увидите много сообщений из vue.js и, возможно, других библиотек. Если вы продолжаете прокручивать страницу, вы можете увидеть сообщение из своего собственного кода. Этот пример из Chrome:

Нажмите на ссылку на ваш код и поставить точку останова в JS. Затем перезагрузите страницу.

Пройдите код JS и обратите внимание на то, когда ошибка регистрируется на консоли.

Если ошибка в коде JS, вы можете найти ее таким образом.

При загрузке данных в асинхронном режиме и ошибка происходит после загрузки некоторой части данных (мы надеемся, или вблизи вашей точки останова), то искать Ваш HTML и компоненты для этих данных, чтобы увидеть, если есть какие-либо vue.js dirctives или bindings, используя эти данные, которые могут вызывать проблему.

На большой сложной странице у вас может быть несколько компонентов, которые визуализируют, а другой - нет. Это еще одна подсказка о том, где может быть проблема.

Также вы можете скачать инструменты для vue.js для своего браузера. Здесь находится Vue.js devtools для хром.Это позволит вам легко просматривать эти данные в Vue.