本地网站app.js加载失败问题咨询及后续解决方法求助

问题背景 #

使用VS Code在Chrome浏览器中打开本地开发网站时，index.html和styles.css可正常加载，但app.js无法加载并报错。尝试注释app.js中多行代码仍未定位问题，次日网站恢复正常，现咨询该类问题的后续解决方法。

相关代码 #

app.js #

const btns = document.querySelectorAll('.question-btn');

btns.forEach(function(btn) {
    btn.addEventListener("click", function(e) {
        const question = e.currentTarget.parentElement.parentElement;
        question.classList.toggle("show-text");
    });
});

对应HTML代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Q & A</title>
    <!-- font-awesome -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
    />
    <!-- extra fonts -->
    <link
      href="https://fonts.googleapis.com/css?family=Great+Vibes&display=swap"
      rel="stylesheet"
    />
    <!-- styles -->
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <section class="questions">
        <!-- title -->
        <div class="title">
            <h2>General Questions</h2>
        </div>
        <!-- questions -->
        <div class="section-center">
            <!-- single question -->
            <article class="question">
                <!-- question title -->
                <div class="question-title">
                  <p>do you accept all major credit cards?</p>
                  <button type="button" class="question-btn">
                      <span class="plus-icon">
                          <i class="far fa-plus-square"></i>
                      </span>
                      <span class="minus-icon">
                        <i class="far fa-minus-square"></i>
                      </span>
                  </button>
                </div>
                <!-- question text -->
                <div class="question-text">
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi aliquid quibusdam dicta nam voluptatum totam, ipsam ab maxime sint.
                    </p>
                </div>
            </article>
            <!-- end single question -->
            <!-- single question -->
            <article class="question">
                <!-- question title -->
                <div class="question-title">
                  <p>do you support local farmers?</p>
                  <button type="button" class="question-btn">
                      <span class="plus-icon">
                          <i class="far fa-plus-square"></i>
                      </span>
                      <span class="minus-icon">
                        <i class="far fa-minus-square"></i>
                      </span>
                  </button>
                </div>
                <!-- question text -->
                <div class="question-text">
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi aliquid quibusdam dicta nam voluptatum totam, ipsam ab maxime sint.
                    </p>
                </div>
            </article>
            <!-- end single question -->
        <!-- single question -->
            <article class="question">
                <!-- question title -->
                <div class="question-title">
                  <p>do you use organic ingredients?</p>
                  <button type="button" class="question-btn">
                      <span class="plus-icon">
                          <i class="far fa-plus-square"></i>
                      </span>
                      <span class="minus-icon">
                        <i class="far fa-minus-square"></i>
                      </span>
                  </button>
                </div>
                <!-- question text -->
                <div class="question-text">
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi aliquid quibusdam dicta nam voluptatum totam, ipsam ab maxime sint.
                    </p>
                </div>
            </article>
    <!-- end single question -->
        </div>
    </section>
    <!-- javascript -->
    <script src="app.js"></script>
  </body>
</html>

后续解决方法 #

即时排查步骤（再次遇到时立即执行） #

• 打开Chrome开发者工具（按F12），切换到「网络」标签，刷新页面后查看app.js的请求状态：
  • 若显示404：检查文件路径是否正确，确认app.js与index.html在同一目录，文件名大小写是否完全匹配（Windows系统不区分大小写，但Chrome有时会严格识别）
  • 若出现500或其他服务器错误：如果使用了本地服务器（如Live Server插件），检查服务器是否正常运行，是否存在文件被其他程序锁定的情况
• 查看「控制台」标签的具体报错信息，比如语法错误、资源加载权限问题，复制保存报错内容，方便后续定位
• 检查VS Code的自动保存状态，确保修改后的app.js已保存到磁盘——编辑器延迟保存可能导致浏览器加载未更新的空白或错误文件

预防与优化措施 #

• 使用本地服务器打开项目（比如VS Code的Live Server插件），避免直接双击HTML文件使用file://协议，该协议存在诸多资源加载限制
• 为app.js添加版本参数禁用浏览器缓存：修改script标签为<script src="app.js?v=1.0"></script>，每次更新代码时修改版本号，防止浏览器缓存旧的异常文件
• 开启VS Code的「自动保存」功能：在设置中搜索"Auto Save"，设置为"afterDelay"，确保代码修改实时同步到磁盘
• 遇到异常时，尝试重启VS Code和Chrome，不少情况是编辑器或浏览器的进程缓存导致的临时问题
• 在app.js开头添加测试代码console.log('app.js 加载成功')，快速验证文件是否正常加载

本次自动恢复的原因分析 #

大概率是临时的浏览器缓存、编辑器未及时保存、或者本地杀毒软件/后台程序锁定了app.js文件，这类临时占用或缓存问题会自行解除，导致次日恢复正常。

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