Vuejs - Titik putus tidak ditetapkan dalam VSCODE

Question

Saya cuba nyahpepijat vuejs menggunakan vscode, saya telah mencuba banyak tutorial/jawapan tetapi tidak dapat berfungsi.

Jadi saya memutuskan untuk bertanya soalan di sini, mungkin ada cara yang betul untuk menjadikannya berfungsi sekarang.

Saya mencipta projek yang serupa dengan projek yang ingin saya nyahpepijat supaya saya boleh menyiarkan cetakan di sini.

Struktur projek ialah:

Ini ialah titik putus yang tidak terikat:

Tab Sumber dalam Chrome kelihatan seperti ini:

Tab sumber Chrome yang lebih terperinci:

vue.config.js:

/**
 * @type {import('@vue/cli-service').ProjectOptions}
 */
module.exports = {
  configureWebpack: {
    devtool: "source-map"
  },
  transpileDependencies: true
}

launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "vuejs: chrome",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}",
            "sourceMapPathOverrides": {
              "**/src/*": "${webRoot}/src/*",
            },
            "preLaunchTask": "vuejs: start"
          }
    ]
}

tasks.json:

{
    "version": "2.0.0",
    "tasks": [
      {
        "label": "vuejs: start",
        "type": "npm",
        "script": "serve",
        "isBackground": true,
        "problemMatcher": [{
            "base": "$tsc-watch",
            "background": {
                "activeOnStart": true,
                "beginsPattern": "Starting development server",
                "endsPattern": "Compiled successfully"
            }
        }],
        "group": {
            "kind": "build",
            "isDefault": true
        }
    }
    ]
}

pakej.json:

{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^2.6.14"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "vue-template-compiler": "^2.6.14"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

Dikemas kini

@A.D bertanya kepada saya sama ada saya cuba menggunakan kata kunci

debugger;

Keputusan adalah seperti berikut: Ps: Saya tidak mahu mula menulis penyahpepijat dalam kod saya...

Tetapi saya dapat melihat fail penyahpepijat menunjuk ke:

C:UsersvinicDesktoptesttestjswebpack:testsrccomponentsHelloWorld.vue

Tetapi komponen src sebenarnya terletak

C:UsersvinicDesktoptesttestsrccomponentsHelloWorld.vue

Mengapa titik putus saya tiada sempadan?

Answer 1

Cuba tukar parameter webRoot dan simpan kandungan dalam dokumen, anda perlu sertakan src selepas ${workspaceFolder}.

{
  "type": "chrome",
  "request": "launch",
  "name": "vuejs: chrome",
  "url": "http://localhost:8080",
  "webRoot": "${workspaceFolder}/src",
  "breakOnLoad": true,
  "sourceMapPathOverrides": {
    "webpack:///src/*": "${webRoot}/*"
  }
}

Kemas kini: Selepas beberapa kajian, saya mendapati ini masalah. Terdapat perubahan dalam versi yang anda gunakan. Mereka menukar pengkompil dan ini menjejaskan cara penyahpepijat berkelakuan.

Anda boleh menggunakan versi ini "2.6.11" berfungsi.

Nota: Perubahan ini mempengaruhi keluaran berikutnya.

Answer 2

Nampaknya terdapat beberapa masalah dengan pek web dalam versi vue 2.6.11 ke atas

Git Central Theme

Tema Reddit

Selepas beberapa perbincangan dengan @Tonielton Mota, saya perasan bahawa jika saya mengalih keluar sepenuhnya nama sifat daripada package.json dan package-lock.json, ia berfungsi.

Berikut ialah fail yang sedang berjalan:

launch.json

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "vuejs: chrome",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}/src",
            "sourceMapPathOverrides": {
              "webpack:///src/*": "${webRoot}/*",
            },
            "preLaunchTask": "vuejs: start"
          }
    ]
}

package.json

{
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^2.6.14"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "vue-template-compiler": "^2.6.14"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}