CODEWITHSUNDEEP
vue.jswebpackgoogle-chrome-devtoolsvuejs3vue-cli-4
user7346183
user7346183

Reputation: 1

How debug Vue3 applications with chrome and native javascript debugger

i started a new application with vue3 (created with vue-cli) and I'm not able to exploit native debugger in chrome

I have read that I had to specify the source map in my vue.config.js

module.exports = {


 pluginOptions: {
    quasar: {
      importStrategy: 'kebab',
      rtlSupport: false
    }
  },
  configureWebpack: {
    devtool: 'source-map'
  },
  transpileDependencies: [
    'quasar'
  ]
}

But I'm still not able to explore my component code with a debugger

the result I have screenshot not working and what i want (screen from a vue2 project) screenshot working

Upvotes: 0

Views: 991

Answers (1)

zsega
zsega

Reputation: 171

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.

Upvotes: 0

Related Questions