web-dev-qa-db-ja.com

Visual Studio Codeブレークポイントが間違った場所に表示される

Vue + Vuexプロジェクトで、Visual Studio Codeを使用してデバッグしようとしています。 Chromeデバッグツールを使用して適切に起動し、マップを適切に使用してデバッガーを起動していますが、.jsまたは.vueファイルにブレークポイントを配置しようとすると、VS Codeがブレークポイントを配置しているようですたとえば、ここでは、40行目のゲッターの1つにブレークポイントを配置しようとしますが、15行後になります。

enter image description here

これはVS Codeのバグですか、それとも他の問題ですか？修正方法に関する提案はありますか？

他の行の他のブレークポイントは、後の行に表示されるのと同じ動作をしますが、パターンを検出できません。 .jsファイルと.vueファイルの両方で発生し、オブジェクト宣言とルートレベルの従来の関数定義の両方で発生します。

VS Code 1.24.0を使用しています。

debuggingvue.jsvisual-studio-codevuex
18
Patrick Szalapski

特定のケースでこれに答えるには、使用されるlaunch.json構成と、少なくともソースフォルダー構造が必要です。先週の本当の話をして、その理由を説明します。

背景

私は最近、比較的小さなVueプロジェクトを継承しましたが、すぐに同じ問題に遭遇しました。VSCodeのブレークポイントは、すべてのソースファイルで「ジャンピー」でした。

このプロジェクトはVSCodeで開発されていないため、ソース管理にlaunch.jsonはありませんでした。デバッグ構成での最初の素朴な試みは次のように見えました。

{
  "type": "chrome",
  "request": "launch",
  "name": "Launch Chrome",
  "url": "http://localhost:8080",
  "webRoot": "${workspaceRoot}",
  "sourceMaps": true
}

非常に重要な詳細の1つは、ソースフォルダー構造です。次のようになります。

D:\TST\PROJECT
└───src
    │   main.js
    │
    ├───components
    │       AnotherComponent.vue
    │       SomeComponent.vue
    │
    └───services
            myservice.js
            yourservice.js

それを修正する

見つけやすい問題はwebRootでした。私のソースファイルはすべてsrcフォルダーにあるため、これは${workspaceRoot}/srcではなく${workspaceRoot}を指す必要がありました。これを行うだけで、.vueの下にあるsrc/componentsファイルのすべてのジャンプが修正されました。残念ながら、main.jsおよびservicesフォルダー内のファイル内のブレークポイントはまだ途切れ途切れでした。

次のステップは、sourceMapPathOverridesキーをlaunch.json構成に追加することでした。 VSCodeは、デフォルト値と思われるものを自動補完します。

  "sourceMapPathOverrides": {
    "webpack:///./*": "${webRoot}/*",
    "webpack:///src/*": "${webRoot}/*",
    "webpack:///*": "*",
    "webpack:///./~/*": "${webRoot}/node_modules/*",
    "meteor://????app/*": "${webRoot}/*"
  }

これらをそのまま残し、2つのエントリを追加しました。 main.jsを修正するために、次を追加しました：

"webpack:///./src/*": "${webRoot}/*",

追加したサービスフォルダー内のファイルを修正するには：

"webpack:///./src/services/*": "${webRoot}/services/*",

この時点で、プロジェクト全体のすべてのファイルですべてのブレークポイントが動作しました。

しかし、なぜ？

残念ながら、私の場合、これらの2つの魔法のラインがなぜ必要なのか、実際に何をするのかさえも言えません。

しかし、私はそれらをどのように占領したかをお伝えできます。 Chromeの開発ツールで、[ソース]タブのwebpack://セクションにドリルしました。 src/componentsが「ルート」に表示されていることに気付きました（緑色の矢印）。他のソース（赤色の矢印）は表示されませんでした。それらは.（丸で囲まれた赤）の下にのみ表示されていました。

Chrome devtools sources tab showing webpacked sources

免責事項：私はVue、webpackの専門家ではありませんchromeデバッグプロトコル、ソースマップ、またはvue-loader。私はただ1人ですブラウザではなくIDEにブレークポイントを設定したい開発者が増えています。

20
Mike Patrick

あなたは実際にステートメントの途中でブレークポイントを設定しようとしていると思います。

実際には単一のステートメントです。

以下のステートメントを検討してください。

その前にブレークポイントを設定できます。

> var obj = { a: value1, b: value2 }

あなたがこれを

var obj = { //can set break point here
 a: value1, //you can't set break point in this line 

 b: value2 //you can't set break point in this line 
}
0
Sreeragh A R

エディターとデバッガーが同じ解釈の「改行」を使用していない可能性があります。コードが\ rまたは\ r\nを使用しているかどうかを確認し、他のコードに変更します。

0
user1027167