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

6961 ワード
VSCode JavaScript googleapi Firebase FirebaseAuth JavaScript テキストリンク

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

解決方法

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

さらに調べたところ、 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 でも問題を解決することができました。
Debugger for Firefox は未確認で「たぶん解決できるだろう」という程度です。
attach は launch より面倒な感じがして試してません、みんな常用してるのでしょうか。。

参考