web-dev-qa-db-ja.com

VSコードでVue.jsアプリをデバッグします。エラー未確認のブレークポイント

次の問題があります。 Vue.jsプロジェクトをVS CodeとChromeでデバッグしたい。だから私はウェブサイトの公式ガイド Guide に従いますが、うまくいきません。問題は、常にエラーが発生することです。

 unverified breakpoint

何がいけないのですか？

これは私のvue.config.jsです

    module.exports = {
    configureWebpack: {
      devtool: 'source-map'
    }
  }

これは私のデバッグの手間です：

    {
    // 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",
            "breakOnLoad": true,
            "sourceMapPathOverrides": {
                "webpack:/src/*": "${webRoot}/*",
                "webpack:///./*": "${webRoot}/*",
                "webpack:///src/*": "${webRoot}/*",
                "webpack:///*": "*",
                "webpack:///./~/*": "${webRoot}/node_modules/*",
                "meteor://????app/*": "${webRoot}/*"
            }
        }
    ]
}

そして、これは私のpackage.jsonです

    "name": "test-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

npm run serveを試してみると、エラーメッセージunverified breakpointが表示され、ブレークポイントに到達しません。

Vue-cli 3を使用してプロジェクトを生成します。

誰かが私を助けてくれますか？

更新

パスに問題がある可能性があります。 VS Codeのデバッガコンソールで.scriptsを実行すると、次のようなパスが取得されるため

(c:\Users\XY\Desktop\Vue\route-app\webpack:\src\main.ts)

ただし、webpack:というフォルダはありません。しかし、なぜ彼はフォルダがあると考えているのか、私にはわかりません。彼はこれをすべてのファイルで作成します。

そして、私のtsconfig.jsにはすでに"sourceMap": trueがあります。

更新2

チェックボックスAll Exceptionsをオンにすると、VSコードでアプリ内のすべての例外が表示されます（例外はキャッチされます）。しかし、私のブレークポイントはまだ機能しません。

更新3

私のプロジェクトはこのように見えます

C:\Users\User\Desktop\Vue\route-app
|
-----.vscode
     |
     -----launch.json
|
-----node_modules
     |
     ----- modules etc.
|
-----public
     |
     ----- index.html
     |
     ----- manifest.json
     |
     ----- favicon.ico
|
-----src
     |
     ----- components
           |
           ----- all my components.vue files
     |
     ----- views
           |
           ----- all my views.vue files (this files are for routing)
     |
     ----- App.vue
     |
     ----- main.ts
     |
     ----- registerServiceWorker.ts
     |
     ----- router.ts
     |
     ----- shims-tsx.d.ts
     |
     ----- shims-vue.d.ts
     |
     ----- store.ts
|
-----.postcssrc.js
|
-----babel.config.js
|
-----package-lock.json
|
-----package.json
|
-----tsconfig.json
|
-----tslint.json
|
-----vue.config.js
javascriptgoogle-chromenpmvue.jsvisual-studio-code
12
Darem

このデバッグアダプターは、Chromeデバッグアダプターと同じ構文を使用していません。URLとパスの最後にある*を削除してください：

"webpack:///src/": "${webRoot}/"
4
Saeed

構成vue.config.js（存在しない場合は作成してください）

module.exports = {
    configureWebpack: {
        devtool: 'source-map'
    }
};

構成babel.config.js

module.exports = {
  "env":{
    "development":{
      "sourceMaps":true,
      "retainLines":true, 
    }
  },
  presets: [
    '@vue/app'
  ]
}

構成launch.json

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

デバッグできます.vueおよび.jsファイルは通常、上記の構成を参照した後（vue-cli3 + vscode）

0
moliyadi

私にとっては、webrootフォルダーが正しく設定されていませんでした。

My vue files browser is set to：

D:\Workspace

プロジェクトはそのフォルダにあります

D:\Workspace\vue_project1

Launch.jsonのwebroot設定を次のように変更する必要がありました。

"webRoot": "${workspaceFolder}/vue_project1"
0
Hugo van Schalkwyk