调试 Filesystem API

HTML5 文件系统是一个功能强大的 API。能力越强,复杂性也随之而来。复杂性带来更高的调试负担。遗憾的是,Chrome DevTools目前不支持 Filesystem API。这使得调试变得更加困难。我的意思是,需要编写代码以列出/移除文件系统中的文件。

在使用 Filesystem API 进行研究过程中,我学到了几个技巧,我想要传下去。每条提示都有其自身的一系列限制,但结合使用这些提示,可以达到 90% 的效果。前 5 项建议如下:

  1. 确保您未使用 file:// 投放广告。这是一个相当欺骗性的渠道,很多人都会遇到。Chrome 对 file:// 施加了重大的安全限制。如果您在本地从 file:// 运行应用,许多高级文件 API(BlobBuilderFileReader、Filesystem API 等)都会抛出错误或静默失败。如果您手头没有网络服务器,可以使用 --allow-file-access-from-files 标记启动 Chrome,以绕过此安全限制。此标志仅用于测试目的。

  2. 可怕的 SECURITY_ERRQUOTA_EXCEEDED_ERR。这种情况通常发生在尝试写入数据时,但会受第 1 种因素的影响。否则,可能是因为您没有配额。打开文件系统的配额有两种:TEMPORARYPERSISTENT。如果您使用的是后者,用户需要明确向您的应用授予永久性存储空间。请参阅这篇博文了解如何执行此操作。

  3. filesystem: 网址 FTW。打开应用源的根 DirectoryEntryfilesystem: 网址非常方便。这是什么意思?例如,如果您的应用位于 www.example.com,请在新标签页中打开 filesystem:http://www.example.com/temporary/。Chrome 会以只读列表形式显示存储在您的应用来源的文件/文件夹。如需详细了解 filesystem: 网址,请参阅 https://www.html5rocks.com/en/tutorials/file/filesystem/#toc-filesystemurls

  4. chrome://settings/cookies 是您的朋友。通过此页面,您可以删除为源存储的数据。这包括数据库存储、AppCache、Cookie、localStorage 以及 FileSystem API 中的内容。不过要提前预警,大干一场或一无所有。您无法仅移除一个文件或多项数据。

  5. 不要忘记错误回调。Filesystem API 处于异步世界中(除非您在工作器中使用同步版本)。请务必在 API 调用中使用错误回调。它们是可选的,但当事情爆炸时,你会很伤心。