對 Filesystem API 進行偵錯

HTML5 檔案系統是功能強大的 API，強大功能越強大，運作難度就越高。複雜程度漸入佳，因此在偵錯時很容易造成困擾。很抱歉，Chrome DevTools目前不支援 Filesystem API。這會導致偵錯作業困難。對我而言，這是要求編寫程式碼以列出/移除檔案系統中的檔案。

在使用 Filesystem API 的簽署人的過程中，我學到了一些小訣竅，希望能夠順利交流。每個提示都有各自的限制，但只要搭配使用這些資料，將能達到 90% 的目標。以下是前 5 名：

  1. 請確認您並非在 file:// 中執行。這是很多人會不知所措。Chrome 對 file:// 設有重大安全性限制。如果您是透過 file:// 在本機執行應用程式，許多進階檔案 API (BlobBuilder、FileReader、Filesystem API...) 都會擲回錯誤或失敗，而且不會顯示相關通知。如果您沒有網路伺服器，可以透過 --allow-file-access-from-files 旗標啟動 Chrome，以便略過這項安全性限制。此旗標僅供測試之用。

  2. 潛藏的 SECURITY_ERR 或 QUOTA_EXCEEDED_ERR。這通常是在嘗試寫入資料時發生了問題，但您可能會受到 #1 的影響。如果不是，則可能代表您沒有配額。檔案系統可透過 TEMPORARY 或 PERSISTENT 開啟，分為兩種類型。如果您使用的是後者，則使用者必須明確授予應用程式永久儲存空間。相關操作說明請參閱這篇文章。

  3. filesystem: 網址 FTW。開啟應用程式來源根 DirectoryEntry 的 filesystem: 網址會很方便。代表什麼意思？舉例來說，如果應用程式位於 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 位於非同步世界中 (除非您在 Worker 中使用同步版本)。一律在 API 呼叫中使用錯誤回呼。可自行決定是否採用，不過之後遇到爆炸時，就可以避免受到痛苦。