VS Code Live Server中JavaScript脚本失效问题求助

• 检查脚本引用路径
  先确认index.html里引用该文件夹折叠脚本的路径是否正确。比如脚本实际在js/folder-collapse.js，你是不是写成了folder-collapse.js？或者路径大小写有误（本地文件系统可能不区分大小写，但Live Server运行的本地服务器会严格区分）。打开浏览器控制台的Network标签，刷新页面，查看该脚本的请求状态，如果是404，直接修正路径即可。

• 确认脚本执行时机
  文件夹折叠逻辑大概率依赖DOM元素加载完成后才能执行。如果你的脚本放在<head>标签里，或者没加DOM加载监听，index.html的DOM还没渲染完毕脚本就已执行，自然找不到目标元素导致失效。可以把脚本引用放在</body>标签前，或者在脚本里包裹DOM加载监听：

  document.addEventListener('DOMContentLoaded', function() {
    // 你的文件夹折叠代码写在这里
  });
  

  直接打开脚本文件时，脚本里的测试逻辑可能是针对页面内现成元素编写的，所以能正常运行，但在index.html的复杂页面环境下，必须等DOM加载完成再执行。

• 排查脚本冲突
  看看index.html里是否有其他JS脚本和折叠脚本存在冲突，比如修改了相同DOM元素、覆盖了变量或函数名。可以先暂时注释掉其他所有脚本，只保留折叠脚本测试是否生效。如果生效了，再逐个恢复其他脚本，定位出冲突的那个文件。

• 检查Live Server根目录配置
  偶尔Live Server的根目录设置错误会导致资源路径解析异常。打开VS Code设置，搜索Live Server: Root，确认设置的根目录是你的项目根文件夹（比如index.html在项目根目录，就设为/或留空），如果之前修改过这个配置，改回默认值试试。

• 查看浏览器控制台报错
  按下F12打开OperaGX的开发者工具，切换到Console标签，刷新页面，查看是否有红色报错信息。比如Cannot read properties of null (reading 'addEventListener')这类提示，直接说明脚本找不到目标DOM元素，要么是路径错了，要么是DOM没加载完就执行了脚本。

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