CODEWITHSUNDEEP
javascriptgoogle-chromedebuggingvue.jsnuxt.js
Merc
Merc

Reputation: 4570

How to debug Vue application with google chrome

I would like to step away from using console.log all the time and use the Chrome Developer Debug Tool more often. I found this nice How to stop using console.log() and start using your browser’s debugger about debugging in general (setting breakpoints, executing line by line etc.)

But when I tried to use this in real life – which means to use it in a vue (nuxt) application I am working on – I could not get it to work.

All my files are combined into more complex javascript files, which I cannot debug.

enter image description here

I then found this post: Debugging .vue component in Chrome Which I thought would shed light onto this matter, but unfortunately I don't know what to do.

I added this:

configureWebpack: {
  devtool: 'source-map'
},

To my nuxt.config.js

But I would not see any sourcemaps of all my .js files in the debugger. It would be nice if I could find all the js files for each vue component, for each store file, and for other utility files I wrote. I am not sure if this is even possible, but I guess there must be a way to find my Javascript code within the debugger tool to actually debug it. Or am I wrong?

Upvotes: 7

Views: 8153

Answers (3)

ahmaman
ahmaman

Reputation: 201

For those of you who are trying to debug nuxt and are using typescript. Here are the vs code configs for using nuxt-ts.

// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "client: chrome",
      "url": "http://localhost:{ADD_YOUR_APP_PORT_HERE}",
      "webRoot": "${workspaceFolder}"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "server: nuxt",
      "args": ["dev"],
      "osx": {
        "program": "${workspaceFolder}/node_modules/.bin/nuxt-ts"
      },
      "linux": {
        "program": "${workspaceFolder}/node_modules/.bin/nuxt-ts"
      }
    }
  ],
  "compounds": [
    {
      "name": "fullstack: nuxt",
      "configurations": ["server: nuxt", "client: chrome"]
    }
  ]
}

You also will need to enable source maps like this:

// nuxt.config.ts
    extend (config: any, ctx: any) {
        if (ctx.isDev) {
          config.devtool = ctx.isClient ? 'source-map' : 'inline-source-map'
        }
    }

I wrote a detailed tutorial on my blog : https://mansour.blog/enable-vs-code-debugger-for-nuxt-and-typescript

Upvotes: 2

Huỳnh Tú
Huỳnh Tú

Reputation: 115

Nuxt.js defines sourcemap in build property from nuxt.config.js file: Step 1:

 build: {
        extend (config, { isClient }) {
          // Extend only webpack config for client-bundle
          if (isClient) {
            config.devtool = '#source-map'
          }
        }
 }

Step 2: run npm command line again (nuxt will not apply code in nuxt.config.js unlike another page

npm run dev

Step 3: Open chrome , press ctrl + shift + I or press F12 to open source via : ///webpack ...

I found this in this official's url: https://nuxtjs.org/api/configuration-build#extend

Upvotes: 7

Mahamudul Hasan
Mahamudul Hasan

Reputation: 2823

Use below configuration in nuxt config file

    build: {
        filenames: {
          chunk: '[name].js'
        },
      extend(config, ctx) {
          const path = require('path');
          // Run ESLint on save
          if (ctx.isDev && ctx.isClient) {
            if (ctx.isDev && ctx.isClient) {
              config.devtool = '#source-map'
            }
          }
        }
}

Hope it will serve your purpose, and you can use debugger keyword into your javascript code for setting break point by your own intentionally, as well as you can set break point into browser .

Upvotes: 2

Related Questions