Eseguire il debug di un'applicazione DOM virtuale Oracle JET

Introduzione

Questa esercitazione descrive come eseguire il debug di un'applicazione DOM virtuale di Oracle JavaScript Extension Toolkit (Oracle JET) utilizzando gli strumenti di sviluppo del browser.

Il debug in un browser è utile per isolare rapidamente il codice problematico e per testare le soluzioni. Tutti i browser dispongono di strumenti di sviluppo che è possibile utilizzare per eseguire attività quali la visualizzazione e la revisione dell'HTML, dei fogli di stile a cascata (CSS) e degli altri file di codice sorgente nell'app Oracle JET Virtual DOM. Inoltre, è possibile installare un'estensione del browser Preact che fornisce ulteriori strumenti di debug negli strumenti di sviluppo del browser quando si esegue il debug dell'applicazione DOM virtuale.

Obiettivi

In questa esercitazione, verrà installata l'estensione del browser Preact e verrà descritto come utilizzare gli strumenti di sviluppo Web nel browser per individuare il codice errato nell'applicazione DOM virtuale di Oracle JET, modificare un file di progetto di esempio fornito e rivedere le modifiche in tempo reale nel browser.

Prerequisiti

Task 1: Installazione di Preact DevTools

Un'applicazione DOM virtuale di Oracle JET include, per impostazione predefinita, l'istruzione di importazione per inizializzare una connessione a Preact DevTools, un'estensione del browser che fornisce ulteriori strumenti di debug in Chrome DevTools. Installare l'estensione del browser Chrome fornita da Preact per il download all'indirizzo https://preactjs.github.io/preact-devtools/.

Una volta installata l'estensione, verrà visualizzata una scheda Preact in Chrome DevTools che fornisce strumenti aggiuntivi per eseguire il debug dell'applicazione DOM virtuale, ad esempio un visualizzatore della gerarchia dei componenti.

Scheda Strumenti di sviluppo preliminari

Task 2: eseguire l'applicazione Oracle JET Virtual DOM

  1. Passare alla directory JET-Virtual-DOM-app/src/components/content, creare una copia di backup del file index.tsx, quindi scaricare il file di esempio index.tsx fornito nella stessa directory.

  2. Se il processo batch di Oracle JET Tooling Server è in esecuzione nella finestra del terminale, premere Ctrl+C e, se richiesto, immettere y per uscire dal processo batch del server. Il processo batch server riconosce solo le revisioni apportate ai file di applicazione esistenti. Dopo aver creato nuovi file, è necessario eseguire di nuovo l'applicazione.

  3. Nella finestra del terminale, dalla directory JET-Virtual-DOM-app, eseguire l'app.

    npx ojet serve

    Il browser visualizza l'esempio con un grafico compresso che non è un grafico a barre o a torta. L'elenco a discesa Seleziona grafico non funziona.

    Elenco a discesa Seleziona grafico

  4. Se il browser predefinito non è Google Chrome, aprirlo e copiare l'indirizzo della pagina aperta nel campo dell'indirizzo URL di Google Chrome.

Task 3: Debug dell'applicazione DOM virtuale

  1. Nel browser Google Chrome, fare clic con il pulsante destro del mouse sul grafico visualizzato nella pagina e selezionare Ispeziona dal menu di scelta rapida visualizzato.

    Chrome DevTools apre e visualizza i pannelli Elementi e Stili che mostrano HTML e CSS che rendono la tua app DOM virtuale.

  2. Nel pannello Elementi, selezionare l'elemento che inizia con <oj-chart id="barChart" e notare come, nella scheda Stili, sotto il diagramma di posizione del componente Grafico, l'attributo width del componente Grafico legga pixel 135 come valore.

    Strumenti per sviluppatori Chrome

    L'elemento HTML personalizzato oj-chart è contenuto da un elemento HTML div che imposta la larghezza su 135px e fa apparire il componente Grafico compresso nella pagina. Pertanto, il componente Grafico eredita la larghezza da un contenitore padre e ignora l'impostazione dello stile width di 100%.

  3. In Chrome DevTools, premere Ctrl+Shift+P e selezionare Mostra console dal menu visualizzato.

  4. Immettere i comandi seguenti per determinare i valori per la proprietà value del componente Select Single e per la proprietà type del componente Chart.

    document.getElementById("basicSelect").getProperty('value')
// The Console returns 'pie'
document.getElementById("barChart").getProperty('type')
// The Console returns 'funnel'

    Il valore della proprietà type del componente Grafico deve corrispondere al valore specificato dal componente Seleziona singolo, ma non corrisponde.

  5. Immettere il comando seguente per impostare il valore della proprietà type del componente Grafico su pie nel browser.

    document.getElementById("barChart").setProperty('type', 'pie')

    Il browser viene aggiornato per visualizzare un grafico a torta. Ciò suggerisce che è necessario esaminare il codice sorgente in cui è impostata la proprietà type del componente Grafico.

    Aggiorna tipo di grafico utilizzando i comandi della console

Task 4: Correggere il codice applicazione DOM virtuale

  1. Passare alla directory JET-Virtual-DOM-app/src/styles e aprire il file app.css in un editor.

  2. Se non è già presente, aggiungere la classe di stile chartStyle alla fine del file appRootDir/src/css/app.css.

    .chartStyle {
  max-width: 500px;
  width: 100%;
  height: 350px;
}

  3. Passare alla directory JET-Virtual-DOM-app/src/components/content e aprire il file index.tsx in un editor.

  4. Cercare l'elemento oj-chart e rimuovere le tag <div style="width:135px;"> che circondano il tag oj-chart.

  5. Sostituire l'attributo style con l'attributo class che fa riferimento alle proprietà di stile nel file appRootDir/src/styles/app.css.

    <oj-chart . . .	style="width:100%;height:350px;">

    Diventa

    <oj-chart . . . class="chartStyle">

    È consigliabile posizionare gli stili che si desidera applicare ai componenti in un file CSS separato anziché utilizzare l'attributo style in linea dimostrato nell'esempio precedente.

  6. Nell'elemento oj-chart modificare la proprietà type in modo che faccia riferimento alla variabile val aggiunta dall'hook useState anziché al riferimento non modificabile al tipo di grafico funnel.

    <oj-chart
   id="barChart"
   type={val}
   // type="funnel"

    Suggerimento: se lo si desidera, aggiungere funnel all'array chartTypeData che elenca i tipi di grafico nel file index.tsx.

    const chartTypeData = [
  { value: "bar", label: "Bar" },
  { value: "pie", label: "Pie" },
  { value: "funnel", label: "Funnel" },
];
  7. Per verificare le modifiche, salvare il file e visualizzare l'output aggiornato dell'applicazione DOM virtuale nel browser.
  8. Sostituire il file di esempio con il file index.tsx originale.
  9. Chiudere la finestra o la scheda del browser che visualizza l'applicazione DOM virtuale in esecuzione.
  10. Nella finestra del terminale, premere Ctrl+C e, se richiesto, immettere y per uscire dal job batch degli strumenti Oracle JET.
  11. Lasciare aperta la finestra del terminale per il prossimo tutorial.

Passo successivo

Passare all'esercitazione successiva in questo modulo.

Questa esercitazione fa parte del modulo Your First Oracle JET Virtual DOM App.

Puoi tornare alla pagina principale del percorso di apprendimento DOM virtuale per accedere a tutti i moduli sulla creazione di app DOM virtuali.

Altre risorse di apprendimento

Esplora altri laboratori su docs.oracle.com/learn o accedi a più contenuti di formazione gratuiti sul canale YouTube di Oracle Learning. Inoltre, visitare education.oracle.com/learning-explorer per diventare Oracle Learning Explorer.

Per la documentazione del prodotto, visitare Oracle Help Center.