Cómo depurar la API del sistema de archivos

El sistema de archivos HTML5 es una API potente. El poder conlleva la complejidad. Con la complejidad, surgen más frustraciones de depuración. Lamentablemente, las DevTools de Chrome por el momento no son compatibles con la API del sistema de archivos. Hace que la depuración sea más difícil de lo que debería ser. Por dificultad, me refiero a tener que escribir código para enumerar/quitar archivos del sistema de archivos.

Durante mis mejores pasos con la API de Filesystem, obtuve un par de sugerencias que pensé en transmitir. Cada sugerencia tiene sus propias limitaciones, pero si combinas ambas opciones, obtendrás el 90% del tiempo. Estas son las 5 principales:

  1. Asegúrate de no ejecutar desde file://. Este es un tema engañoso que a mucha gente le cae mal. Chrome impone importantes restricciones de seguridad a file://. Muchas de las APIs de archivos avanzadas (BlobBuilder, FileReader, API de Filesystem, etc.) arrojan errores o fallan de forma silenciosa si ejecutas la app de manera local desde file://. Si no tienes un servidor web a mano, puedes iniciar Chrome con la marca --allow-file-access-from-files para evitar esta restricción de seguridad. Usa esta marca solo para realizar pruebas.

  2. El temido SECURITY_ERR o QUOTA_EXCEEDED_ERR. Esto suele suceder cuando se intenta escribir datos, pero estás bajo la influencia del punto 1. Si ese no es el caso, es probable que no tengas cuota. Hay dos tipos de cuota con los que se puede abrir el sistema de archivos: TEMPORARY o PERSISTENT. Si usas la última opción, el usuario debe otorgar almacenamiento persistente de manera explícita a tu app. Consulta esta publicación para descubrir cómo hacerlo.

  3. URL de filesystem:: FTW Es útil abrir la URL filesystem: para la raíz DirectoryEntry del origen de tu app. ¿Qué significa eso? Por ejemplo, si tu app se encuentra en www.example.com, abre filesystem:http://www.example.com/temporary/ en una pestaña nueva. Chrome mostrará una lista de solo lectura de los archivos y las carpetas almacenados en el origen de tu app. Para obtener más información sobre las URLs de filesystem:, consulta https://www.html5rocks.com/en/tutorials/file/filesystem/#toc-filesystemurls.

  4. chrome://settings/cookies es tu amigo. Esta página te permite anular los datos almacenados para un origen. Eso incluye el almacenamiento de la base de datos, AppCache, cookies, localStorage y cosas en la API de FileSystem. Sin embargo, ten cuidado, es todo o nada. No puedes quitar solo un archivo o datos.

  5. No olvides las devoluciones de llamada de error. La API de Filesystem se encuentra en un mundo asíncrono (a menos que uses la versión de sincronización en Workers). Usa siempre la devolución de llamada de error en tus llamadas a la API. Son opcionales, pero te ahorrarás mucho dolor más adelante cuando las cosas se vuelvan a explotar.