Vue.js单页面应用程序的最佳调试方法是什么？

Question

我当前正在使用Vue.js开发单页应用程序（SPA）。我通过NPM和Browserify加载所有的节点包。

真正让人烦恼的是，如果代码编写不正确或者忘记了括号，整个脚本将无法正常工作，并且没有任何错误信息。我尝试使用Firebug，但由于它是通过Browserify的SPA，它不会生成错误信息。

是否有一种方式可以生成类似于PHP的错误编译消息，告诉我如何调试脚本？

- Lionel Yeo

Answer 1

如果只是语法问题，比如忘记括号等，您也可以使用 eslint，它会在控制台中显示所有语法错误的错误信息，包括样式错误，如缩进。但是，如果您想要的话，您可以通过禁用这些规则。

这是配置，您需要将其放在webpack配置中以启用此功能：

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

- Saurabh

Answer 2

这是一个很好的例子。

我遇到了这个错误：

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

太好了！这到底是从哪里来的？

在你的浏览器开发者工具中，展开异常并向下滚动。你会看到来自vue.js和可能其他库的许多消息。如果你继续向下滚动，你可能会看到来自你自己代码的消息。这个例子来自Chrome：

点击链接进入您的代码，并在JS中设置断点。然后重新加载页面。

逐步执行JS代码，并注意错误何时记录到控制台中。

如果错误在您的JS代码中，则可以通过此方式找到它。

如果您正在异步加载数据并且错误发生在加载某些数据之后（希望在或接近断点处），则可以搜索HTML和组件以查看是否有任何vue.js指令或绑定使用该数据可能会导致问题。

在一个复杂的大页面中，您可能会有几个渲染但一个不渲染的组件。这是另一个提示问题所在的位置。

此外，您可以为所选浏览器下载vue.js开发人员工具。这里是Chrome的Vue.js开发人员工具。这将轻松地使您能够在Vue中查看该数据。

- Jess