Déboguer l'API Filesystem

Le système de fichiers HTML5 est une API puissante. La puissance s'accompagne de la complexité. La complexité s'accompagne davantage de frustrations liées au débogage. Malheureusement, les DevTools Chrome ne sont actuellement pas compatibles avec l'API Filesystem. Cela rend le débogage plus difficile qu'il ne devrait l'être. Par difficulté, j’entends être obligé d’écrire du code pour lister/supprimer des fichiers dans le système de fichiers.

Au cours de mes tests avec l'API Filesystem, j'ai pris connaissance de quelques conseils que je pensais transmettre. Chaque conseil a ses propres limites, mais en combinant celles-ci, vous obtiendrez 90% du chemin. Voici le top 5:

  1. Vérifiez que vous n'êtes pas en cours d'exécution depuis file://. C’est une question sournoise que beaucoup de gens ne comprennent pas. Chrome impose d'importantes restrictions de sécurité à file://. De nombreuses API de fichiers avancées (BlobBuilder, FileReader, API Filesystem, etc.) génèrent des erreurs ou échouent en mode silencieux si vous exécutez l'application localement à partir de file://. Si vous n'avez pas de serveur Web à portée de main, vous pouvez lancer Chrome avec l'indicateur --allow-file-access-from-files pour contourner cette restriction de sécurité. N'utilisez cet indicateur qu'à des fins de test.

  2. Le SECURITY_ERR ou le QUOTA_EXCEEDED_ERR redouté. Cela se produit généralement lorsque vous tentez d'écrire des données, mais vous êtes sous l'influence du n° 1. Si ce n'est pas le cas, il est probable que vous ne disposiez pas de quota. Vous pouvez ouvrir le système de fichiers avec deux types de quotas : TEMPORARY ou PERSISTENT. Avec cette dernière option, l'utilisateur doit explicitement accorder un espace de stockage persistant à votre application. Consultez cet article pour savoir comment procéder.

  3. filesystem: URL FTW. Vous pouvez ouvrir l'URL filesystem: de la racine DirectoryEntry de l'origine de votre application. Qu'est-ce que cela signifie ? Par exemple, si votre application se trouve sur www.example.com, ouvrez filesystem:http://www.example.com/temporary/ dans un nouvel onglet. Chrome affiche une liste en lecture seule des fichiers/dossiers stockés à l'origine de votre application. Pour en savoir plus sur les URL filesystem:, consultez la page https://www.html5rocks.com/en/tutorials/file/filesystem/#toc-filesystemurls.

  4. chrome://settings/cookies est votre ami(e). Cette page vous permet d'effectuer une commande nucléaire sur les données stockées pour une origine. Cela inclut le stockage de la base de données, AppCache, les cookies, localStorage et le contenu de l'API FileSystem. Soyez prévenu cependant, c'est une question de tout ou rien. Vous ne pouvez pas supprimer un seul fichier ou des éléments de données.

  5. N'oubliez pas les rappels d'erreur. L'API Filesystem est asynchrone (sauf si vous utilisez la version de synchronisation dans "Workers"). Utilisez toujours un rappel d'erreur dans vos appels d'API. Ils sont facultatifs, mais vous éviterez beaucoup de chagrin par la suite en cas d'incident.