Debug dell'API Filesystem

Il file system HTML5 è un'API potente. La potenza aumenta la complessità. La complessità comporta maggiori frustrazioni per il debug. Purtroppo gli DevTools di Chrome attualmente non supportano l'API Filesystem. Pertanto, il debug è più difficile del dovuto. Per difficile, intendo dire che mi viene richiesto di scrivere codice per elencare/rimuovere i file nel file system.

Durante la mia esibizione con l'API Filesystem, ho raccolto un paio di suggerimenti che ho pensato di condividere. Ogni suggerimento ha i suoi limiti, ma l'utilizzo di una combinazione di questi limiti ti permetterà di ottenere il 90% del percorso. Ecco i primi 5:

  1. Assicurati di non eseguire da file://. Si tratta di un video furtivo che porta molte persone. Chrome impone importanti limitazioni di sicurezza su file://. Molte API avanzate dei file (BlobBuilder, FileReader, API Filesystem...) restituiscono errori o non funzionano automaticamente se esegui l'app localmente da file://. Se non hai un server web a portata di mano, puoi avviare Chrome con il flag --allow-file-access-from-files per bypassare questa limitazione di sicurezza. Utilizza questo flag solo a scopo di test.

  2. Il temuto SECURITY_ERR o QUOTA_EXCEEDED_ERR. Questo accade di solito quando cerchi di scrivere dati ma sei sotto l'influenza del numero 1. In caso contrario, è probabile che tu non abbia la quota disponibile. Esistono due tipi di quota con cui è possibile aprire il file system: TEMPORARY o PERSISTENT. Se utilizzi la seconda versione, l'utente deve concedere esplicitamente lo spazio di archiviazione permanente alla tua app. Per sapere come fare, leggi questo post.

  3. filesystem: URL FTW. È utile aprire l'URL filesystem: per il DirectoryEntry principale dell'origine dell'app. Che cosa significa? Ad esempio, se la tua app è su www.example.com, apri filesystem:http://www.example.com/temporary/ in una nuova scheda. Chrome mostrerà un elenco di sola lettura dei file/delle cartelle archiviati nell'origine della tua app. Per ulteriori informazioni sugli URL di filesystem:, visita la pagina https://www.html5rocks.com/en/tutorials/file/filesystem/#toc-filesystemurls.

  4. chrome://settings/cookies è tuo amico. Questa pagina ti consente di eliminare i dati archiviati per un'origine. Ciò include spazio di archiviazione del database, AppCache, cookie, localStorage e altri contenuti nell'API FileSystem. Tieni presente che è tutto o niente. Non puoi rimuovere uno o più dati:

  5. Non dimenticare i callback di errore. L'API Filesystem si trova in un mondo asincrono (a meno che non utilizzi la versione di sincronizzazione in Workers). Usa sempre il callback di errore nelle chiamate API. Sono facoltativi, ma ti eviterai molto dolore quando le cose esplodono.