對 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. 別忘了錯誤回呼。檔案系統 API 位於非同步世界 (除非您在 worker 中使用同步版本)。請一律在 API 呼叫中使用錯誤回呼。這些步驟並非必要，但日後發生問題時，您就不會感到太過頭痛。