Cette page a été traduite par l'API Cloud Translation.

Déboguer l'API Filesystem

Eric Bidelman

Le fichier système HTML5 est une API puissante. La puissance s'accompagne de complexité. La complexité entraîne plus de frustrations lors du débogage. Malheureusement, les DevTools Chrome ne sont pas compatibles avec l'API Filesystem pour le moment. Cela rend le débogage plus difficile qu'il ne devrait l'être. Par "difficile", j'entends que vous devez écrire du code pour lister/supprimer des fichiers dans le système de fichiers.

Au cours de mes efforts avec l'API Filesystem, j'ai recueilli quelques conseils que je voulais partager. Chaque conseil présente ses propres limites, mais en combinant plusieurs d'entre eux, vous pouvez atteindre 90% de votre objectif. Voici les cinq premiers:

Assurez-vous de ne pas exécuter le code à partir de file://. Il s'agit d'un piège insidieux qui touche de nombreuses personnes. Chrome impose des restrictions de sécurité importantes sur file://. De nombreuses API de fichiers avancées (BlobBuilder, FileReader, API de système de fichiers, etc.) génèrent des erreurs ou échouent de manière silencieuse si vous exécutez l'application localement à partir de file://. Si vous ne disposez pas d'un serveur Web à portée de main, vous pouvez démarrer 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.
Le redoutable SECURITY_ERR ou QUOTA_EXCEEDED_ERR. Cela se produit généralement lorsque vous essayez d'écrire des données, mais que vous êtes soumis à l'influence du point 1. Si ce n'est pas le cas, il est probable que vous n'ayez pas de quota. Le système de fichiers peut être ouvert avec deux types de quotas : TEMPORARY ou PERSISTENT. Si vous utilisez ce dernier, l'utilisateur doit accorder explicitement un espace de stockage persistant à votre application. Pour savoir comment procéder, consultez cet article.
URL filesystem: FTW. Il est pratique d'ouvrir l'URL filesystem: pour le DirectoryEntry racine 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 dans 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.
chrome://settings/cookies est votre ami. Cette page vous permet de supprimer les données stockées pour une origine. Cela inclut le stockage de base de données, AppCache, les cookies, le localStorage et les éléments de l'API FileSystem. Sachez toutefois que c'est une question de tout ou rien. Vous ne pouvez pas supprimer un seul fichier ou des éléments de données.
N'oubliez pas les rappels d'erreur. L'API Filesystem évolue dans un monde asynchrone (sauf si vous utilisez la version synchronisée dans les workers). Utilisez toujours un rappel d'erreur dans vos appels d'API. Ces étapes sont facultatives, mais elles vous éviteront bien des ennuis plus tard si vous rencontrez des problèmes.