Debugger for Chrome の launch で Google  アカウントでのログインができなくなった件

Firebase Auth を使った Web アプリを VSCode にて開発中、昨年(2019年)末からだと思うのですけど、Google アカウントでのログインができなくなったことに気づきました。

あ、これを書いてる時点の Chrome バージョンは 80.0.3987.106（Official Build） （64 ビット）で、OS は Windows 10 Pro で依然として再現しています。

Web アプリ開発で、VSCode に [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) を追加して  ``launch.json`` に次のように記述する方法はよく知られています。

```json
{
    "version": "0.2.0",
    "configurations": [
      {
        "type": "chrome",
        "request": "launch",
        "name": "Debug with Chrome",
        "url": "http://localhost:4200",
        "webRoot": "${workspaceFolder}"
      }
    ]
}
```

が、これで起動される Chrome では、Google アカウントでのログインができず、次のようなエラーになってしまいます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8227/0a705bb3-7981-a565-37e4-5ddc7b0d1b0c.png)

なぜこれが発生するのかは私は完全に理解していませんが、起動された Chrome がセキュリティ要件を満たさないものと推測されます。（同じ時期に、Google アカウントを利用したゲームにログインできなくなった、というような話題を主に海外で発見しました。）

## 解決方法

ということをツイートしたら、有用な情報を頂きました。ありがとうございます。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ん、私はなんか出来てますね。<br>Debugger用にprofileを分けてるからっていうのもあるかもしれません。<br>&quot;webRoot&quot;: &quot;${workspaceFolder}&quot;,<br>&quot;sourceMaps&quot;: true,<br>&quot;userDataDir&quot;: &quot;${workspaceRoot}/.vscode/chrome&quot;,<br>こんな感じで、プロファイルを.vscode以下に作るようにしてます。</p>&mdash; ちゅうこ (@y_chu5) <a href="https://twitter.com/y_chu5/status/1228329982021095427?ref_src=twsrc%5Etfw">February 14, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

さらに調べたところ、  ``launch.json`` に次のように ``userDataDir`` を追記することで解決できました。

```json
{
    "version": "0.2.0",
    "configurations": [
      {
        "type": "chrome",
        "request": "launch",
        "name": "Debug with Chrome",
        "url": "http://localhost:4200",
        "webRoot": "${workspaceFolder}",
        "userDataDir": "" 
      }
    ]
}
```

``"userDataDir": ""`` と空文字を指定すると、起動する Chrome がいつものユーザー、いつものプロファイルになり、Google アカウントでのログインも行えるようになりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8227/e0a3c886-482d-0577-5209-00892e5d4746.png)

注意点は、この指定で起動される Chrome は、普段使いの Chrome が既に起動済の場合は、そのプロセスを流用する、ということです。

そのため、

* 開発中のアプリが死ぬと普段使いのタブも道連れに死ぬ
* 普段使いの Chrome もデバッグ用のポートを開けておかないとデバッグできない

という注意点があります。

普段使う Chrome のショートカットに引数を追加しておきます（最初から付いてたっけ？）。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8227/8ee7f851-730b-e6d6-a792-7e35792891fc.png)

```
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --profile-directory=Default --remote-debugging-port=9222
```

## その他の解決方法

* [Debugger for Edge (Chromium)](https://docs.microsoft.com/ja-jp/microsoft-edge/visual-studio-code/debugger-for-edge) を使う
* [Debugger for Firefox](https://marketplace.visualstudio.com/items?itemName=firefox-devtools.vscode-firefox-debug) を使う
* launch ではなく [**attach**](https://github.com/Microsoft/vscode-chrome-debug#attach) を使う

Debugger for Edge でも問題を解決することができました。
Debugger for Firefox は未確認で「たぶん解決できるだろう」という程度です。
**attach** は launch より面倒な感じがして試してません、みんな常用してるのでしょうか。。

## 参考

* [vscode-chrome-debug/README.md at master · microsoft/vscode-chrome-debug](https://github.com/microsoft/vscode-chrome-debug/blob/master/README.md)
* [起動オプション - Google Chrome まとめWiki](http://chrome.half-moon.org/43.htm)
* [Visual Studio CodeでのJSのデバッグ方法（2018年版） - ICS MEDIA](https://ics.media/entry/11356/)