Como depurar a API Filesystem

O sistema de arquivos HTML5 é uma API poderosa. Com o poder, vem a complexidade. Com a complexidade, há mais frustrações de depuração. Infelizmente, as DevTools do Chrome não têm suporte para a API Filesystem. Isso dificulta a depuração. Com "difícil", quero dizer que é necessário escrever código para listar/remover arquivos no sistema de arquivos.

Durante meus esforços com a API Filesystem, aprendi algumas dicas que gostaria de compartilhar. Cada dica tem um conjunto de limitações, mas usar uma combinação delas vai ajudar muito. Confira os 5 principais:

  1. Verifique se você não está executando o programa em file://. Essa é uma pegadinha que muitas pessoas caem. O Chrome impõe restrições de segurança importantes ao file://. Muitas das APIs de arquivos avançadas (BlobBuilder, FileReader, API Filesystem etc.) geram erros ou falham silenciosamente se você executar o app localmente em file://. Se você não tiver um servidor da Web disponível, o Chrome poderá ser iniciado com a flag --allow-file-access-from-files para contornar essa restrição de segurança. Use essa flag apenas para fins de teste.

  2. O temido SECURITY_ERR ou QUOTA_EXCEEDED_ERR. Isso geralmente acontece ao tentar gravar dados, mas você está sob a influência da #1. Caso contrário, é provável que você não tenha cota. Há dois tipos de cota com que o sistema de arquivos pode ser aberto: TEMPORARY ou PERSISTENT. Se você estiver usando o segundo, o usuário precisa conceder explicitamente o armazenamento persistente ao app. Consulte este post para saber como fazer isso.

  3. URL filesystem: FTW. É útil abrir o URL filesystem: para o DirectoryEntry raiz da origem do app. O que isso significa? Por exemplo, se o app estiver em www.example.com, abra filesystem:http://www.example.com/temporary/ em uma nova guia. O Chrome vai mostrar uma lista somente leitura dos arquivos/pastas armazenados na origem do app. Para mais informações sobre URLs filesystem:, consulte https://www.html5rocks.com/en/tutorials/file/filesystem/#toc-filesystemurls.

  4. chrome://settings/cookies é seu amigo. Nesta página, você pode excluir os dados armazenados de uma origem. Isso inclui armazenamento de banco de dados, AppCache, cookies, localStorage e outras coisas na API FileSystem. Mas é tudo ou nada. Não é possível remover apenas um arquivo ou partes de dados.

  5. Não se esqueça dos callbacks de erro. A API Filesystem funciona em um mundo assíncrono (a menos que você esteja usando a versão sincronizada nos workers). Sempre use o callback de erro nas chamadas de API. Elas são opcionais, mas você vai se poupar de muita dor de cabeça mais tarde, quando as coisas explodirem.