Visual Studio Codeのlaunch.jsonを短く書く(Google Chrome)

launch.jsonを短く！

Visual Studio CodeでデバックしてGoogle Chromeで表示させようとした時に必要なのがlaunch.jsonファイルです。

でも、どのサイトを見てもファイルの中のコードが長く初心者の私にはわかりにくかったです。

なので、なるべく短くなるべく簡単なコードを探した結果、これから紹介するコードの書き方をしたら、短くてもデバックできました。

今回紹介する方法は、たまにエラーになることもありますがデバックをやり直せば問題はないです。

"program"を使う方法

{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "program":"${workspaceFolder}/ファイル名"
        }
    ]
}

ファイル名は、開発しているファイルの名前を入力してください。

例えば、project.htmlというファイルで開発していれば、"program":"${workspaceFolder}/project.html"になります。

"url"を使う方法

{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url":"file:///ファイルの場所",
            "webRoot":"${workspaceFolder}"
        }
    ]
}

"url"にデバックするファイルの場所を入力しています。ファイルの場所が日本語の場合は、日本語のまま入力してもエラーになります。

例）"url":"file:///C:/project.html"

こちらは、私はあまり使用しません。使用するときは、"program"で一度デバックしてGoogle Chromeに表示させてから、urlをコピペしてきて使用しています。

なんとなくですが、こちらを使用した時の方がエラーになる確率が高いように思います。