什么是最好的调试方式Vue.js SPA

Question

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

真正令人讨厌的是，如果我错误地编码或忘记括号，整个脚本根本不起作用，并且根本没有错误信息。我试过使用萤火虫，但由于它是一个SPA通过Browserify它将不会产生任何错误。

有没有办法生成一个像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一个设置，它给了我很好的错误信息。

更好的调试的关键工具，在我看来，是热模块replacemente和budo dev服务器。

试试看

Answer 3

这里是一个很好的例子。

我收到此错误：

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

太好了！哪里来的？

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

点击链接到你的代码，并置于一个断点在JS。然后重新加载您的页面。

逐步通过JS代码，并注意错误记录到控制台时。

如果错误出现在您的JS代码中，您可以通过这种方式找到它。

如果要以异步加载数据后加载某些数据块（希望达到或接近断点）的出现错误，那么你搜索你的HTML和组件的数据，看看是否有任何vue.js指示或绑定使用可能导致问题的数据。

在一个复杂的大型页面中，可能有几个渲染组件和一个没有渲染的组件。这是解决问题的另一个线索。

此外，您可以下载vue.js开发人员工具为您选择的浏览器。这是铬合金的Vue.js devtools。这将使您能够轻松查看Vue中的数据。