How to list all files in a browser’s Origin Private File System

In case you’re working with the Origin Private File System on a browser whose dev tools don’t yet support browsing the files (all browsers as of Nov 2023, though Chrome does have an unofficial extension which is nice), then here’s a code snippet you can use to list all the contents of the file system

listDirectoryContents = async (directoryHandle, depth) => {
  depth = depth || 1;
  directoryHandle = directoryHandle || await navigator.storage.getDirectory();
  const entries = await directoryHandle.values();

  for await (const entry of entries) {
    // Add proper indentation based on the depth
    const indentation = '  '.repeat(depth);

    if (entry.kind === 'directory') {
      // If it's a directory, log its name 
      // and recursively list its contents
      console.log(`${indentation}${entry.name}/`);
      await listDirectoryContents(entry, depth + 1);
    } else {
      // If it's a file, log its name
      console.log(`${indentation}${entry.name}`);
    }
  }
}