Experiments Never Fail

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 を追加して launch.json に次のように記述する方法はよく知られています。

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

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

image.png

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

解決方法 #

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

ん、私はなんか出来てますね。
Debugger用にprofileを分けてるからっていうのもあるかもしれません。
"webRoot": "${workspaceFolder}",
"sourceMaps": true,
"userDataDir": "${workspaceRoot}/.vscode/chrome",
こんな感じで、プロファイルを.vscode以下に作るようにしてます。

— ちゅうこ (@y_chu5) February 14, 2020

さらに調べたところ、 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 アカウントでのログインも行えるようになりました。

image.png

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

そのため、

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

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

image.png

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

その他の解決方法 #

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

参考 #

published at tags: VSCode JavaScript Firebase FirebaseAuth. googleapi