回答編集履歴

launch.jsonの追記

2025/03/13 19:03

投稿

kassyi

スコア10

test CHANGED Viewed

@@ -13,8 +13,9 @@
 * その結果VSCodeがソースコードと対応付けられず、ブレークポイントがヒットしなかった。
 ## 解決策
-```launch.json
+```launch.jsonの抜粋
 {
+   "webRoot": "${workspaceFolder}/",
     sourceMapPathOverrides": {
         "webpack:///*": "${webRoot}/*"`
     }

geminiを使ってmdにわかりやすくまとめた

2025/03/13 19:01

投稿

kassyi

スコア10

test CHANGED Viewed

@@ -1,70 +1,38 @@
-現在はwebpack://となっていますが、以前はpakage.jsonにnameを指定していたため、パッケージ名/になっていました。そのためwebpack://が解決できなかったようです。
+# 原因
-![Chromeの開発者ツールのSourcesタブ](https://ddjkaamml8q8x.cloudfront.net/questions/2025-02-28/c9999ab1-fb30-474f-b298-7a0f2001e1ac.png)
+Webpackは、ソースマップ内に記述するソースコードのパスを、設定によって様々な形式で生成します。具体的には以下の2つのパターンがあります。
-すなわち、pakage.jsonをこのように修正することで、無事ブレークポイントが読み込まれるようになり、解決しました。
+* **パッケージ名を含む形式:** `webpack://<package-name>/path/to/file.ts`
+* **パッケージ名を含まない形式:** `webpack:///path/to/file.ts` または `webpack://path/to/file.ts`
-**before pakage.json:**
-```json
+**問題点:**
+`package.json` でパッケージ名を指定した場合であっても、Webpackがソースマップのパスに必ずしもパッケージ名を含めるとは限りません。一方で、`launch.json` の `sourceMapPathOverrides` でパッケージ名に依存した形式 (`"webpack://<package-name>/*": "${webRoot}/*"`) を指定してしまったため、以下の状況が発生しました。
+* 実際にはWebpackがパッケージ名を含まない形式でパスを生成していた。
+* その結果VSCodeがソースコードと対応付けられず、ブレークポイントがヒットしなかった。
+## 解決策
+```launch.json
 {
+    sourceMapPathOverrides": {
-    "name": "sample-package-name"
+        "webpack:///*": "${webRoot}/*"`
-    "private": true,
+    }
-    "version": "1.0.0",
-    "description": "",
-    "main": "index.html",
-    "type": "module"
 }
 ```
-**before launch.json**
-``` json
-{
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "type": "chrome",
-            "request": "launch",
-            "name": "Launch development server",
-            "url": "http://localhost:9223",
-            "webRoot": "${workspaceFolder}/src",
-            "preLaunchTask": "dev",
-            "resolveSourceMapLocations": ["!**/node_modules/**"],
-            "sourceMapPathOverrides": {
-                "webpack://sample-package-name/*": "${webRoot}/*"
+`"webpack:///*": "${webRoot}/*"` という設定は、Webpackが生成するソースマップのルートアドレスがパッケージ名を含むかどうかに関わらず、`webpack://` から始まる全てのパスを `webRoot` にマッピングする汎用的な設定です。
-            }
-        }
-  ]
-}
-```
-**after pakage.json:**
+**この設定により:**
-```json
-{
-    "private": true,
-    "version": "1.0.0",
-    "description": "",
-    "main": "index.html",
-    "type": "module"
-}
-```
-**after launch.json**
-``` json
-{
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "type": "chrome",
-            "request": "launch",
-            "name": "Launch development server",
-            "url": "http://localhost:9223",
-            "webRoot": "${workspaceFolder}/src",
+* Webpackがどのような形式でソースマップのパスを生成していても、VSCodeが正しくソースコードを見つけられるようになります。
-            "preLaunchTask": "dev",
+* その結果ブレークポイントが正常に機能するようになりました。
+# まとめ
-            "resolveSourceMapLocations": ["!**/node_modules/**"],
+今回の問題は、`launch.json` の `sourceMapPathOverrides` で指定したパスの形式と、実際にWebpackが生成したソースマップ内のパスの形式が一致していなかったことが原因です。
-            "sourceMapPathOverrides": {
+**重要なポイント:**
-                "webpack:///*": "${webRoot}/*"
+パッケージ名を指定したからといって、Webpackが必ずそのパッケージ名をソースマップのパスに含めるとは限りません。そのため、より汎用的な `"webpack:///*": "${webRoot}/*"` の設定が有効でした。
-            }
-        }
-  ]
-}
-```

beforとafterの下記間違え修正

2025/02/28 14:59

投稿

kassyi

スコア10

test CHANGED Viewed

@@ -48,7 +48,7 @@
 }
 ```
-**before launch.json**
+**after launch.json**
 ``` json
 {
     "version": "0.2.0",

完全に解決したため解決方法を刷新

2025/02/28 14:58

投稿

kassyi

スコア10

test CHANGED Viewed

@@ -1,23 +1,70 @@
+現在はwebpack://となっていますが、以前はpakage.jsonにnameを指定していたため、パッケージ名/になっていました。そのためwebpack://が解決できなかったようです。
+![Chromeの開発者ツールのSourcesタブ](https://ddjkaamml8q8x.cloudfront.net/questions/2025-02-28/c9999ab1-fb30-474f-b298-7a0f2001e1ac.png)
-tsconfigを次のように変えたらデバッグできるようになりました。また、実際にブレークポイントを挟んだそのコードまで走らせることが大事なようです。
+すなわち、pakage.jsonをこのように修正することで、無事ブレークポイントが読み込まれるようになり、解決しました。
-**before:**
+**before pakage.json:**
-```tsconfig.json
+```json
 {
+    "name": "sample-package-name"
-    "compilerOptions": {
+    "private": true,
-      "target": "ES2015",
+    "version": "1.0.0",
-      "sourceMap": true
+    "description": "",
-      //other option
-    }
-}
-```
-**after:**
-```tsconfig.json
-{
-    "compilerOptions": {
+    "main": "index.html",
-      "target": "ES2019",
+    "type": "module"
-      "sourceMap": true
-      //other option
-    }
 }
 ```
+**before launch.json**
+``` json
+{
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch development server",
-ただターゲットをES2015→ES2019にしただけですが‥他のパッケージとの相性がES2015と悪かったのかもしれません。
+            "url": "http://localhost:9223",
+            "webRoot": "${workspaceFolder}/src",
+            "preLaunchTask": "dev",
+            "resolveSourceMapLocations": ["!**/node_modules/**"],
+            "sourceMapPathOverrides": {
+                "webpack://sample-package-name/*": "${webRoot}/*"
+            }
+        }
+  ]
+}
+```
+**after pakage.json:**
+```json
+{
+    "private": true,
+    "version": "1.0.0",
+    "description": "",
+    "main": "index.html",
+    "type": "module"
+}
+```
+**before launch.json**
+``` json
+{
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch development server",
+            "url": "http://localhost:9223",
+            "webRoot": "${workspaceFolder}/src",
+            "preLaunchTask": "dev",
+            "resolveSourceMapLocations": ["!**/node_modules/**"],
+            "sourceMapPathOverrides": {
+                "webpack:///*": "${webRoot}/*"
+            }
+        }
+  ]
+}
+```

ブレークポイントについて追加

2025/01/30 18:18

投稿

kassyi

スコア10

test CHANGED Viewed

@@ -1,4 +1,4 @@
-tsconfigを次のように変えたらデバッグできるようになりました。
+tsconfigを次のように変えたらデバッグできるようになりました。また、実際にブレークポイントを挟んだそのコードまで走らせることが大事なようです。
 **before:**
 ```tsconfig.json
 {