Cómo depurar la API del sistema de archivos

El sistema de archivos HTML5 es una API potente. Con el poder, viene la complejidad. Con la complejidad, vienen más frustraciones de depuración. Lamentablemente, las DevTools de Chrome no son compatibles con la API de Filesystem. Esto hace que la depuración sea más difícil de lo que debería ser. Cuando digo difícil, me refiero a que debes escribir código para enumerar o quitar archivos del sistema de archivos.

Durante mis esfuerzos con la API de Filesystem, aprendí algunas sugerencias que me gustaría compartir. Cada sugerencia tiene su propio conjunto de limitaciones, pero usar una combinación de ellas te permitirá avanzar un 90%. Estos son los 5 principales:

  1. Asegúrate de no ejecutar desde file://. Esta es una estafa engañosa que afecta a muchas personas. Chrome impone restricciones de seguridad importantes en 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 forma local desde file://. Si no tienes un servidor web a mano, Chrome se puede iniciar con la marca --allow-file-access-from-files para omitir esta restricción de seguridad. Usa esta marca solo con fines de prueba.

  2. El temido SECURITY_ERR o QUOTA_EXCEEDED_ERR. Esto suele ocurrir cuando intentas escribir datos, pero estás bajo la influencia del punto 1. Si no es así, es probable que no tengas cuota. Existen 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 a tu app de forma explícita. Consulta esta publicación para saber cómo hacerlo.

  3. filesystem: URL FTW. Es útil abrir la URL de filesystem: para el DirectoryEntry raíz 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 o 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 borrar los datos almacenados para un origen. Esto incluye el almacenamiento de bases de datos, AppCache, cookies, localStorage y elementos de la API de FileSystem. Sin embargo, ten en cuenta que es una opción de todo o nada. No puedes quitar solo un archivo o datos.

  5. No te olvides de las devoluciones de llamada de error. La API de Filesystem se encuentra en un mundo asíncrono (a menos que uses la versión sincronizada en los trabajadores). Siempre usa la devolución de llamada de error en tus llamadas a la API. Son opcionales, pero te ahorrarán muchos problemas más adelante cuando todo explote.