Virtuelle Oracle JET-DOM-App debuggen

Einführung

In diesem Tutorial erfahren Sie, wie Sie eine virtuelle DOM-App von Oracle JavaScript Extension Toolkit (Oracle JET) mit Browserentwicklertools debuggen.

Das Debugging in einem Browser ist nützlich, um problematischen Code schnell zu isolieren und Lösungen zu testen. Alle Browser verfügen über Entwicklertools, mit denen Sie Aufgaben wie das Anzeigen und Überarbeiten der HTML, Cascading Style Sheets (CSS) und der anderen Quellcodedateien in Ihrer virtuellen Oracle JET-DOM-App ausführen können. Außerdem können Sie eine Preact-Browsererweiterung installieren, die zusätzliche Debugging-Tools in den Entwicklertools Ihres Browsers bereitstellt, wenn Sie Ihre virtuelle DOM-App debuggen.

Ziele

In diesem Tutorial installieren Sie die Preact-Browsererweiterung und erfahren, wie Sie Webentwicklertools in Ihrem Browser verwenden, um falschen Code in Ihrer virtuellen Oracle JET-DOM-App zu finden, eine bereitgestellte Beispielprojektdatei zu ändern und die Änderungen live im Browser zu prüfen.

Voraussetzungen

Eine Entwicklungsumgebung, die so eingerichtet ist, dass virtuelle Oracle JET-DOM-Apps mit installiertem Node.js erstellt werden
Google Chrome installiert
Abschluss des vorherigen Tutorials in diesem Lernpfad, Data Bind a Component in an Oracle JET Virtual DOM App
Das Beispiel index.tsx wurde in das Verzeichnis JET-Virtual-DOM-app/src/components/content heruntergeladen

Aufgabe 1: Preact installieren DevTools

Eine virtuelle Oracle JET-DOM-App enthält standardmäßig die Importanweisung zum Initialisieren einer Verbindung zu Preact DevTools, einer Browsererweiterung, die zusätzliche Debuggingtools in Chrome DevTools bereitstellt. Installieren Sie die Chrome-Browsererweiterung, die Preact zum Download bereitstellt, unter https://preactjs.github.io/preact-devtools/.

Nachdem Sie die Erweiterung installiert haben, wird die Registerkarte Vorbereiten in Chrome DevTools angezeigt, die zusätzliche Tools zum Debuggen Ihrer virtuellen DOM-App bereitstellt, wie z.B. einen Komponentenhierarchie-Viewer.

Registerkarte "Entwicklerwerkzeuge" vorgeben

Aufgabe 2: Virtuelle Oracle JET-DOM-App ausführen

Navigieren Sie zum Verzeichnis JET-Virtual-DOM-app/src/components/content, erstellen Sie eine Backupkopie der Datei index.tsx, und laden Sie dann die bereitgestellte Beispieldatei index.tsx in dasselbe Verzeichnis herunter.
Wenn der Batchjob des Oracle JET-Tooling-Servers im Terminalfenster ausgeführt wird, drücken Sie Ctrl+C, und geben Sie bei entsprechender Aufforderung y ein, um den Batchjob des Servers zu beenden. Der Server-Batchjob erkennt nur Revisionen, die Sie an vorhandenen App-Dateien vornehmen. Nachdem Sie neue Dateien erstellt haben, müssen Sie die App erneut ausführen.
Führen Sie die Anwendung im Terminalfenster aus dem Verzeichnis JET-Virtual-DOM-app aus.
```
npx ojet serve
```
Ihr Browser zeigt das Beispiel mit einem komprimierten Diagramm an, das kein Balken- oder Tortendiagramm ist. Die Dropdown-Liste Diagramm auswählen funktioniert nicht.
Wenn Ihr Standardbrowser nicht Google Chrome ist, öffnen Sie ihn, und kopieren Sie die Adresse der geöffneten Seite in das Adressfeld der Google Chrome-URL.

Aufgabe 3: Virtuelle DOM-App debuggen

Klicken Sie in Ihrem Google Chrome-Browser mit der rechten Maustaste auf das Diagramm, das auf der Seite angezeigt wird, und wählen Sie Prüfen aus dem angezeigten Kontextmenü.

Chrome DevTools öffnet und zeigt die Bereiche Elemente und Stile an, in denen HTML und CSS angezeigt werden, die Ihre virtuelle DOM-App wiedergeben.
Wählen Sie im Bereich "Elemente" das Element aus, das mit <oj-chart id="barChart" beginnt. Beachten Sie, dass das Attribut width der Diagrammkomponente auf der Registerkarte "Formate" unter dem Positionsdiagramm der Diagrammkomponente 135 Pixel als Wert liest.

Das benutzerdefinierte HTML-Element oj-chart ist in einem HTML-Element div enthalten, das die Breite auf 135px setzt und bewirkt, dass die Diagrammkomponente auf der Seite komprimiert aussieht. Daher erbt die Diagrammkomponente ihre Breite von einem übergeordneten Container und ignoriert die Stileinstellung width von 100%.
Drücken Sie in Chrome DevTools Ctrl+Shift+P, und wählen Sie im angezeigten Menü die Option Konsole anzeigen aus.
Geben Sie die folgenden Befehle ein, um die Werte für die Eigenschaft value der Select Single-Komponente und die Eigenschaft type der Chart-Komponente zu bestimmen.
```
document.getElementById("basicSelect").getProperty('value')
// The Console returns 'pie'
document.getElementById("barChart").getProperty('type')
// The Console returns 'funnel'
```
Der Eigenschaftswert type der Diagrammkomponente muss mit dem von der Komponente "Einzelne auswählen" angegebenen Wert übereinstimmen. Dies ist jedoch nicht der Fall.
Geben Sie den folgenden Befehl ein, um den Eigenschaftswert type der Diagrammkomponente im Browser auf pie zu setzen.
```
document.getElementById("barChart").setProperty('type', 'pie')
```
Der Browser wird aktualisiert, um ein Tortendiagramm anzuzeigen. Dies deutet darauf hin, dass wir den Quellcode untersuchen müssen, in dem die Eigenschaft type der Diagrammkomponente festgelegt ist.

Aufgabe 4: Virtuellen DOM-Anwendungscode korrigieren

Navigieren Sie zum Verzeichnis JET-Virtual-DOM-app/src/styles, und öffnen Sie die Datei app.css in einem Editor.
Falls noch nicht vorhanden, fügen Sie die Stilklasse chartStyle am Ende der Datei appRootDir/src/css/app.css hinzu.
```
.chartStyle {
  max-width: 500px;
  width: 100%;
  height: 350px;
}
```
Navigieren Sie zum Verzeichnis JET-Virtual-DOM-app/src/components/content, und öffnen Sie die Datei index.tsx in einem Editor.
Suchen Sie nach dem Element oj-chart, und entfernen Sie die <div style="width:135px;">-Tags, die das Tag oj-chart umgeben.
Ersetzen Sie das Attribut style durch das Attribut class, das Stileigenschaften in der Datei appRootDir/src/styles/app.css referenziert.
```
<oj-chart . . .	style="width:100%;height:350px;">
```
Wird
```
<oj-chart . . . class="chartStyle">
```
Es empfiehlt sich, Stile, die Sie auf Komponenten anwenden möchten, in einer separaten CSS-Datei zu platzieren, anstatt das im vorherigen Beispiel gezeigte Inline-Attribut style zu verwenden.
Ändern Sie im Element oj-chart die Eigenschaft type, um die Variable val zu referenzieren, die der useState-Hook anstelle der hartcodierten Referenz zum funnel-Diagrammtyp hinzugefügt hat.
```
<oj-chart
   id="barChart"
   type={val}
   // type="funnel"
```
Tipp: Fügen Sie bei Bedarf funnel zum chartTypeData-Array hinzu, in dem die Diagrammtypen in der Datei index.tsx aufgeführt werden.
```
const chartTypeData = [
  { value: "bar", label: "Bar" },
  { value: "pie", label: "Pie" },
  { value: "funnel", label: "Funnel" },
];
```
Um die Änderungen zu überprüfen, speichern Sie Ihre Datei und zeigen Sie die aktualisierte Ausgabe der virtuellen DOM-App in Ihrem Browser an.
Ersetzen Sie die Beispieldatei durch die ursprüngliche Datei index.tsx.
Schließen Sie das Browserfenster oder die Registerkarte, in der die ausgeführte virtuelle DOM-App angezeigt wird.
Drücken Sie im Terminalfenster Ctrl+C, und geben Sie bei entsprechender Aufforderung y ein, um den Batchjob für Oracle JET-Tooling zu beenden.
Lassen Sie das Terminalfenster für Ihr nächstes Tutorial geöffnet.

Nächsten Schritt

Fahren Sie mit dem nächsten Tutorial in diesem Modul fort.

Dieses Tutorial ist Teil des Moduls Ihre erste Oracle JET Virtual DOM-App.

Sie können zur Hauptseite des virtuellen DOM-Lernpfads zurückkehren, um auf alle Module zum Erstellen virtueller DOM-Apps zuzugreifen.

Weitere Lernressourcen

Sehen Sie sich weitere Übungen zu docs.oracle.com/learn an, oder greifen Sie auf weitere kostenlose Lerninhalte im Oracle Learning YouTube-Kanal zu. Besuchen Sie außerdem education.oracle.com/learning-explorer, um ein Oracle Learning Explorer zu werden.

Die Produktdokumentation finden Sie im Oracle Help Center.

Titel und Copyright-Informationen

Debug an Oracle JET virtual DOM app

F74301-02

Oracle und/oder verbundene Unternehmen.