HTML5 ファイルシステムは強力な API です。パワーには複雑さが伴います。複雑さが増すほど、デバッグが難しくなります。残念ながら、現在のところ Chrome DevTools では FileSystem API がサポートされていません。デバッグが本来あるべき状態より難しくなります。難しいとは、ファイル システム内のファイルを一覧表示または削除するコードを記述する必要があることを意味します。
Filesystem API の開発中に、いくつかのヒントを得たので、ここで紹介したいと思います。各ヒントには独自の制限事項がありますが、これらのヒントを組み合わせることで、90% の作業を完了できます。上位 5 件は次のとおりです。
file://から実行されていないことを確認します。これは、多くの人が騙される巧妙な手口です。Chrome では、file://に大きなセキュリティ制限が適用されます。file://からローカルでアプリを実行すると、高度なファイル API（BlobBuilder、FileReader、Filesystem API など）の多くがエラーをスローするか、サイレント エラーになります。ウェブサーバーが手元にない場合は、--allow-file-access-from-filesフラグを使用して Chrome を起動することで、このセキュリティ制限を回避できます。このフラグはテスト目的でのみ使用してください。恐ろしい
SECURITY_ERRまたはQUOTA_EXCEEDED_ERR。これは通常、データを書き込もうとしているときに #1 の影響を受けている場合に発生します。そうでない場合は、割り当てがない可能性があります。ファイルシステムを開くことができる割り当てには、TEMPORARYとPERSISTENTの 2 種類があります。後者を使用している場合は、ユーザーがアプリに永続ストレージを明示的に付与する必要があります。その方法については、こちらの投稿をご覧ください。filesystem:URL FTW。アプリのオリジンのルートDirectoryEntryのfilesystem:URL を開くと便利です。これは何を意味するのでしょうか。たとえば、アプリがwww.example.comにある場合は、filesystem:http://www.example.com/temporary/を新しいタブで開きます。Chrome には、アプリのオリジンに保存されているファイル/フォルダの読み取り専用リストが表示されます。filesystem:URL の詳細については、https://www.html5rocks.com/en/tutorials/file/filesystem/#toc-filesystemurls をご覧ください。chrome://settings/cookiesはあなたの友達です。このページでは、オリジンに保存されているデータを削除できます。これには、データベース ストレージ、AppCache、Cookie、localStorage、FileSystem API のコンテンツが含まれます。ただし、この設定は「オール オア ナッシング」です。1 つのファイルやデータのみを削除することはできません。エラー コールバックも忘れずに。Filesystem API は非同期の世界で動作します（Worker で同期バージョンを使用している場合を除きます）。API 呼び出しでは、常にエラー コールバックを使用してください。これらは省略可能ですが、後で問題が発生した場合に備えて設定しておくことをおすすめします。