Ta strona została przetłumaczona przez Cloud Translation API.

Debugowanie interfejsu Filesystem API

Eric Bidelman

System plików HTML5 to potężne API. Z mocą wiąże się złożoność. Wraz ze wzrostem złożoności debugowanie staje się coraz bardziej uciążliwe. Niestety DevTools w Chrome nie obsługują obecnie interfejsu Filesystem API. Utrudnia to debugowanie. Chodzi mi o konieczność napisania kodu do wyświetlenia lub usunięcia plików w systemie plików.

Podczas prób z interfejsem Filesystem API zebrałem kilka wskazówek, które chciałbym Ci przekazać. Każda z nich ma swoje ograniczenia, ale ich połączenie pozwoli Ci osiągnąć 90% skuteczności. Oto 5 najlepszych:

Upewnij się, że nie uruchamiasz go z poziomu file://. To podstępny problem, który dotyka wielu osób. Chrome nakłada na file:// poważne ograniczenia bezpieczeństwa. Wiele zaawansowanych interfejsów API plików (BlobBuilder, FileReader, interfejs Filesystem API itp.) powoduje błędy lub nie działa, jeśli uruchomisz aplikację lokalnie z file://. Jeśli nie masz pod ręką serwera internetowego, możesz uruchomić Chrome z flagą --allow-file-access-from-files, aby ominąć to ograniczenie zabezpieczeń. Używaj tego znacznika tylko do celów testowych.
Niestety SECURITY_ERR lub QUOTA_EXCEEDED_ERR. Zwykle dzieje się tak, gdy próbujesz zapisać dane, ale znajdujesz się pod wpływem punktu 1. Jeśli tak nie jest, prawdopodobnie nie masz limitu. System plików może być otwierany z użyciem dwóch typów limitów: TEMPORARY lub PERSISTENT. Jeśli używasz tej drugiej opcji, użytkownik musi wyraźnie przyznać aplikacji trwałe miejsce na dane. Więcej informacji na ten temat znajdziesz w tym poście.
filesystem: URL FTW. Warto otworzyć adres URL filesystem: katalogu DirectoryEntry, w którym znajduje się aplikacja. Co to znaczy? Jeśli na przykład Twoja aplikacja znajduje się na stronie www.example.com, otwórz filesystem:http://www.example.com/temporary/ w nowej karcie. Chrome wyświetli listę plików i folderów przechowywanych przez aplikację źródłową. Lista będzie tylko do odczytu. Więcej informacji o adresach URL filesystem: znajdziesz na stronie https://www.html5rocks.com/en/tutorials/file/filesystem/#toc-filesystemurls.
chrome://settings/cookies to Twój znajomy. Na tej stronie możesz usunąć dane zapisane dla źródła. Obejmuje to pamięć bazy danych, AppCache, pliki cookie, localStorage i elementy w interfejsie FileSystem API. Pamiętaj jednak, że jest to proces typu „wszystko albo nic”. Nie możesz usunąć tylko jednego pliku ani fragmentu danych.
Nie zapomnij o wywołaniach zwrotnych w przypadku błędów Interfejs Filesystem API działa w środowisku asynchronicznym (chyba że używasz wersji synchronicznej w Workerach). Zawsze używaj funkcji wywołania zwrotnego błędu w wywołaniach interfejsu API. Nie są one wymagane, ale oszczędzisz sobie później dużo zmartwień, gdy coś pójdzie nie tak.