Como depurar a API Filesystem

O sistema de arquivos HTML5 é uma API avançada. Com o poder, vem a complexidade. Com complexidade, vem mais frustrações de depuração. É um fato que o DevTools Chrome não é compatível com a API Filesystem. Isso dificulta a depuração. Por difícil, quero dizer ser obrigado a escrever código para listar/remover arquivos do sistema de arquivos.

Durante meus trabalhos com a API Filesystem, peguei algumas dicas no caminho e pensei em repassar. Cada dica tem suas próprias limitações, mas usar uma combinação delas representa 90% do caminho. Aqui estão os 5 principais:

  1. Verifique se a execução não é de file://. Esse é um tipo distorcido que muitas pessoas passam. O Chrome impõe grandes restrições de segurança ao file://. Muitas das APIs avançadas de arquivos (BlobBuilder, FileReader, API Filesystem etc.) geram erros ou falham silenciosamente se você executar o app localmente em file://. Caso você não tenha um servidor da Web disponível, o Chrome pode ser iniciado com a flag --allow-file-access-from-files para ignorar essa restrição de segurança. Use essa sinalização 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 do número 1. Se esse não for o caso, é provável que você não tenha cota. Há dois tipos de cota que podem ser usados para abrir o sistema de arquivos: TEMPORARY ou PERSISTENT. Se você estiver usando a segunda opção, o usuário precisará conceder explicitamente o armazenamento permanente ao seu app. Veja como fazer isso nesta postagem.

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

  4. chrome://settings/cookies é seu amigo. Esta página permite excluir os dados armazenados para uma origem. Isso inclui armazenamento de banco de dados, AppCache, cookies, localStorage e recursos da API FileSystem. Fique atento, isso é tudo ou nada. Não é possível remover apenas um arquivo ou dados.

  5. Não se esqueça dos callbacks de erro. A API Filesystem fica em um mundo assíncrono, a menos que você esteja usando a versão de sincronização nos workers. Sempre use o callback de erro nas chamadas de API. Elas são opcionais, mas você evitará muito luto no futuro, quando as coisas explodirem.