Exemple : outil DevTools personnalisé

L’exemple « Outil DevTools personnalisé » est une extension Microsoft Edge qui ajoute un outil personnalisé dans Microsoft Edge DevTools, qui a son propre onglet dans la barre d’activité.

Introduction

L’outil DevTools personnalisé ajoute un onglet et un panneau Outils personnalisés dans DevTools dans Microsoft Edge :

L’outil Personnalisé affiche des informations de mémoire et envoie des messages entre la page web inspectée et le panneau dans DevTools.

L’outil DevTools personnalisé appelle l’API DevTools pour afficher des informations de mémoire.

La page web sous inspection et l’outil DevTools personnalisé s’envoient des messages les uns aux autres.

Utilisez cet article pour télécharger, installer et exécuter l’exemple. Pour en savoir plus sur le code de cet exemple, consultez Ajouter un outil personnalisé dans Microsoft Edge DevTools.

Étape 1 : Télécharger l’exemple

Si ce n’est pas encore fait, téléchargez la branche « main » du dépôt Demos, ou clonez (ou dupliquez et clonez) le dépôt. Le téléchargement du référentiel est le plus simple et est décrit ci-dessous.

Téléchargez la branche « main » du dépôt Demos, comme suit :

1. Dans Microsoft Edge, accédez au dépôt MicrosoftEdge/Demos .

2. Cliquez sur la flèche vers le bas dans le bouton Code , puis sélectionnez Télécharger le fichier ZIP.

3. Dans Microsoft Edge, la boîte de dialogue Téléchargements affiche Demos-main.zip. « -main » est ajouté, ce qui signifie une instantané statique de la branche « main » du dépôt.

4. Pointez à droite de Demos-main.zip, puis cliquez sur le bouton Afficher dans le dossier .

   Explorateur de fichiers s’ouvre, affichant le dossier Téléchargements.

5. Cliquez avec le bouton droit sur Demos-main.zip, puis sélectionnez Extraire tout.

   La boîte de dialogue Extraire les dossiers compressés s’ouvre .

6. Cliquez sur le bouton Extraire .

   La boîte de dialogue % terminée s’ouvre, puis se termine.

7. Déplacez le Demos-main dossier vers un emplacement de dépôts GitHub, tel que C:\Users\localAccount\GitHub.

Étape 2 : Installer l’extension pour ajouter l’outil dans DevTools

1. Dans Microsoft Edge, ouvrez une nouvelle fenêtre ou un nouvel onglet.

2. Sélectionnez Paramètres et plus (), pointez sur Extensions, puis sélectionnez Gérer les extensions.

   L’onglet Extensions et la page s’ouvrent (edge://extensions).

3. Activez le bouton bascule Mode développeur .

4. Cliquez sur Charger décompressé.

   La boîte de dialogue Sélectionner le répertoire de l’extension s’ouvre.

5. Accédez au /Demos-main/devtools-extension dossier, par C:\Users\localAccount\GitHub\Demos-main\devtools-extension\exemple , puis cliquez sur le bouton Sélectionner un dossier .

   Le carte de l’outil DevTools personnalisé s’affiche :

   

Étape 3 : Sélectionner l’outil personnalisé dans DevTools

1. Dans Microsoft Edge, accédez à une page web, telle que l’application To Do, dans une nouvelle fenêtre ou un nouvel onglet.

   L’outil DevTools personnalisé nécessite une page web, et non un onglet vide.

2. Cliquez avec le bouton droit sur la page web, puis sélectionnez Inspecter.

   DevTools s’ouvre.

3. Dans la barre d’activité de DevTools, cliquez sur l’onglet de l’outil Personnalisé ().

   L’onglet et le panneau Outils personnalisés s’affichent :

   

   Si l’onglet de l’outil Personnalisé () n’est pas visible, effectuez l’une des opérations suivantes :

   • Cliquez sur le bouton Plus d’outils (), puis sélectionnez .

   • Élargissez DevTools, puis cliquez sur l’onglet de l’outil Personnalisé ().

   La page DevTools personnalisée comporte plusieurs sections :

   • Informations d’affichage de la mémoire.

   • Bouton permettant d’envoyer un message de DevTools à la page web inspectée, pour que la page affiche une boîte de dialogue JavaScript alert .

   • Zone d’affichage Coordonnées pour envoyer un message à partir de la page web inspectée à la console DevTools et aux outils personnalisés .

Étape 4 : Afficher les informations de mémoire à l’aide d’un appel d’API d’extension

• Dans l’outil personnalisé , en regard de Capacité de mémoire disponible, observez la mise à jour une fois par seconde de la valeur :

  

Étape 5 : Envoyer un message de DevTools à la page inspectée

1. Dans l’outil Personnalisé , cliquez sur le bouton Say Hello .

   Une boîte de dialogue JavaScript alert s’ouvre, affichant le message suivant : « Bonjour à partir de l’extension DevTools ! »

   

   DevTools envoie un message à la page web inspectée, ce qui entraîne l’affichage d’une alerte par JavaScript.

2. Cliquez sur le bouton OK .

   La boîte de dialogue se ferme.

Étape 6 : Envoyer un message de la page inspectée à DevTools

1. Dans la page web inspectée, cliquez sur différents emplacements.

   Dans l’outil Personnalisé , en regard de Coordonnées, les coordonnées sont affichées et mises à jour lorsque vous cliquez sur :

   

2. Dans DevTools, dans la barre d’activité, sélectionnez l’outil Console ().

3. Dans la page web inspectée, cliquez sur différents emplacements.

   Les coordonnées cliquées s’affichent dans la console :

   

Étape 7 : Modifier l’outil personnalisé

1. Si ce n’est pas déjà fait, installez Visual Studio Code.

2. Ouvrez Visual Studio Code.

3. Cliquez sur le menu Fichier , puis sur Ouvrir le dossier.

   La boîte de dialogue Ouvrir le dossier s’ouvre.

4. Accédez au /Demos-main/devtools-extension/ dossier, par C:\Users\localAccount\GitHub\Demos-main\devtools-extension\exemple , puis cliquez sur le bouton Sélectionner un dossier .

   Dans le volet Explorer, le /devtools-extension/ dossier s’affiche.

5. Cliquez sur panel.html.

   panel.html est ouvert pour modification :

   

6. Ajoutez « My » à l’en-tête <h2> ; remplacez par :

   <h2>Custom DevTools Tool</h2>
   

   à :

   <h2>My Custom DevTools Tool</h2>
   

7. Enregistrez panel.html.

8. Dans le volet Explorer, cliquez sur manifest.json.

   manifest.json est ouvert pour modification.

9. Ajoutez « My » à ; nameremplacez par :

   "name": "Custom DevTools Tool",
   

   à :

   "name": "My Custom DevTools Tool",
   

10. Enregistrez manifest.json.

Étape 8 : Recharger l’outil personnalisé modifié

1. Dans Microsoft Edge, sélectionnez Paramètres et bien plus (), pointez sur Extensions, puis sélectionnez Gérer les extensions.

   L’onglet Extensions et la page s’ouvrent (edge://extensions).

2. Dans l’outil DevTools personnalisé carte, cliquez sur le lien Recharger.

   Le carte affiche maintenant My Custom DevTools Tool comme nom de l’extension :

   

Étape 9 : Utiliser l’outil personnalisé modifié

1. Accédez à une page web, telle que l’application To Do, dans une nouvelle fenêtre ou un nouvel onglet.

   L’outil DevTools personnalisé nécessite une page web, et non un onglet vide.

2. Cliquez avec le bouton droit sur la page web, puis sélectionnez Inspecter.

   DevTools s’ouvre.

3. Dans la barre d’activité de DevTools, cliquez sur l’onglet de l’outil Personnalisé ().

   L’outil Personnalisé s’affiche, avec le mot My ajouté à l’en-tête dans le panneau :

   

   Si le titre indique toujours Outil DevTools personnalisé au lieu de My Custom DevTools Tool, fermez et rouvrez DevTools.

   Si l’onglet de l’outil Personnalisé () n’est pas visible, effectuez l’une des opérations suivantes :

   • Cliquez sur le bouton Plus d’outils (), puis sélectionnez .

   • Élargissez DevTools, puis cliquez sur l’onglet de l’outil Personnalisé ().

Il s’agit de la fin des étapes d’utilisation et de modification de l’exemple d’extension DevTools.

Résolution des problèmes

Si l’onglet Personnalisé n’est pas visible dans DevTools, ou s’il est obsolète et n’affiche pas vos dernières modifications de code :

• Élargissez DevTools pour afficher de nombreux outils dans la barre d’activité.

• Fermez et rouvrez DevTools.

• Actualisez ou actualisez la page inspectée.

• Dans Microsoft Edge, dans la page Extensions , cliquez sur Recharger pour l’extension.

• Si aucune icône n’est fournie dans une telle extension, l’onglet lorsqu’il n’est pas sélectionné est étroit et gris, à droite de la barre d’activité. Cliquez sur l’onglet gris étroit.

• Accédez à une page web, et non à un onglet vide. Le code de l’exemple « Outil DevTools personnalisé » nécessite une page web.

Lorsque la barre d’activité est étroite, l’outil Devtools personnalisé est ajouté au menu Autres outils de la barre d’activités.

L’onglet Personnalisé n’a pas de commande Supprimer de la barre d’activité dans le menu contextuel.

Voir aussi