[Vuejs]-How debug Vue3 applications with chrome and native javascript debugger

by

0👍

To use the native js debugger in a vue 2 application. You can do something like this:

methods: {
  doSomething () {
    this.loading = true
    // doing something
    debugger // native js debugger, in console check => this.loading (= true)
    this.loading = false
  }
}

Hopefully, it works the same way in vue 3.

You may be tempted to use it in the life-cycle hooks such as mounted, created … but unfortunately, that never worked for me. Once the debugger halts the program, you can test it in the console by seeing what kind of object this identifies as.

When the native js debugger is used in a method enclosed by the methods option, it acts in a helpful and expected way. However, when it is used in a lifecycle hook like created the this object is not what you would expect it to be.

Additionals:
I actually stumbled on this question because I was looking for ways to use the native js debugger in the life cycle hooks. I’m hoping there might be vue 2 life-cycle hooks that support it.

Leave a comment