怎麼查 OPFS 裡有哪些檔案

OPFS 在 Finder 裡看不到（見 OPFS 不在使用者的檔案系統裡，所以快，也所以找不到），只能問瀏覽器。

最可靠：在該網站的 Console 跑

跨瀏覽器都能用，不依賴任何工具：

const walk = async (dir = await navigator.storage.getDirectory(), path = '') => {
  for await (const h of dir.values()) {
    const p = `${path}/${h.name}`;
    if (h.kind === 'file') {
      const f = await h.getFile();
      console.log(`📄 ${p}  ${f.size} bytes  ${new Date(f.lastModified).toLocaleString()}`);
    } else {
      console.log(`📁 ${p}/`);
      await walk(h, p);
    }
  }
};
await walk();

沒輸出就是空的——OPFS 預設是空目錄。

圖形介面

先看 DevTools → Application 面板有沒有內建的檔案系統項目；沒有的話裝 OPFS Explorer Chrome 擴充功能，DevTools 會多一個分頁，可以看階層、點檔名把檔案存到真正的檔案系統、點垃圾桶刪除。

Safari 和 Firefox 沒有對應的擴充功能，所以上面那段 script 才是通用解。

兩個前提，搞錯就會看到空的

① OPFS 綁 origin，Console 必須連在那個頁面上。

https://example.com/a  ┐
https://example.com/b  ┘ 同一份

https://app.example.com  ← 完全不同的一份（子網域也算不同 origin）

② 跨來源 iframe 有自己的一份。 要查的東西如果是某個嵌入的 iframe 寫的，DevTools Console 的執行環境要先切到那個 iframe。

清空

await (await navigator.storage.getDirectory()).remove({ recursive: true });

會直接刪光，沒有確認。 remove() 目前是 Chrome 實作的（可用 'remove' in FileSystemFileHandle.prototype 偵測），其他瀏覽器要用 removeEntry() 逐個刪。