How to debug Vue application with google chrome

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

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 .

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