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

9589 ワード
Angular Docker VSCode Angular テキストリンク

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

注意

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

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

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

ハマった内容

VScodeにDebugger for Chromeなる便利な拡張機能があるってことで、AngularのコードをVSCode上でデバッグしようとしました。

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

環境

以下の記事参考にDockerの環境を構築していました。
Docker × Angular環境簡単構築

原因

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でデバッグ
「イマドキの JavaScript 開発で使える、リモートデバッグとロガーの Tips (2018年版-後編)」
Visual Studioコードでデバッグが機能しない

説明

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

sourceMapPathOverridesでやろうとしていること

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

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

            "webRoot": "${workspaceFolder}",

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

解決策の導き方

※ソース自体はAngularのチュートリアルになります。

ブラウザのソース配置について

まず、ブラウザのソースの配置ですが、Dockerコンテナで起動したAngularをVSCodeでデバッグで書かれている通り、Chromeの開発ツールでsourceの箇所を開いて適当なソースファイルがどのようなパスになっているか確認してみれば分かります。

例えば、上記の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の編集画面

ここで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/*
とすれば正しい設定になります。

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

余談

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

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

(もちろん、両方に/src/部分増やしただけなんですが)
どこを基準にするかは、サイトや参考文献によって違うかもしれません。

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

終わり

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

以上です！