vscode Debugger for Chrome構成を使用

VCODEを使用してhtmlを開発する場合、デバッグが少なくなるのは避けられません.しかしF 5を押すと自動的にchromが開きます.図:のようにlocalhost:8080を開く
この場合はプロファイルを変更するだけです

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceRoot}"
    },
    {
      "type": "chrome",
      "request": "attach",
      "name": "Attach to Chrome",
      "port": 9222,
      "webRoot": "${workspaceRoot}"
    },
    {
      "name": "debug index",
      "type": "chrome",
      "request": "launch",
      "sourceMaps": false,
      "file": "${workspaceRoot}/index.html"
    }
  ]
}

注意赤枠を描く場所
ここでは、debug indexの下に"file": "${workspaceRoot}/index.html"という構成を追加します.この構成の役割は、自分のディレクトリの下のindexを開くことです.htmlファイルなので、他のファイルを開きたい場合は、他のディレクトリに変更すればいいです.
またnew_file.htmlを開きたい場合はindexを直接開くことができます.htmlをnew_に変更file.htmlまたは{}の構成をコピーして変更します.nameの構成とfileの構成を変更してください.
実行:プロファイルの準備ができたら、実行します.デバッグページを開きます.ここでは、対応する構成を選択してください.F5を押すと、ブラウザで自分のindexが表示されます.htmlページ