VSCodeのDebugger for ChromeにおけるsourceMapPathOverrides設定メモ

タイトル若干迷走してます。
私と同じようにハマった人がいきついてくれたら、、と思っています。

## 注意
以下の内容`Angular`のプロジェクトでしかうまくいっていないです。
「同じノリでReact + Dockerの構成でもできるだろう！」と思ったらできませんでした。

(不確かな情報)
Angular2のようにWebpackがデフォルトで導入されている + source-mapの表示ができていることが条件なのかもしれません。。（私が試そうとしたReactのプロジェクトはWebpackでsource-mapの表示はしていませんでした）
[公式](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)の（「Sourcemaps」の章を「そもそもWebpackでsource-mapなかったらどうなるんだ」って思って読んだら、そう読めなくもない気がする）


React or Vue + Dockerの環境でこの記事にたどりついてしまった方は、Remote Developmentの拡張機能からDebugger for Chromeを利用する記事があったので、載せておきます。
[Visual Studio Code Remote の Container を使って Vue.js の開発環境を構築する話](https://blog.tacck.net/archives/586)


## ハマった内容
VScodeに[Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)なる便利な拡張機能があるってことで、AngularのコードをVSCode上でデバッグしようとしました。

けれど**ブレークポイントで処理が止まってくれない。**

## 環境
以下の記事参考にDockerの環境を構築していました。
[Docker × Angular環境簡単構築](https://qiita.com/A-Kira/items/8693a78873ca9cab0738)

## 原因
`Debugger for Chrome`の`launch.json`（設定ファイル）が適切な記述ではなかった。

## 解決策（結果のみ）

最終的`launch.json`(設定ファイル)は以下です。

```launch.json
{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "for angular",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}",
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "webpack:///./*": "${webRoot}/server/angular-app/*"
                }
        }
    ]
}
```

上記をコピペしてうまくいったら、多分、**めちゃくちゃ運がいい**(^^;

以下の記事を見て理解できたら、この先を読む必要もないかと思います。
[Dockerコンテナで起動したAngularをVSCodeでデバッグ](https://qiita.com/sathoshi-metal/items/2b7f02cdba1b922c6d4d)
[「イマドキの JavaScript 開発で使える、リモートデバッグとロガーの Tips (2018年版-後編)」](https://seroku.jp/wp/%E3%80%8C%E3%82%A4%E3%83%9E%E3%83%89%E3%82%AD%E3%81%AE-javascript-%E9%96%8B%E7%99%BA%E3%81%A7%E4%BD%BF%E3%81%88%E3%82%8B%E3%80%81%E3%83%AA%E3%83%A2%E3%83%BC%E3%83%88%E3%83%87%E3%83%90%E3%83%83/)
[Visual Studioコードでデバッグが機能しない](https://www.366service.com/jp/qa/218bb43c396d896efb3268537f68baf8)

## 説明
`sourceMapPathOverrides`で何をやろうとしているかが分かれば、正しく設定できます。

### sourceMapPathOverridesでやろうとしていること
**「ブラウザのソース配置（source map）と（VScodeで実装している）ローカルのソース配置を紐付ける」**です。
※正確さより、分かりやすさを取ってます。

ここで、もう一つ重要なのが`webRoot`が何か、です。

```json
            "webRoot": "${workspaceFolder}",
```

`${workspaceFolder}`はデフォルトの記述なのですが、
**VScodeにおけるworkspaceのルート**を指します。

## 解決策の導き方
※ソース自体はAngularのチュートリアルになります。

### ブラウザのソース配置について
まず、**ブラウザのソースの配置**ですが、[Dockerコンテナで起動したAngularをVSCodeでデバッグ](https://qiita.com/sathoshi-metal/items/2b7f02cdba1b922c6d4d)で書かれている通り、`Chromeの開発ツールでsourceの箇所を開いて適当なソースファイルがどのようなパスになっているか確認してみれば`分かります。

![スクリーンショット 2020-11-04 19.23.21 3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277737/afd39585-9be9-0315-6c62-3997eb36057e.png)

例えば、上記の`hero.service.ts`はブラウザのソース位置としては`webpack:///./src/app/hero.service.ts`に配置されています。

デバッグしたいソースは`src`の中の全てになるので、
（`src`のフォルダ含めてしまって）紐付けたい**ブラウザのソース配置**は今回`webpack:///./*`として考えます。

### ローカルのソース配置について
今回の階層

```
angular-traial ←※ webRoot=`${workspaceFolder}`の位置
├── .vscode
│   └── launch.js
├── docker
│   └── node
│       └── Dockerfile
├── docker-compose.yml
└── server
    └── angular-app
        ├── README.md
        ├── angular.json
        ├── e2e
        ├── karma.conf.js
        ├── node_modules
        ├── package-lock.json
        ├── package.json
        ├── src
        │   ├── app
        │   │   ├── app-routing.module.ts
        │   │   ├── app.component.html
        │   │   ├── app.component.sass
        │   │   ├── app.component.spec.ts
        │   │   ├── app.component.ts
        │   │   ├── app.component_bk.html
        │   │   ├── app.module.ts
        │   │   ├── dashboard
        │   │   ├── hero-detail
        │   │   ├── hero-search
        │   │   ├── hero.service.spec.ts
        │   │   ├── hero.service.ts
        ~以下省略~

```

VScodeの編集画面
![スクリーンショット 2020-11-04 20.00.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277737/4ea4e1ab-a854-f2b6-0d7d-9865820a3bb1.png)

ここでwebRoot=`${workspaceFolder}`はどこかというと、
文字通り、VScodeのworkspaceのルートの位置、今回は（階層構造の中にも記述しましたが）`angular-traial`のフォルダの位置になります。

ここは各個人workspaceをどう開いているかによるのですが、launch.jsを作成しようとすると`${workspaceFolder}/.vscode`となるはずです。

### ブラウザのソース配置とローカルのソース配置の帳尻を合わせる。
よってブラウザのソース配置をsrcフォルダまで含めた`webpack:///./*`と考えるなら、

ローカルのソース配置もsrcフォルダまで含めた
`（さらに上位の階層）/angular-traial/server/angular-app/*`
=`${workspaceFolder}/server/angular-app/*`
=`${webRoot}/server/angular-app/*`
とすれば正しい設定になります。

```json
            "sourceMapPathOverrides": {
                "webpack:///./*": "${webRoot}/server/angular-app/*"
                }
```

## 余談
ここまで分かったら、「デバッグ対象をsrcフォルダ内のみに限定する」なんてのも簡単ですね。

```json
            "sourceMapPathOverrides": {
                "webpack:///./src/*": "${webRoot}/server/angular-app/src/*"
                }
```
(もちろん、両方に`/src/`部分増やしただけなんですが)
どこを基準にするかは、サイトや参考文献によって違うかもしれません。

`sourceMapPathOverrides`について分かっていれば、対応できるはず。。


## 終わり
`Debugger for Chrome`使ったら、いちいち開発者ツールでソース探さなくてよくなるのでいいですね。（ちょっとハマりましたがAngularの勉強は捗りそうです）

以上です！