What's The Best Way To Debug Vue.js SPA

If this is just about syntax, as you mentioned forgetting a bracket etc, you can use eslint as well, which will show error messages in console, for all syntax errors including styling errors as well, like indentation, However you can disable those rules if you want.

Here is the config, you have to put in webpack config to enable this:

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

Here is a good example.

I am getting this error:

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

Great! Where the heck is that coming from?

In your browser developer tools, expand the exception and scroll down. You will see lots of messages from vue.js and probably other libraries. If you keep scrolling down, you may see a message from your own code. This example is from Chrome:

Click on the link to your code and put a breakpoint in the JS. Then reload your page.

Step through the JS code and pay attention to when the error is logged to the console.

If the error is in your JS code, you may find it this way.

If you are loading data asynchronously and the error occurs after loading some piece of data (hopefully at or near your breakpoint), then you search your HTML and components for that data to see if there are any vue.js dirctives or bindings using that data that may be causing the issue.

In a large complicated page, you may have several components that render and one that does not. That is another clue as to where the problem might be.

Also you can download the vue.js developer tools for your browser of choice. Here is the Vue.js devtools for chrome. This will easily enable you to view that data in Vue.