使用VSCODE開發html的時候，難免少了除錯。可是按下F5會自動開啟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頁面了