为何showDirectoryPicker会挂起？网页文件夹扫描功能异常求助

以下是针对showDirectoryPicker()未返回问题的排查方向：

• 检查运行环境与兼容性
  File System Access API仅支持HTTPS环境（localhost可例外），且需要浏览器版本满足要求：Chrome/Edge 86+，Firefox需手动开启dom.fs.enabled配置。另外，浏览器隐私模式可能限制API功能，建议在常规模式下测试。

• 添加错误捕获排查具体问题
  当前代码未对showDirectoryPicker()的调用做异常处理，若授权过程中出现错误（如权限被隐性拒绝、浏览器内部异常），会导致await卡住且无日志输出。修改代码添加try/catch：

  jQuery(document).ready(function ($) {
    const butDir = document.getElementById('butDirectory');
    butDir.addEventListener('click', async() => {
      console.log("1");
      try {
        const dirHandle = await window.showDirectoryPicker();
        console.log("2");
        const promises = [];
        for await (const entry of dirHandle.values()) {
          if (entry.kind !== 'file') {
            continue;
          }
          promises.push(entry.getFile().then((file) => `${file.name} (${file.size})`));
        }
        console.log(await Promise.all(promises));
      } catch (err) {
        console.error('目录选择失败:', err);
      }
    });
  });
  

  运行后查看控制台的错误信息，这是定位问题最直接的方式。

• 排查扩展与隐私设置干扰
  广告拦截器、隐私类浏览器扩展（如uBlock Origin、Privacy Badger）可能会阻止API的权限请求或执行。临时禁用所有扩展，同时检查浏览器设置中“网站访问文件系统”的权限是否开启。

• 隔离测试排除代码冲突
  编写极简独立测试代码，排除jQuery或其他页面代码的干扰：

  <button id="testBtn">选择目录</button>
  <script>
    document.getElementById('testBtn').addEventListener('click', async () => {
      console.log('1');
      try {
        const dir = await window.showDirectoryPicker();
        console.log('2', dir.name);
      } catch (e) {
        console.error('错误详情:', e);
      }
    });
  </script>
  

  若该测试代码能正常运行，说明原问题是页面其他代码冲突导致。

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