【小ネタ】Visual Studio CodeのDebugger for ChromeでCORSを無効にする【備忘録】

せーのでございます。
CORSを無効にしながらデバッグするのに意外と手間がかかったので、忘れないように書いておきます。

何をしたいのか

Visual Studio Code(VSCode)でJavaScriptやTypeScriptの開発をする際にブラウザを使ったデバッグをしたい時があります。
そんな際に「Debugger for Chrome」という拡張機能を使うと、Chromeブラウザを使ってデバッグができます。

一方、Angularやreactなどのフロントエンドスクリプトをデバッグする際にはローカルホストでサイトを立ち上げますが、サーバーサイドAPIからデータを取得する際にCORSに引っかかってしまうため、CORSを無効にする必要があります。
ChromeにはCORS Unblockなどのextensionがあり、それをインストールして有効にしておけばCORSを回避できる、、、と思ったのですが、Preflightチェックをしている際にはPOSTとOPTIONSの両方が無効になっている必要があり、どのextensionでも何かしら上手くいかなかったりします。

ちなみにSafariには開発者モードというのがあり、そこでCORSを無効にするオプションをONにしているとうまくいきました。

ChromeでCORSを無効にするにはもう一つ、起動オプションをつけてChromeを立ち上げる、という方法があります。

open http://localhost:4200/ -a "/Applications/Google Chrome.app" --args --disable-web-security --user-data-dir

このコマンドをターミナルから叩くとCORSが無効になります(macの場合）。
ただ、debugger for chromeを使ってデバッグをすると、Chromeが自動で立ち上がるため、ターミナルからChromeを立ち上げることはできません。
また、VSCodeからのデバッグ拡張にSafariを使ったものは現在見つけられませんでした。

VSCodeからdebugger for chromeを使って、かつChromeから起動オプションをつけて立ち上げたい、ということです。

答え

.vscode/launch.jsonの「Configurations」ブロックに「runtimeArgs」という属性をつけて、そこに引数を配列の形で記述すればOKです。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}",
            "runtimeArgs": ["--disable-web-security", "--user-data-dir"]
        },
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "webRoot": "${workspaceFolder}"
        }
    ]
  }

まとめ

ということで、たぶん何ヶ月後かに忘れそうなのですが、ピンポイントで書いてあるものがなかったので備忘録として書いておきました。
おそらく何ヶ月後かに私が見に来ると思います。ね、書いといてよかったでしょ。