Отладка API файловой системы

Файловая система HTML5 — это мощный API. С силой приходит сложность. Со сложностью возникает больше разочарований при отладке. К сожалению, Chrome DevTools в настоящее время не поддерживает API файловой системы. Это делает отладку более сложной, чем должна быть. Под сложностью я подразумеваю необходимость написания кода для просмотра/удаления файлов в файловой системе.

Работая над API файловой системы, я почерпнул пару советов, которыми решил поделиться. Каждый совет имеет свой набор ограничений, но использование их комбинации поможет вам достичь 90% успеха. Вот топ-5:

  1. Убедитесь, что вы не работаете с file:// . Это хитрый трюк, который многие люди кусают. Chrome накладывает серьезные ограничения безопасности на file:// . Многие из расширенных файловых API ( BlobBuilder , FileReader , API файловой системы и т. д.) выдают ошибки или происходят сбои без уведомления, если вы запускаете приложение локально из file:// . Если у вас нет под рукой веб-сервера, Chrome можно запустить с флагом --allow-file-access-from-files чтобы обойти это ограничение безопасности. Используйте этот флаг только в целях тестирования.

  2. Ужасный SECURITY_ERR или QUOTA_EXCEEDED_ERR . Обычно это происходит при попытке записи данных, но вы находитесь под влиянием №1. Если это не так, то, скорее всего, у вас нет квоты. Существует два типа квот, с которыми может быть открыта файловая система: TEMPORARY или PERSISTENT . Если вы используете последнее, пользователю необходимо явно предоставить постоянное хранилище вашему приложению. Посмотрите этот пост о том, как это сделать.

  3. filesystem: URL FTW . Удобно открыть filesystem: URL-адрес корневого элемента DirectoryEntry источника вашего приложения. Что это значит? Например, если ваше приложение находится на www.example.com , откройте filesystem:http://www.example.com/temporary/ в новой вкладке. Chrome покажет доступный только для чтения список файлов/папок, хранящих источник вашего приложения. Дополнительную информацию о filesystem: URL-адреса см. на странице https://www.html5rocks.com/en/tutorials/file/filesystem/#toc-filesystemurls .

  4. chrome://settings/cookies — ваш друг . Эта страница позволяет вам уничтожить данные, хранящиеся в источнике. Сюда входят хранилище базы данных, AppCache, файлы cookie, localStorage и прочее в API файловой системы. Однако будьте предупреждены: это либо все, либо ничего. Вы не можете удалить только один файл или фрагменты данных.

  5. Не забывайте об обратных вызовах при ошибках . API файловой системы существует в асинхронном мире (если вы не используете версию синхронизации в Workers). Всегда используйте обратный вызов ошибок в вызовах API. Они не являются обязательными, но вы сэкономите себе много горя позже, когда что-то пойдет не так.