Men-debug Filesystem API

Sistem File HTML5 adalah API yang canggih. Kekuatan akan menimbulkan kompleksitas. Dengan kompleksitas, akan ada lebih banyak frustrasi proses debug. Sayangnya, DevTools Chrome saat ini tidak memiliki dukungan untuk Filesystem API. Hal ini membuat proses debug menjadi lebih sulit dari yang seharusnya. Yang dimaksud dengan sulit adalah diwajibkan untuk menulis kode guna mencantumkan/menghapus file dalam sistem file.

Selama upaya saya dengan Filesystem API, saya mendapatkan beberapa tips yang ingin saya sampaikan. Setiap tips memiliki serangkaian batasan tersendiri, tetapi menggunakan kombinasi dari tips ini akan membantu Anda mencapai 90% dari tujuan. Berikut 5 teratas:

  1. Pastikan Anda tidak menjalankan dari file://. Ini adalah masalah tersembunyi yang banyak dialami orang. Chrome menerapkan pembatasan keamanan utama pada file://. Banyak API file lanjutan (BlobBuilder, FileReader, Filesystem API,...) menampilkan error atau gagal secara diam-diam jika Anda menjalankan aplikasi secara lokal dari file://. Jika Anda tidak memiliki server web, Chrome dapat dimulai dengan tanda --allow-file-access-from-files untuk mengabaikan batasan keamanan ini. Hanya gunakan tanda ini untuk tujuan pengujian.

  2. SECURITY_ERR atau QUOTA_EXCEEDED_ERR yang ditakuti. Hal ini biasanya terjadi saat mencoba menulis data, tetapi Anda berada di bawah pengaruh #1. Jika tidak, kemungkinan Anda tidak memiliki kuota. Ada dua jenis kuota yang dapat digunakan untuk membuka sistem file, yaitu TEMPORARY atau PERSISTENT. Jika Anda menggunakan yang terakhir, pengguna harus memberikan penyimpanan persisten secara eksplisit ke aplikasi Anda. Lihat postingan ini tentang cara melakukannya.

  3. URL filesystem: FTW. Buka URL filesystem: untuk DirectoryEntry root asal aplikasi Anda. Apa artinya? Misalnya, jika aplikasi Anda berada di www.example.com, buka filesystem:http://www.example.com/temporary/ di tab baru. Chrome akan menampilkan daftar file/folder yang disimpan asal aplikasi Anda yang bersifat hanya baca. Untuk mengetahui informasi selengkapnya tentang URL filesystem:, lihat https://www.html5rocks.com/en/tutorials/file/filesystem/#toc-filesystemurls.

  4. chrome://settings/cookies adalah teman Anda. Halaman ini memungkinkan Anda menghapus data yang disimpan untuk origin. Hal ini mencakup penyimpanan database, AppCache, cookie, localStorage, dan hal-hal di FileSystem API. Namun, perhatikan bahwa Anda harus menyelesaikan proses ini atau tidak melakukannya sama sekali. Anda tidak dapat menghapus hanya satu file atau bagian data.

  5. Jangan lupa callback error. Filesystem API berada di dunia asinkron (kecuali jika Anda menggunakan versi sinkron di Pekerja). Selalu gunakan callback error dalam panggilan API Anda. Hal ini bersifat opsional, tetapi Anda akan terhindar dari banyak masalah di kemudian hari saat terjadi masalah.