Firebase Auth を使った Web アプリを VSCode にて開発中、昨年(2019年)末からだと思うのですけど、Google アカウントでのログインができなくなったことに気づきました。
あ、これを書いてる時点の Chrome バージョンは 80.0.3987.106（Official Build） （64 ビット）で、OS は Windows 10 Pro で依然として再現しています。
Web アプリ開発で、VSCode に Debugger for Chrome を追加して launch.json に次のように記述する方法はよく知られています。
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Debug with Chrome",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}"
}
]
}
が、これで起動される Chrome では、Google アカウントでのログインができず、次のようなエラーになってしまいます。
なぜこれが発生するのかは私は完全に理解していませんが、起動された Chrome がセキュリティ要件を満たさないものと推測されます。（同じ時期に、Google アカウントを利用したゲームにログインできなくなった、というような話題を主に海外で発見しました。）
解決方法
ということをツイートしたら、有用な情報を頂きました。ありがとうございます。
ん、私はなんか出来てますね。
— ちゅうこ (@y_chu5) February 14, 2020
Debugger用にprofileを分けてるからっていうのもあるかもしれません。
"webRoot": "${workspaceFolder}",
"sourceMaps": true,
"userDataDir": "${workspaceRoot}/.vscode/chrome",
こんな感じで、プロファイルを.vscode以下に作るようにしてます。
さらに調べたところ、 launch.json に次のように userDataDir を追記することで解決できました。
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Debug with Chrome",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}",
"userDataDir": ""
}
]
}
"userDataDir": "" と空文字を指定すると、起動する Chrome がいつものユーザー、いつものプロファイルになり、Google アカウントでのログインも行えるようになりました。
注意点は、この指定で起動される Chrome は、普段使いの Chrome が既に起動済の場合は、そのプロセスを流用する、ということです。
そのため、
- 開発中のアプリが死ぬと普段使いのタブも道連れに死ぬ
- 普段使いの Chrome もデバッグ用のポートを開けておかないとデバッグできない
という注意点があります。
普段使う Chrome のショートカットに引数を追加しておきます（最初から付いてたっけ？）。
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --profile-directory=Default --remote-debugging-port=9222
その他の解決方法
- Debugger for Edge (Chromium) を使う
- Debugger for Firefox を使う
- launch ではなく attach を使う
Debugger for Edge でも問題を解決することができました。
Debugger for Firefox は未確認で「たぶん解決できるだろう」という程度です。
attach は launch より面倒な感じがして試してません、みんな常用してるのでしょうか。。