Men-debug Filesystem API

Sistem File HTML5 adalah API yang canggih. Dengan kekuatan, muncul kerumitan. Dengan kompleksitas yang semakin tinggi, masalah saat proses debug meningkat. Sayang sekali, saat ini Chrome DevTools tidak memiliki dukungan untuk Filesystem API. Hal ini membuat proses debug menjadi lebih sulit dari yang seharusnya. Yang saya maksud adalah keharusan menulis kode untuk membuat daftar/menghapus file dalam sistem file.

Selama upaya dengan Filesystem API, saya belajar beberapa tips yang mungkin akan saya berikan. Setiap tips memiliki serangkaian batasannya sendiri, tetapi menggunakan kombinasi ini akan membuat Anda 90%. Berikut adalah 5 teratas:

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

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

  3. FTW URL filesystem:. Sebaiknya buka URL filesystem: untuk DirectoryEntry root asal aplikasi Anda. Apa artinya? Misalnya, jika aplikasi Anda ada di www.example.com, buka filesystem:http://www.example.com/temporary/ di tab baru. Chrome akan menampilkan daftar hanya baca untuk file/folder yang menyimpan asal aplikasi Anda. Untuk info 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 melakukan nukes pada data yang disimpan untuk suatu origin. Termasuk penyimpanan database, AppCache, cookie, localStorage, dan hal-hal di FileSystem API. Harus diperingatkan, ini adalah semua atau tidak ada sama sekali. Anda tidak dapat menghapus hanya satu file atau beberapa data.

  5. Jangan lupakan callback error. Filesystem API berada di dunia asinkron (kecuali jika Anda menggunakan versi sinkronisasi di Pekerja). Selalu gunakan callback error dalam panggilan API Anda. Hal ini bersifat opsional, tetapi Anda akan menghemat banyak kesedihan saat keadaan meledak.