What is the best way to debug Vue.js SPA

Question

I am currently working on a single page application (SPA) using Vue.js. I download all node packages through NPM and Browserify.

What really annoys is that if I code incorrectly or forget the bracket, the whole script just doesn't work and doesn't work with the error message at all. I tried using firebug, but since it is a SPA browser, it does not generate any error.

Is there a way to generate an error message like PHP that will tell me how to debug a script?

Answer 1

If you are only talking about syntax, as you mentioned, forgetting about parentheses, etc., you can use eslint , which will display error messages in the console, for all syntax errors, including modeling errors, such as indentation, however you can disable those rules if you want.

Here is the configuration, you need to enable webpack configuration to enable this:

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

Answer 2

what do you use as a development server?

I have a setting here that gives good error messages.

key tools for better debugging, in my opinion, are a hot plug-in module and a budo dev server.

try

Answer 3

Here is a good example.

I get this error:

[Vue warn]: Error in rendering: "TypeError: Unable to read property" length "of zero value

Excellent! Where the hell is this happening?

In the developer tools in the browser, expand the exception and scroll down. You will see many posts from vue.js and possibly other libraries. If you continue to scroll through the page, you can see the message from your own code. This example applies to Chrome:

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

Go through the JS code and pay attention to when the error is written to the console.

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

If you load data asynchronously, and an error occurs after loading some part of the data (I hope that you have it or near a breakpoint), then you look at your HTML and components for this data to see if there are any vue.js dirctives or bindings using this data, which may cause a problem.

On a large complex page, you may have several components that render, while the other does not. This is another clue as to where the problem might be.

You can also download the vue.js developer tools for your browser. Here's Vue.js devtools for chrome. This will easily allow you to view this data in Vue.