VS Code中HTML无法关联CSS且Chrome调试localhost连接失败求助

以下是逐一排查步骤：

• 核对文件路径：确认style.css与HTML文件处于同一目录。若不在同一目录，需调整href的相对路径，比如CSS在css文件夹下则写href="css/style.css"，若HTML在子文件夹则写href="../style.css"；同时注意文件名大小写必须与实际文件完全匹配（比如实际是Style.css就不能写style.css）。
• 检查link标签位置与格式：确保<link rel="stylesheet" href="style.css">放在HTML的<head>标签内部，标签属性无拼写错误（比如rel="stylesheet"不能写错）。
• 强制刷新浏览器缓存：按下Ctrl+Shift+R（Chrome）强制刷新页面，避免浏览器缓存旧的无样式页面。
• 通过开发者工具排查：按F12打开Chrome开发者工具，切换到「Network」标签，刷新页面后查看style.css的请求状态：
  • 若显示404，说明路径错误，点击请求查看实际访问路径，修正href即可；
  • 若请求成功但样式不生效，切换到「Elements」标签，检查元素的样式是否被覆盖或存在语法错误。

先恢复VS Code Chrome调试的默认launch.json内容 #

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:5500",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

后续排查步骤： #

• 确认本地服务器已运行：
  • 若使用VS Code的Live Server插件，需点击编辑器右下角的「Go Live」按钮，确保服务器启动（右下角会显示运行端口，比如5500）；
  • 若自行搭建服务器（如Node.js），需确认服务器进程已启动且无报错。
• 检查端口占用情况：
  • Windows：打开命令提示符，执行netstat -ano | findstr :5500，查看端口是否被其他程序占用，若占用则更换launch.json中的端口（比如改为5501）；
  • Mac/Linux：打开终端，执行lsof -i :5500，同理更换未被占用的端口。
• 调整launch.json适配静态页面：若无需本地服务器，直接调试本地HTML文件，可改用以下配置：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "file": "${workspaceFolder}/index.html"
    }
  ]
}

将index.html替换为你实际要调试的HTML文件名即可。

内容的提问来源于stack exchange，提问作者Chioma Onyemalu