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

#VSCode#JavaScript#Firebase#FirebaseAuth#googleapi

Posted on 2020/02/15 00:00:00(+9:00)

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 アカウントを利用したゲームにログインできなくなった、というような話題を主に海外で発見しました。）

解決方法

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

ん、私はなんか出来てますね。
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 アカウントでのログインも行えるようになりました。

注意点は、この指定で起動される 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 より面倒な感じがして試してません、みんな常用してるのでしょうか。。

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

解決方法

その他の解決方法

参考