Préparation au dépannage

Objectifs de formation

Une fois cette unité terminée, vous pourrez :

Expliquer les avantages de travailler avec du code non minifié
Montrer comment obtenir des composants Web Lightning non minifiés
Rechercher les composants Web Lightning JavaScript dans DevTools
Utiliser la liste d’éléments à ignorer pour vous concentrer uniquement sur votre code
Activer les formateurs personnalisés pour les décorateurs liés au proxy

Remarque

Vous souhaitez apprendre en français ? Commencez le défi dans un Trailhead Playground en français et utilisez les traductions fournies entre crochets pour naviguer. Copiez et collez uniquement les valeurs en anglais, car les validations de défi reposent sur les données en anglais. Si vous ne réussissez pas le défi dans votre organisation en français, nous vous recommandons (1) de définir le paramètre régional sur les États-Unis, (2) de définir la langue sur l’anglais en suivant les instructions ici, puis (3) de cliquer à nouveau sur le bouton « Vérifier le défi ».

Consultez le badge Trailhead dans votre langue pour découvrir comment profiter de l’expérience Trailhead traduite.

Les défis JavaScript uniques des composants Web Lightning

Le dépannage de JavaScript est une compétence en soi. Pour dépanner des composants Web Lightning créés avec JavaScript, il est nécessaire de posséder cette compétence et de la mettre à profit. L’une des premières choses que vous apprenez est que les composants Web Lightning sont compilés et minifiés. La minification les rend plus petits et plus rapides à charger pour le navigateur. Mais elle rend également leur dépannage difficile. Le code minifié est particulièrement difficile à utiliser, car les sauts de ligne sont supprimés et les noms de variables sont modifiés.

Avant de commencer

Les outils de développement de la plupart des navigateurs ont des fonctionnalités similaires. Nous nous concentrons sur Chrome DevTools dans ce module. Créons un environnement pour que vous puissiez explorer DevTools.

Nous partons du principe que votre environnement de développement Salesforce DX est configuré et que vous savez l’utiliser pour créer des composants Web Lightning et les déployer dans une organisation. Si vous ne maîtrisez pas encore ce processus, suivez le projet Prise en main rapide : composants Web Lightning avant de poursuivre ce module.

Vidéo de démonstration Trail Together

Vous souhaitez être guidé pas à pas par des experts pendant que vous travaillez sur cette étape ? Regardez cette vidéo qui fait partie de la série Trail Together sur Trailhead Live. Vous trouverez un lien vers la session complète dans la section Ressources.

Configuration de votre environnement de dépannage

Tout d’abord, vous devez configurer un Trailhead Playground avec quelques composants Web Lightning et le préparer au dépannage.

Prêt à vous initier aux composants Web Lightning ?

À présent, créez un Trailhead Playground pour suivre les étapes de ce module et tenter de les répéter. Faites défiler cette page vers le bas, cliquez sur le nom du Playground, puis sélectionnez Créer un Playground. Il faut généralement 3 à 4 minutes à Salesforce pour créer votre Trailhead Playground. Vous utilisez également le Playground au moment de relever les défis pratiques.

Oui, il faut vraiment un Trailhead Playground complètement nouveau ! Si vous utilisez une organisation ou un Playground existant, vous pourriez rencontrer des difficultés pour effectuer les défis.

Activer le mode de débogage

Cette étape facilite grandement le dépannage du code. Bien que les composants Web Lightning soient toujours compilés, avec le mode de débogage activé dans l’organisation, ils ne sont pas minifiés. Ainsi, les noms de variables restent les mêmes et la structure générale du code est conservée, ce qui facilite grandement le dépannage.

Dans Setup (Configuration), saisissez Debug Mode (Mode de débogage) dans la zone Quick Find (Recherche rapide), puis sélectionnez Debug Mode (Mode de débogage).
Cochez la case à côté de votre utilisateur.
Cliquez sur Enable (Activer).

Désactivation de la mise en cache lors du développement

Désactivez le paramètre de mise en cache sécurisée et permanente du navigateur pour observer l’effet des modifications du code sans vider le cache.

Le paramètre de mise en cache améliore les performances de rechargement des pages en évitant des échanges supplémentaires avec le serveur.

Dans Setup (Configuration), saisissez Session dans la zone de recherche rapide, puis sélectionnez Session Settings (Paramètres de session).
Désélectionnez la case à cocher à côté de Enable secure and persistent browser caching to improve performance (Activer la mise en cache du navigateur sécurisée et permanente pour améliorer les performances).
Cliquez sur Save (Enregistrer).

Après avoir désactivé le paramètre de mise en cache du navigateur, vous pouvez recharger une page pour tester vos modifications de code sans avoir à vider votre cache. Nous vous recommandons de réactiver le paramètre de mise en cache du navigateur après avoir débogué votre code.

Utilisation des composants Web Lightning de GitHub

Suivez les instructions dans le référentiel GitHub readme.
Depuis le lanceur d’application dans votre playground, recherchez et ouvrez Solutions, sous Items (Éléments).

Votre environnement est maintenant prêt à effectuer un dépannage à l’aide de DevTools sur le navigateur.

Vérifiez votre compréhension des points clés de cette section avec ces fiches.

Lisez la question ou le terme sur chaque fiche, puis touchez celle-ci ou cliquez dessus pour révéler la bonne réponse. Cliquez sur la flèche vers la droite pour passer à la carte suivante et sur la flèche vers la gauche pour revenir à la précédente.

Ouverture de DevTools

Jetons un œil à l’application Solutions avec Chrome DevTools.

Depuis le lanceur d’application dans votre playground, recherchez et ouvrez Solutions, sous Items (Éléments).
Faites un clic droit dans la fenêtre du navigateur et sélectionnez Inspect (Inspecter), puis cliquez sur l’onglet Sources.

Il existe plusieurs façons d’ouvrir DevTools dans le navigateur Chrome.

Dans le menu, cliquez sur Customize and control Google Chrome | More tools | Developer tools (Personnaliser et contrôler Google Chrome l Plus d’outils l Outils de développement) et sélectionnez Sources.

Appuyez sur F12 ou sur Ctrl + Maj + I (Windows) ou Command + Option + I (Mac).

L’application Solutions avec DevTools ouvert. Légendes correspondant à la description qui suit.

DevTools contient le menu DevTools (1) et, lorsque l’onglet Sources est sélectionné, le panneau Sources apparaît avec les éléments suivants :

Le volet File Navigator (Navigateur de fichiers) (2) répertorie tous les fichiers demandés à partir de cette page Web.
Le volet Code Editor (Éditeur de code) (3) affiche les fichiers sélectionnés dans le navigateur de fichiers.
Le volet JavaScript Debugging (Débogage JavaScript) (4) contient la barre d’outils de commande du point de contrôle et plusieurs outils que vous pouvez utiliser pour inspecter JavaScript.

Le menu DevTools propose plusieurs options qui vous permettent d’afficher différentes parties du navigateur. Dans ce module, nous travaillons principalement avec Sources et Console.

Utilisez le panneau Elements (Éléments) pour afficher et modifier le DOM et le CSS.
Utilisez le panneau Console pour lire des messages, comme ceux créés avec console.log(), interagir avec les variables et exécuter JavaScript.
Utilisez le panneau Sources pour afficher et déboguer les fichiers JavaScript.

Modification de l’emplacement de DevTools

Par défaut, les outils sont ancrés sur le côté droit de l’écran. Ils peuvent également être ancrés à gauche ou en bas de l’écran, ou même désancrés dans une fenêtre séparée.

Cliquez sur Customize and control DevTools (Personnaliser et contrôler DevTools) et sélectionnez le côté que vous souhaitez utiliser pour l’ancrage. (Les images dans ce module montrent DevTools ancré en bas.)

Les boutons d’options pour le côté de l’ancrage sont Undock into separate window (Désancrer dans une fenêtre séparée), Dock to left (Ancrer à gauche), Dock to bottom (Ancrer en bas) et Dock to right (Ancrer à droite).

Activation des formateurs personnalisés

Les composants Web Lightning utilisent des proxys JavaScript pour garantir que certains types de données sont en lecture seule, principalement les données fournies via les décorateurs (@api, @track, @wire). En mode de débogage, les formateurs personnalisés manipulent les proxys pour les transformer en éléments lisibles. Ensuite, dans Chrome DevTools, vous voyez la valeur réelle au lieu du proxy. Activons les formateurs personnalisés.

Dans DevTools, cliquez sur Settings (Paramètres) . La page des préférences s’ouvre.
Sous Console, sélectionnez Custom formatters (Formateurs personnalisés).

Utilisation de la liste d’éléments à ignorer

Ignore List (Liste d’éléments à ignorer) vous permet d’ignorer les fichiers JavaScript sélectionnés lors de l’utilisation de DevTools. Ainsi, vous ne vous arrêtez que sur vos propres exceptions. Cela vous permet d’ignorer le code d’infrastructure que vous ne souhaitez pas dépanner.

Dans Settings (Paramètres), cliquez sur Ignore List (Liste d’éléments à ignorer).
Cliquez sur Add pattern (Ajouter un schéma).
Saisissez /components/.*.js$, puis cliquez sur Add (Ajouter).
Fermez les paramètres.

Localisation des composants Web Lightning

Sous Sources, les composants Web Lightning sont affichés dans le navigateur de fichiers (sous Page). Tous les composants Web Lightning personnalisés pour la page actuelle se trouvent dans le dossier modules/c.

Dans DevTools, cliquez sur l’onglet Sources.
Dans le navigateur de fichiers, sous Page, développez lightning/n, puis modules/c.

Cliquez sur display.js. Le fichier s’ouvre dans l’éditeur de code.

Dans display.js, recherchez class Display. (Cliquez dans la fenêtre Code et appuyez sur Ctrl+F [sur Windows] ou sur Command + F [sur Mac]. Dans la zone Find [Rechercher], saisissez class Display.)

Notez que le code est compilé, mais pas minifié, donc les noms de variables ne sont pas modifiés.

Si vous ne voyez que quelques lignes de code dans le fichier JavaScript, cela signifie que le mode de débogage n’est pas activé dans l’organisation. Si l’activation du mode de débogage ne réinitialise pas le code dans l’éditeur de code, effectuez un rechargement complet : Avec DevTools ouvert, faites un clic droit sur le bouton Reload (Recharger) du navigateur, puis cliquez sur Hard Reload (Rechargement complet).