Foutopsporing in de bestandssysteem-API

Het HTML5-bestandssysteem is een krachtige API. Met kracht komt complexiteit. Met de complexiteit komen er meer frustraties bij het opsporen van fouten. Het is een ongelukkig feit dat de Chrome DevTools momenteel geen ondersteuning bieden voor de Filesystem API. Het maakt het debuggen moeilijker dan het zou moeten zijn. Met moeilijk bedoel ik dat je code moet schrijven om bestanden in het bestandssysteem weer te geven/te verwijderen.

Tijdens mijn pogingen met de Bestandssysteem-API heb ik onderweg een aantal tips opgepikt die ik dacht te kunnen doorgeven. Elke tip heeft zijn eigen beperkingen, maar als u een combinatie hiervan gebruikt, krijgt u 90% van de weg. Hier zijn de top 5:

  1. Zorg ervoor dat u niet vanuit file:// werkt . Dit is een stiekeme kwestie waar veel mensen door gebeten worden. Chrome legt grote beveiligingsbeperkingen op voor file:// . Veel van de geavanceerde bestands-API's ( BlobBuilder , FileReader , Filesystem API,...) genereren fouten of mislukken stil als u de app lokaal uitvoert vanuit file:// . Als u geen webserver bij de hand heeft, kan Chrome worden gestart met de vlag --allow-file-access-from-files om deze beveiligingsbeperking te omzeilen. Gebruik deze vlag alleen voor testdoeleinden.

  2. De gevreesde SECURITY_ERR of QUOTA_EXCEEDED_ERR . Dit gebeurt meestal wanneer u gegevens probeert te schrijven, maar u onder invloed bent van #1. Als dat niet het geval is, dan is de kans groot dat u geen quotum heeft. Er zijn twee soorten quota waarmee het bestandssysteem kan worden geopend: TEMPORARY of PERSISTENT . Als u dit laatste gebruikt, moet de gebruiker expliciet permanente opslag aan uw app verlenen. Zie dit bericht over hoe je dat kunt doen.

  3. filesystem: URL FTW . Het is handig om het filesystem: URL voor de root DirectoryEntry van de oorsprong van uw app. Wat betekent dat? Als uw app bijvoorbeeld op www.example.com staat, opent u filesystem:http://www.example.com/temporary/ in een nieuw tabblad. Chrome toont een alleen-lezen lijst met de bestanden/mappen die zijn opgeslagen in de oorsprong van uw app. Voor meer informatie over filesystem: URL's, zie https://www.html5rocks.com/en/tutorials/file/filesystem/#toc-filesystemurls .

  4. chrome://settings/cookies is je vriend . Op deze pagina kunt u de gegevens vernietigen die voor een oorsprong zijn opgeslagen. Dat omvat databaseopslag, AppCache, cookies, localStorage en dergelijke in de FileSystem API. Maar wees gewaarschuwd: het is een kwestie van alles of niets. U kunt niet slechts één bestand of stukjes gegevens verwijderen.

  5. Vergeet de fout-callbacks niet . De Filesystem API leeft in een asynchrone wereld (tenzij u de synchronisatieversie in Workers gebruikt). Gebruik altijd error callback in uw API-aanroepen. Ze zijn optioneel, maar je bespaart jezelf later veel verdriet als de zaken ontploffen.