對 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 位於非同步世界中 (除非您在 Worker 中使用同步版本)。一律在 API 呼叫中使用錯誤回呼。可自行決定是否採用,不過之後遇到爆炸時,就可以避免受到痛苦。