什么是调试Vue.js SPA的最佳方法

Question

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

真正令人讨厌的是，如果我编码不正确或忘记了一个括号，整个脚本根本不起作用而且完全没有错误消息。我尝试过使用firebug，但由于它是通过Browserify的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

这是一个很好的例子。

我收到此错误：

  

[Vue警告]：渲染错误：“TypeError：无法读取null的属性'length'”

大！那是什么来自？

在浏览器开发者工具中，展开例外并向下滚动。您将看到来自vue.js和其他库的大量消息。如果继续向下滚动，您可能会看到自己代码中的消息。此示例来自Chrome：

单击代码链接并在JS中添加断点。然后重新加载您的页面。

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

如果错误出现在您的JS代码中，您可能会这样找到它。

如果要异步加载数据并且在加载某些数据（希望在断点处或附近）之后发生错误，那么您在HTML和组件中搜索该数据以查看是否存在使用可能导致问题的数据的任何vue.js dirctives或绑定。

在一个大型复杂页面中，您可能有几个渲染的组件，而另一个组件则没有。这是问题可能出现的另一个线索。

您也可以为您选择的浏览器下载vue.js开发人员工具。这是chrome的Vue.js devtools。这将使您能够轻松地在Vue中查看该数据。