Déboguer une application Web Oracle JET

Introduction

Ce tutoriel vous explique comment déboguer une application Oracle JET à l'aide des outils de développement de navigateur.

Le débogage dans un navigateur est utile pour isoler rapidement le code problématique et tester les solutions. Tous les navigateurs disposent d'outils de développement que vous pouvez utiliser pour effectuer des tâches, telles que l'affichage et la révision du HTML, des feuilles de style en cascade (CSS) et de la source JavaScript. Par exemple, lorsque vous exécutez votre application Web Oracle JET dans le navigateur Web Google Chrome, vous pouvez utiliser les outils de développement Google Chrome (Chrome DevTools) pour examiner la source de la page et les styles CSS de chaque composant.

Objectifs

A l'issue de ce tutoriel, vous aurez appris à utiliser les outils de développement Web de votre navigateur pour localiser un code incorrect dans votre application Web Oracle JET, modifier un exemple de fichier de projet fourni et vérifier les modifications en direct dans le navigateur.

Prérequis

Environnement de développement configuré pour créer des applications Oracle JET avec l'exécution JavaScript, Node.js et la dernière interface de ligne de commande Oracle JET installée
Google Chrome est installé
Réalisation des tutoriels précédents dans ce parcours de formation, afin que vous ayez créé votre application Web Oracle JET dans le dossier JET_Web_Application
Exemple dashboard.html téléchargé dans le répertoire JET_Web_Application/src/ts/views

Tâche 1 : exécution de l'application Web

Accédez au répertoire JET_Web_Application/src/ts/views, créez une copie de sauvegarde de votre fichier dashboard.html, puis téléchargez le fichier échantillon dashboard.html fourni dans le même répertoire.
Si le traitement batch du serveur d'outils Oracle JET est en cours d'exécution dans la fenêtre de terminal, appuyez sur Ctrl+C et, si vous y êtes invité, entrez y pour quitter le traitement batch du serveur. Le traitement batch du serveur reconnaît uniquement les révisions apportées aux fichiers d'application existants. Après avoir créé des fichiers, vous devez réexécuter l'application Web.
Dans la fenêtre de terminal, à partir du répertoire JET_Web_Application, exécutez l'application.
```
$ ojet serve
```
Votre navigateur affiche l'exemple avec un graphique compressé. La liste déroulante Sélectionner un graphique ne fonctionne pas.

Description de l'illustration app-open.png ci-après
Si votre navigateur par défaut n'est pas Google Chrome, ouvrez-le et copiez l'adresse de la page ouverte dans le champ d'adresse URL Google Chrome.

Tâche 2 : déboguer l'application Web

Dans votre navigateur Google Chrome, appuyez sur Ctrl+Shift+I pour afficher la fenêtre Outils de développement. Chrome DevTools affiche le code source.
Dans le panneau Eléments, développez les balises imbriquées jusqu'à localiser l'élément HTML personnalisé oj-chart. L'attribut type de l'élément HTML personnalisé oj-chart est codé en dur sous la forme bar au lieu d'utiliser la valeur de l'élément HTML personnalisé oj-select-single. Dans le panneau Styles de Chrome DevTools, sous le diagramme de position du composant de graphique, notez également que l'attribut width du composant de graphique est défini sur 135 pixels.

Description de l'illustration styles-tab.png

L'élément HTML personnalisé oj-chart est contenu par un élément div HTML qui définit la largeur sur 135 px et entraîne la compression du composant Graphique sur la page. Par conséquent, le composant Graphique hérite sa largeur d'un conteneur parent et ignore le paramètre de largeur de style de 100 %.

Tâche 3 : corriger le code de l'application Web

Accédez au répertoire JET_Web_Application/src/ts/views et ouvrez le fichier dashboard.html dans un éditeur.

Recherchez l'élément HTML personnalisé oj-chart. Définissez le type de graphique sur [[val]] et enlevez les balises <div> qui entourent la balise .

. . .
</oj-select-single>
<oj-chart id="barChart" type="[[val]]" data="[[chartDataProvider]]" animation-on-display="auto" 
          animation-on-data-change="auto" hover-behavior="dim" style='width:100%;height:350px;'>
  <template slot="itemTemplate" data-oj-as="item">
. . .

Si elle n'est pas déjà présente, ajoutez une classe de style, chartStyle, à la fin du fichier appRootDir/src/css/app.css :
```
.chartStyle {
   max-width:500px;
   width:100%;
   height:350px;
}
```
Remplacez l'attribut style par l'attribut class qui référence les propriétés de style dans votre fichier appRootDir/src/css/app.css.
```
<oj-chart id="barChart" type="[[val]]" . . . style='width:100%;height:350px;'>
```
Devient
```
<oj-chart id="barChart" type="[[val]]" . . . class="chartStyle">
```
Il est recommandé de placer les styles à appliquer aux composants dans un fichier CSS distinct plutôt que d'utiliser l'attribut style incorporé illustré dans l'exemple précédent.
Pour vérifier les modifications, enregistrez votre fichier et affichez la sortie mise à jour en direct de l'application Web dans votre navigateur.
Remplacez l'exemple de fichier par votre fichier dashboard.html d'origine.
Fermez la fenêtre ou l'onglet du navigateur qui affiche l'application Web en cours d'exécution.
Dans la fenêtre de terminal, appuyez sur Ctrl+C et, si vous y êtes invité, entrez y pour quitter le traitement batch des outils Oracle JET.
Laissez la fenêtre de terminal ouverte pour le tutoriel suivant.

Ressources de formation supplémentaires

Explorez d'autres exercices sur docs.oracle.com/learn ou accédez à davantage de contenu d'apprentissage gratuit sur le canal Oracle Learning YouTube. De plus, visitez le site education.oracle.com/learning-explorer pour devenir Oracle Learning Explorer.

Pour consulter la documentation du produit, consultez le centre d'aide Oracle.

Informations relatives au titre et au copyright

Debug an Oracle JET web app

F53091-01

February 2022