Debuggen von IndexedDB-Anwendungen

IEBlog Deutsch

Blog des Internet Explorer-Entwicklerteams

Debuggen von IndexedDB-Anwendungen

  • Comments 0

IndexedDB ist ein W3C-Entwurf, mit dem JavaScript-Entwickler auch dann Daten auf lokalen Benutzerclients speichern, suchen und abrufen können, wenn keine Internetkonnektivität vorhanden ist. In diesem Blogbeitrag wird das Tool IDBExplorer beschrieben, das Microsoft-intern zum Debuggen von IndexedDB-Anwendungen verwendet wird. Mithilfe von IDBExplorer können Sie Datenbankschemas, Objektspeicherinhalte und Indexdetails anzeigen.

Kennenlernen des Tools anhand einer IndexedDB-Anwendung

Zur Veranschaulichung habe ich eine Anwendung erstellt, die meine Vorsätze für das neue Jahr mit IndexedDB nachverfolgt. Das Speichern und der Zugriff auf meine Vorsätze erfolgt lokal (auf dem System, auf dem die Webseite aufgerufen wird). Es können weitere Vorsätze hinzugefügt oder vorhandene Vorsätze bearbeitet werden. Mit der Schaltfläche „Done That!“ („Erledigt!“) wird der ausgewählte Vorsatz aus der Liste und dessen interne Darstellung aus der Datenbank entfernt.

Anwendung zum Nachverfolgen von Vorsätzen für das neue Jahr mit IndexedDB

IndexedDB legt eine Datenbank als Container für Informationen fest. Jede Datenbank enthält Objektspeicher, bei denen es sich um Repositories für JavaScript-Objekte handelt. Jedes Objekt enthält Attribute, die über die API abgefragt werden können. Die Objektspeicher entsprechen Tabellen in relationalen Datenbanken, und jedes JavaScript-Objekt in einem Objektspeicher stellt einen Datensatz dar. Die Objekte in einem IndexedDB-Objektspeicher werden jedoch wie undurchsichtige Entitäten behandelt. Zudem haben diese Objekte nicht unbedingt dieselben Eigenschaften.

Wenn ein JavaScript-Objekt einem Datensatz in einer relationalen Datenbank entspricht, sind die Eigenschaften dieses Objekts analog zu den Spalten (oder Feldern) einer Tabelle. IndexedDB ermöglicht also die Definition von Indizes zum Identifizieren der Objekteigenschaften, die für die Suche nach Datensätzen in einem Objektspeicher verwendet werden können. Über Indizes können daher IndexedDB-Daten mithilfe der Attributwerte eines JavaScript-Objekts durchsucht werden.

In IndexedDB kann jede Domäne mehrere Datenbanken enthalten. In diesem Beispiel wird eine Datenbank verwendet: „New Year“ („Neues Jahr“). Meine Vorsätze werden von der Anwendung in der Datenbank Neues Jahr in einem Objektspeicher mit dem Namen „Resolutions“ („Vorsätze“) gespeichert. Jeder Vorsatz ist ein JavaScript-Objekt mit den folgenden Attributen:

  • priorityId: Unterteilt die Vorsätze in verschiedene Prioritäten
  • name: Name des Vorsatzes
  • occurrenceId: Überwacht, wie häufig der Vorsatz durchgeführt werden muss
  • dueDate: Erledigungsdatum des Vorsatzes
  • createdDate: Internes Datum, an dem der Vorsatz zum Objektspeicher hinzugefügt wurde
  • categoryId: Definiert den Aktivitätstyp für einen Vorsatz

Beachten Sie, dass nicht alle Attribute auf der Benutzeroberfläche der Anwendung angezeigt werden. In einigen Fällen werden sie nur intern verwendet (z. B. createdDate).

Die Inhalte des Objektspeichers „Vorsätze“ werden im IDBExplorer-Tool folgendermaßen angezeigt:

IDBExplorer-Tool mit den Inhalten des Objektspeichers „Vorsätze“

Der Objektspeicher „Vorsätze“ enthält zudem einen Index für das priorityId-Attribut mit dem Namen „priorityId“. Dies ermöglicht die Abfrage von Objekten mithilfe der priorityId-Eigenschaft. Die Beschreibungen der einzelnen priorityId-Werte befinden sich im Objektspeicher „Priorities“ („Prioritäten“). Die Beschreibungen für die occurrenceId-Werte sind im Objektspeicher „Occurrences“ („Vorkommen“) gespeichert. Die Beschreibungen für die categoryId-Werte befinden sich dementsprechend im Objektspeicher „Categories“ („Kategorien“).

Die Beziehungen werden vom Tool in der folgenden Strukturhierarchie dargestellt:

IDBExplorer-Tool, das anzeigt, dass die Datenbank fünf Vorsätze enthält

Das IDBExplorer-Tool zeigt an, dass sich fünf Vorsätze in meiner Datenbank befinden (zwei Aufgaben mit hoher Priorität, zwei mit mittlerer und eine mit niedriger Priorität).

Mithilfe der Anwendung kann Ich einen neuen Vorsatz hinzufügen:

Anwendung „New Year’s Resolutions“ beim Hinzufügen eines Vorsatzes

Die Anwendung ruft die Werte für die Felder Occurrence, Priority und Category mit Cursorn aus den entsprechenden Objektspeichern ab und zeigt sie an. Das IDBExplorer-Tool zeigt an, wie diese Werte im Objektspeicher vorhanden sind. Bei der Auswahl des Objektspeichers Categories werden beispielsweise die verfügbaren Kategorien und deren Beschreibungen angezeigt:

IDBExplorer-Tool mit Werten im Objektspeicher

Sie können einen Vorsatz aktualisieren, indem Sie diesen auf dem Bildschirm „WorkOn“ („Daran arbeiten“) auswählen und dann auf „Edit“ (Bearbeiten“) klicken. Wenn Sie im Anschluss an die Änderungen die Schaltfläche „Update“ („Aktualisieren“) auswählen, werden die Änderungen übernommen, und die Werte im Objektspeicher „Resolutions“ werden aktualisiert.

Anwendung „New Year’s Resolutions“ beim Aktualisieren eines Vorsatzes durch dessen Auswahl im Bildschirm „WorkOn“

Verwenden von IDBExplorer in Ihren Anwendungen

Sie können das IDBExplorer-Tool in Ihre Anwendungen im Metro-Stil oder eine Website einfügen. Es wird jedoch empfohlen, das Tool nicht zusammen mit Ihrer Anwendung bereitzustellen.

Um das Tool Ihrer Website hinzuzufügen, kopieren und entzippen Sie den Inhalt des IDBExplorer-Pakets auf Ihre Website. Die Anwendung muss über ein IFRAME-Element oder ein neues Fenster mit der im IDBExplorer-Ordner enthaltenen Datei „IDBExplorer.html“ verknüpft werden.

In diesem Beispiel wird IDBExplorer in einem IFRAME-Element gehostet. . Normalerweise empfiehlt es sich jedoch, bei der Entwicklung diesen URI in einem neuen Fenster zu hosten. Auf diese Weise können Sie die Datenbank parallel zur Anwendung debuggen, ohne die Benutzeroberfläche der Website zu beeinträchtigen.

Um IDBExplorer zu hosten, müssen Sie den Namen der Datenbank mit der Abfragezeichenfolge übergeben. In diesem Beispiel wurde hierfür das src-Attribute des IFRAME-Elements verwendet:

<iframe id="debuggerId" class="debuggerContainer" src="IDBExplorer/IDBExplorer.html?name=NewYear"></iframe>

Wenn Sie diese Funktion in einer Anwendung im Metro-Stil hosten möchten, sollten Sie daran denken, dass Anwendungen im Metro-Stil im Vollbildmodus ausgeführt werden. Es ist daher besser, zu dieser URL zu navigieren, als ein neues Fenster zu öffnen. (Um die Rückkehr zu Ihrer Anwendung zu ermöglichen, müssen Sie der Datei „IDBExplorer.html“ eine „Zurück“-Schaltfläche hinzufügen.) Wahlweise können Sie ein IFRAME-Element hinzufügen und das Tool darin anzeigen.

Viel Spaß mit dem Tool! Teilen Sie uns mit, was Sie davon halten!

– Israel Hilerio, Ph.D., Principal Program Manager, Internet Explorer