什麼是最好的調試方式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中的數據。