Partager via

Vue d’ensemble de l’outil Sources

Utilisez l’outil Sources pour afficher, modifier et déboguer du code JavaScript frontal et inspecter les ressources qui composent la page web actuelle.

Contenu détaillé :

Volets Navigateur, Rédacteur et Débogueur

L’outil Sources comporte trois volets :

Volet Actions
Volet Navigateur Naviguez parmi les ressources retournées par le serveur pour construire la page web actuelle. Sélectionnez des fichiers, des images et d’autres ressources, puis affichez leurs chemins d’accès. Si vous le souhaitez, configurez un espace de travail local pour enregistrer les modifications directement dans les fichiers sources.
volet Rédacteur Affichez les fichiers JavaScript, HTML, CSS et autres qui sont retournés par le serveur. Apportez des modifications expérimentales à JavaScript ou CSS. Vos modifications sont conservées jusqu’à ce que vous actualisiez la page, ou sont conservées après l’actualisation de la page si vous enregistrez dans un fichier local avec espaces de travail. Lorsque vous utilisez des espaces de travail ou des remplacements, vous pouvez également modifier des fichiers HTML.
Volet Débogueur Utilisez le débogueur JavaScript pour définir des points d’arrêt, suspendre l’exécution de JavaScript et parcourir le code, y compris les modifications que vous avez apportées, tout en regardant les expressions JavaScript que vous spécifiez. Surveillez et modifiez manuellement les valeurs des variables qui sont dans l’étendue de la ligne de code actuelle.

La figure suivante montre le volet Navigateur mis en surbrillance avec une zone rouge dans le coin supérieur gauche de DevTools, le volet Rédacteur mis en surbrillance dans le coin supérieur droit et le volet Débogueur mis en évidence en bas. À l’extrême gauche se trouve la partie main de la fenêtre du navigateur, montrant la page web rendue grisée, car le débogueur est suspendu sur un point d’arrêt :

Volets de l’outil Sources, dans une disposition étroite

Lorsque DevTools est large, le volet Débogueur est placé sur la droite et inclut Étendue et Espion :

Naviguer, afficher, modifier et déboguer JavaScript retourné par le serveur

Pour optimiser la taille de l’outil Sources, décodez DevTools dans une fenêtre distincte et déplacez éventuellement la fenêtre DevTools vers un moniteur distinct. Consultez Modifier le positionnement de DevTools (Undock, Dock to bottom, Dock to left) (Undock, Dock to bottom, Dock to left).

Pour charger la page web de démonstration de débogage illustrée ci-dessus, consultez l’approche de base de l’utilisation d’un débogueur ci-dessous.

Utilisation du volet Navigateur pour sélectionner des fichiers

Utilisez le volet Navigateur (à gauche) pour naviguer parmi les ressources retournées par le serveur afin de construire la page web actuelle. Sélectionnez des fichiers, des images et d’autres ressources, puis affichez leurs chemins d’accès.

Volet Navigateur

Le volet Navigateur contient les onglets suivants :

Tabulation Description Documentation
Page Affichez les ressources que le navigateur a téléchargées à partir du serveur ou du système de fichiers, inspectez leur contenu et déboguez le code. Utilisation de l’onglet Page pour explorer les ressources qui construisent la page web actuelle
Espace Affichez et modifiez des fichiers locaux dans DevTools pour utiliser DevTools en tant qu’environnement de développement intégré (IDE) dans le navigateur. Ajouter un dossier local à l’espace de travail, pour utiliser DevTools pour modifier des fichiers et enregistrer les modifications sur le disque
Remplacements Testez les modifications apportées à une page web et conservez les modifications après l’actualisation de la page web, sans mapper vos modifications au code source de la page web. Utilisation de l’onglet Remplacements pour remplacer les fichiers serveur par des fichiers locaux
Scripts de contenu Affichez les scripts de contenu qui ont été chargés par une extension Microsoft Edge. Utilisation de l’onglet Scripts de contenu pour les extensions Microsoft Edge
Extraits de code Créez et enregistrez des extraits de code JavaScript pour pouvoir facilement exécuter un extrait de code JavaScript sur n’importe quelle page web. Utilisation de l’onglet Extraits de code pour exécuter des extraits de code JavaScript sur n’importe quelle page

Pour accéder aux onglets masqués du volet Navigateur, cliquez sur le bouton Plus d’onglets (Autres onglets).

Les détails sont ci-dessous. Également ci-dessous : Utilisation du menu de commandes pour ouvrir des fichiers.

Utilisation de l’onglet Page pour explorer les ressources qui construisent la page web actuelle

L’onglet Page de l’outil Sources affiche les ressources utilisées par la page web actuelle, telles que le document HTML, les fichiers JavaScript, les fichiers CSS ou les images de la page web. Les ressources affichées sous l’onglet Page sont organisées dans une arborescence qui correspond au système de fichiers ou au chemin d’accès du serveur à partir duquel elles ont été téléchargées.

Utilisez l’onglet Page pour afficher les ressources que le navigateur a téléchargées à partir du serveur ou du système de fichiers, inspecter leur contenu et déboguer le code.

Onglet Page dans le volet Navigateur de l’outil Sources

Pour afficher un fichier dans le volet Rédacteur, sélectionnez un fichier sous l’onglet Page. Pour une image, un aperçu de l’image s’affiche.

Pour afficher l’URL ou le chemin d’accès d’une ressource, pointez sur la ressource.

Pour charger un fichier dans un nouvel onglet du navigateur, ou pour afficher d’autres actions, cliquez avec le bouton droit sur le nom du fichier.

Icônes sous l’onglet Page

L’onglet Page utilise les icônes suivantes :

  • L’icône de fenêtre, ainsi que l’étiquette top, représente le main cadre de document, qui est un cadre HTML : l’icône de fenêtre
  • L’icône de cloud représente une origine : l’icône cloud
  • L’icône de dossier représente un répertoire : Icône de dossier
  • L’icône de page représente une ressource : Icône de page
Regrouper les fichiers par dossier ou sous forme de liste plate

L’onglet Page affiche les fichiers ou ressources regroupés par serveur et répertoire, ou sous forme de liste plate.

Pour modifier la façon dont les ressources sont regroupées :

  1. En regard des onglets du volet Navigateur (à gauche), cliquez sur le bouton ... (Plus d’options). Un menu s’affiche.
  2. Sélectionnez ou désactivez l’option Regrouper par dossier .

Ajouter un dossier local à l’espace de travail, pour utiliser DevTools pour modifier des fichiers et enregistrer les modifications sur le disque

Utilisez l’onglet Espace de travail de l’outil Sources pour afficher et modifier des fichiers locaux dans DevTools. L’onglet Espace de travail est utile lorsqu’il est utilisé conjointement avec un serveur web local, car vous pouvez ensuite charger votre site web local dans Edge et modifier ses fichiers sources dans DevTools.

Lorsque vous ajoutez un dossier à l’onglet Espace de travail , les fichiers et sous-dossiers de ce dossier s’affichent dans l’onglet , et vous pouvez ouvrir des fichiers pour les afficher et les modifier.

L’onglet Espace de travail n’affiche pas les ressources que le navigateur a téléchargées pour afficher la page web . L’onglet Espace de travail affiche uniquement les dossiers et fichiers qui se trouvent à l’intérieur des dossiers locaux que vous avez ajoutés.

Dans DevTools, un point vert « mappé » apparaît sur un fichier pour lequel DevTools a pu trouver un mappage entre le fichier d’espace de travail et la ressource de page web. Par exemple, si la page utilise une feuille de style appelée styles.css et que l’espace de travail a un fichier appelé styles.css, DevTools mappe les fichiers entre eux et affiche un point « mappé » vert.

Le point vert « mappé » indique que les modifications que vous apportez aux ressources de la page web seront enregistrées. Par exemple, lorsque vous apportez une modification dans l’onglet Styles de l’outil Éléments , vous modifiez la feuille de style de la page web (et non le fichier). Si le nom de fichier CSS affiché sous l’onglet Styles comporte un point vert « mappé », cette feuille de style a été mappée à un fichier dans votre espace de travail et vos modifications ne seront pas perdues.

Onglet Espace de travail dans l’outil Sources

Par défaut, lorsque vous modifiez un fichier dans l’outil Sources , vos modifications sont ignorées lorsque vous actualisez la page web. L’outil Sources fonctionne avec une copie des ressources frontales retournées par le serveur web. Lorsque vous modifiez ces fichiers frontaux retournés par le serveur, les modifications ne sont pas conservées, car vous n’avez pas modifié les fichiers sources. Vous devez également appliquer vos modifications dans votre code source réel, puis redéployer sur le serveur.

En revanche, lorsque vous utilisez un espace de travail, les modifications que vous apportez à votre code frontal sont conservées lorsque vous actualisez la page web. Avec un espace de travail, lorsque vous modifiez le code frontal retourné par le serveur, l’outil Sources applique également vos modifications à votre code source local. Ensuite, pour que les autres utilisateurs puissent voir vos modifications, il vous suffit de redéployer vos fichiers sources modifiés sur le serveur.

Les espaces de travail fonctionnent correctement lorsque le code JavaScript retourné par le serveur est identique à votre code source JavaScript local. Les espaces de travail ne fonctionnent pas aussi bien lorsque votre workflow implique des transformations sur votre code source, telles que la minification ou la compilation TypeScript .

Voir aussi :

Utilisation de l’onglet Remplacements pour remplacer les fichiers serveur par des fichiers locaux

Utilisez l’onglet Remplacements de l’outil Sources pour remplacer toute réponse d’un serveur web avec des fichiers locaux. L’onglet Remplacements est utile pour apporter des modifications temporaires à des fichiers individuels, tels qu’un fichier CSS, sur n’importe quel site web. Utilisez remplacements lorsque vous souhaitez tester les modifications apportées à une page web et que vous devez conserver les modifications après l’actualisation de la page web, mais que vous ne vous souciez pas du mappage de vos modifications au code source de la page web.

Pour commencer à utiliser l’onglet Remplacements , créez un dossier sur votre système de fichiers, puis sélectionnez ce dossier sous l’onglet Remplacements . À partir de là, toutes les modifications que vous apportez sous l’onglet Styles de l’outil Éléments ou sous l’onglet Page de l’outil Sources sont enregistrées dans le nouveau dossier. DevTools utilise les fichiers locaux pour remplacer les réponses du serveur correspondantes.

Onglet Remplacements du volet Navigateur

Voir aussi :

Utilisation de l’onglet Scripts de contenu pour les extensions Microsoft Edge

Utilisez l’onglet Scripts de contenu du volet Navigateur pour afficher les scripts de contenu qui ont été chargés par une extension Microsoft Edge que vous avez installée.

Onglet Scripts de contenu du volet Navigateur

Lorsque le débogueur effectue un pas à pas dans du code que vous ne reconnaissez pas, vous pouvez ajouter ce code à la liste Ignorer pour éviter d’entrer pas à pas dans ce code. Consultez Ajouter des scripts de contenu à la liste Ignorer.

Voir aussi :

Utilisation de l’onglet Extraits de code pour exécuter des extraits de code JavaScript sur n’importe quelle page web

Utilisez l’onglet Extraits de code du volet Navigateur pour créer et enregistrer des extraits de code JavaScript, afin de pouvoir facilement exécuter ces extraits de code sur n’importe quelle page web.

Extrait de code qui insère la bibliothèque jQuery dans une page web

Par exemple, supposons que vous entrez fréquemment le code suivant dans la console pour insérer la bibliothèque jQuery dans une page afin de pouvoir exécuter des commandes jQuery à partir de la console :

let script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.2.1.min.js';
script.crossOrigin = 'anonymous';
script.integrity = 'sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=';
document.head.appendChild(script);

Au lieu de cela, vous pouvez enregistrer ce code dans un extrait de code , puis l’exécuter facilement chaque fois que vous en avez besoin. Lorsque vous appuyez sur Ctrl+S (Windows, Linux) ou Cmd+S (macOS), DevTools enregistre l’extrait de code dans votre système de fichiers.

Il existe plusieurs façons d’exécuter un extrait de code :

  • Dans le volet Navigateur , sélectionnez l’onglet Extraits de code , puis sélectionnez le fichier d’extraits de code pour l’ouvrir. Ensuite, en bas du volet Rédacteur, cliquez sur le bouton Exécuter (bouton Exécuter).
  • Lorsque DevTools a le focus, appuyez sur Ctrl+P (Windows, Linux) ou Cmd+P (macOS) pour ouvrir le menu Commandes, puis tapez !.

Les extraits de code sont similaires aux bookmarklets.

Voir aussi :

Utilisation du menu commandes pour ouvrir des fichiers

Pour ouvrir un fichier, en plus d’utiliser le volet Navigateur dans l’outil Sources , vous pouvez utiliser le menu Commandes n’importe où dans DevTools.

  • De n’importe où dans DevTools, appuyez sur Ctrl+P sur Windows/Linux ou sur Cmd+P sur macOS. Le menu Commandes s’affiche et répertorie toutes les ressources qui se trouvent dans les onglets du volet Navigateur de l’outil Sources .
  • Ou, en regard des onglets du volet Navigateur dans l’outil Sources , cliquez sur le bouton Autres options (...), puis sélectionnez Ouvrir le fichier.

Pour afficher et sélectionner dans une liste de tous les fichiers .js, tapez .js.

Ouverture d’un fichier à l’aide du menu Commandes

Si vous tapez ?, le menu Commande affiche plusieurs commandes, notamment ... Ouvrez le fichier. Si vous appuyez sur Retour arrière pour effacer le menu Commandes, une liste de fichiers s’affiche.

Pour plus d’informations, consultez Exécuter des commandes avec le menu de commandes Microsoft Edge DevTools.

Utilisation du volet Rédacteur pour afficher ou modifier des fichiers

Utilisez le volet Rédacteur pour afficher ou modifier des fichiers, notamment des fichiers JavaScript, HTML, CSS et image. Le volet Rédacteur affiche le contenu du fichier que vous avez sélectionné dans l’un des onglets du volet Navigateur :

  • Page
  • Espace
  • Remplacements
  • Scripts de contenu
  • Extraits de code

Par exemple, le volet Rédacteur peut afficher :

  • Contenu d’un extrait de code.
  • Contenu d’un fichier d’espace de travail qui n’est pas réellement utilisé dans votre code frontal (car Workspace vous permet de modifier le contenu de n’importe quel dossier de votre choix).

Volet Rédacteur dans l’outil Sources

Le volet Rédacteur a le niveau de prise en charge suivant pour différents types de fichiers :

Type de fichier Actions prises en charge
JavaScript Afficher, modifier et déboguer.
CSS Afficher et modifier.
HTML Afficher et modifier.
Images Afficher.

Par défaut, les modifications sont ignorées lorsque vous actualisez la page web. Pour plus d’informations sur l’enregistrement des modifications dans votre système de fichiers, consultez Ajouter un dossier local à l’espace de travail, pour utiliser DevTools pour modifier des fichiers et enregistrer les modifications sur le disque, ci-dessus.

Les sous-sections suivantes couvrent le volet Rédacteur :

Voir aussi :

Modification d’un fichier JavaScript

Pour modifier un fichier JavaScript dans DevTools, utilisez le volet Rédacteur dans l’outil Sources.

Modification de JavaScript dans le volet Rédacteur

Pour charger un fichier dans le volet Rédacteur, utilisez l’onglet Page dans le volet Navigateur (à gauche). Vous pouvez également utiliser le menu Commande, comme suit : dans le coin supérieur droit de DevTools, sélectionnez Personnaliser et contrôler DevTools (...), puis sélectionnez Ouvrir un fichier.

Voir aussi :

Enregistrer et annuler

Pour que les modifications JavaScript prennent effet, appuyez sur Ctrl+S (Windows, Linux) ou Cmd+S (macOS).

Si vous modifiez un fichier, un astérisque apparaît en regard du nom du fichier.

  • Pour enregistrer les modifications, appuyez sur Ctrl+S sur Windows/Linux ou sur Cmd+S sur macOS.
  • Pour annuler une modification, appuyez sur Ctrl+Z sur Windows/Linux ou sur Cmd+Z sur macOS.

Par défaut, vos modifications sont ignorées lorsque vous actualisez la page web. Pour plus d’informations sur l’enregistrement des modifications dans votre système de fichiers local, consultez Modifier et enregistrer des fichiers dans un espace de travail (onglet Espace de travail de l’outil Sources).

Rechercher et remplacer

Pour rechercher du texte dans le fichier actif, sélectionnez le volet Rédacteur pour lui donner le focus, puis appuyez sur Ctrl+F sur Windows/Linux ou sur Cmd+F sur macOS.

Rechercher et remplacer, dans le volet Rédacteur de l’outil Sources

Pour rechercher et remplacer du texte, sélectionnez le bouton Remplacer (A-B>) à gauche de la zone de texte Rechercher. Le bouton Remplacer (A-B>) s’affiche lors de l’affichage d’un fichier modifiable.

Affichage des modifications que vous avez apportées

Lorsque vous définissez un espace de travail, les modifications apportées à JavaScript sont enregistrées et sont visibles dans l’outil Modifications .

Pour passer en revue les modifications apportées à un fichier, cliquez avec le bouton droit dans le volet Rédacteur, puis sélectionnez Modifications locales.

Le panneau Affichage rapide s’ouvre en bas de DevTools et affiche vos modifications dans l’onglet Modifications .

Affichage des modifications locales, sous l’onglet Modifications du panneau Affichage rapide

Voir aussi :

Les modifications à l’intérieur d’une fonction prennent effet

Lorsque vous définissez un espace de travail, les modifications à l’intérieur d’un corps de fonction JavaScript prennent effet.

DevTools n’exécute pas de script, donc les seules modifications JavaScript qui prennent effet sont les modifications que vous apportez dans les fonctions. Par exemple, dans la figure suivante, nous avons ajouté le code suivant au code JavaScript retourné par le serveur :

  • Nous avons ajouté l’instruction console.log('A') en dehors de toute fonction.
  • Nous avons ajouté l’instruction console.log('B') à l’intérieur d’une onClick fonction . Nous avons ensuite enregistré les modifications, entré des numéros dans le formulaire, puis sélectionné le bouton formulaire pour envoyer le formulaire.

Après l’envoi du formulaire, console.log('A'), qui est à l’étendue globale, ne s’exécute pas, mais console.log('B'), à l’intérieur d’une onClick fonction, s’exécute, en sortant B vers la console :

JavaScript de portée globale n’est pas réexécuté

Reformatage d’un fichier JavaScript minifié avec impression

Les fichiers minifiés sont automatiquement reformatés lorsque vous les ouvrez dans le volet Rédacteur.

Pour rétablir l’état minimal du fichier d’origine, cliquez sur le bouton Pretty print (Format), qui s’affiche sous forme d’accolades, en bas du volet Rédacteur.

Bouton Impression joli

Pour plus d’informations, consultez Reformat a minified JavaScript file with pretty-print.

Mappage de code minifié à votre code source pour afficher le code lisible

Les mappages de sources à partir de préprocesseurs obligent DevTools à charger vos fichiers sources JavaScript d’origine en plus de vos fichiers JavaScript minifiés et transformés qui sont retournés par le serveur. Vous affichez ensuite vos fichiers sources d’origine pendant que vous définissez des points d’arrêt et parcourez le code pas à pas. Pendant ce temps, Microsoft Edge exécute votre code minifié.

Dans le volet Rédacteur, si vous cliquez avec le bouton droit sur un fichier JavaScript, puis sélectionnez Ajouter une carte source, une zone contextuelle s’affiche, avec une zone de texte Url du mappage source et un bouton Ajouter.

L’approche de mappage source permet à votre code frontal de rester lisible et débogué même après avoir combiné, minifié ou compilé. Pour plus d’informations, consultez Mapper le code traité à votre code source d’origine pour le débogage.

Transformations du code source vers du code frontal compilé

Si vous utilisez une infrastructure qui transforme vos fichiers JavaScript, comme React, votre code JavaScript source local peut être différent du javascript frontal retourné par le serveur. Les espaces de travail ne sont pas pris en charge dans ce scénario, mais le mappage de code source est pris en charge dans ce scénario.

Dans un environnement de développement, votre serveur peut inclure vos mappages sources et vos fichiers d’origine .ts ou .jsx pour React. L’outil Sources affiche ces fichiers, mais ne vous permet pas de les modifier. Lorsque vous définissez des points d’arrêt et que vous utilisez le débogueur, DevTools affiche vos fichiers ou .jsx d’origine.ts, mais pas à pas la version réduite de vos fichiers JavaScript.

Dans ce scénario, l’outil Sources est utile pour inspecter et parcourir pas à pas le code JavaScript frontal transformé retourné par le serveur. Utilisez le débogueur pour définir des expressions Espion et utilisez la console pour entrer des expressions JavaScript afin de manipuler les données incluses dans l’étendue.

Modification de CSS

Il existe deux emplacements pour modifier les règles CSS et leurs propriétés dans DevTools :

  • Sous l’onglet Styles de l’outil Éléments , modifiez les propriétés CSS via des contrôles d’interface utilisateur.

  • Sous l’onglet Page ou Espace de travail de l’outil Sources , utilisez l’éditeur de texte pour modifier un fichier CSS.

Modification de CSS à l’aide de l’onglet Styles de l’outil Éléments, lors de l’utilisation de l’onglet Espace de travail de l’outil Sources

Voir aussi :

Modification de CSS sous l’onglet Page ou l’onglet Espace de travail de l’outil Sources

L’onglet Page ou Espace de travail de l’outil Sources prend en charge la modification directe d’un fichier CSS. Par exemple, si vous modifiez le fichier CSS à partir du didacticiel Modifier et enregistrer des fichiers dans un espace de travail (onglet Espace de travail de l’outil Sources) pour qu’il corresponde à la règle de style ci-dessous, l’élément H1 situé dans le coin supérieur gauche de la page web rendue devient vert :

h1 {
  color: green;
}

Modifier css dans le volet Rédacteur pour modifier la couleur du texte de l’en-tête H1 en vert

Les modifications CSS prennent effet immédiatement ; vous n’avez pas besoin d’enregistrer manuellement les modifications.

Voir aussi :

Modification d’un fichier HTML

Il existe deux façons de modifier du code HTML dans DevTools :

  • Dans l’outil Éléments , vous travaillez avec un élément HTML à la fois, via des contrôles d’interface utilisateur.
  • Dans l’outil Sources , vous utilisez un éditeur de texte.

Éditeur HTML de l’outil Sources

Contrairement à un fichier JavaScript ou CSS, un fichier HTML retourné par le serveur web ne peut pas être directement modifié dans l’outil Sources. Pour modifier un fichier HTML à l’aide de la Rédacteur de l’outil Sources, le fichier HTML doit se trouver dans un espace de travail ou sous l’onglet Remplacements. Consultez les sous-sections suivantes de l’article actuel :

Pour enregistrer les modifications, appuyez sur Ctrl+S sur Windows/Linux ou sur Cmd+S sur macOS. Un fichier modifié est marqué par un astérisque.

Pour rechercher du texte, appuyez sur Ctrl+F sur Windows/Linux ou sur Cmd+F sur macOS.

Pour annuler une modification, appuyez sur Ctrl+Z sur Windows/Linux ou sur Cmd+Z sur macOS.

Pour afficher d’autres commandes lors de la modification d’un fichier HTML, dans le volet Rédacteur, cliquez avec le bouton droit sur le fichier HTML.

Voir aussi :

Atteindre un numéro de ligne ou une fonction

Pour accéder à un numéro de ligne ou à un symbole (tel qu’un nom de fonction) dans le fichier qui est ouvert dans le volet Rédacteur, vous pouvez utiliser le menu Commandes au lieu de faire défiler le fichier.

  1. Dans le volet Navigateur , sélectionnez les points de suspension (...) (Autres options), puis sélectionnez Ouvrir un fichier. Le menu Commandes s’affiche.
  2. Tapez l’un des caractères suivants :
Personnage Nom de la commande Objectif
: Accéder à la ligne Accédez à un numéro de ligne.
@ Accéder au symbole Accédez à une fonction. Lorsque vous tapez @, le menu commande répertorie les fonctions qui se trouvent dans le fichier JavaScript qui est ouvert dans le volet Rédacteur.

Pour plus d’informations, consultez Exécuter des commandes avec le menu de commandes Microsoft Edge DevTools.

Outil source rapide, pour afficher les fichiers sources lors de l’utilisation d’un autre outil

L’emplacement main pour afficher les fichiers sources dans DevTools se trouve dans l’outil Sources. Mais parfois, vous devez accéder à d’autres outils, tels que des éléments ou une console, lors de l’affichage ou de la modification de vos fichiers sources. Vous utilisez l’outil Source rapide dans le panneau Affichage rapide en bas de DevTools.

Pour utiliser l’outil Source rapide :

  1. Dans la barre d’activité en haut de DevTools, sélectionnez un outil autre que l’outil Sources , tel que l’outil Éléments .

  2. Appuyez sur Ctrl+Maj+P (Windows, Linux) ou Cmd+Maj+P (macOS). Le menu Commandes s’ouvre.

  3. Tapez quick, puis sélectionnez Afficher la source rapide.

    Le panneau Affichage rapide s’ouvre en bas de DevTools, avec l’outil Source rapide sélectionné. L’outil Source rapide affiche les fichiers ouverts dans l’outil Sources , dans une version compacte de l’éditeur de code DevTools.

  4. Appuyez sur Ctrl+P (Windows, Linux) ou Cmd+P (macOS) pour ouvrir la boîte de dialogue Ouvrir un fichier.

Voir aussi :

Utilisation du volet Débogueur pour déboguer du code JavaScript

Utilisez le débogueur JavaScript pour parcourir pas à pas le code JavaScript retourné par le serveur. Le débogueur inclut le volet Débogueur, ainsi que les points d’arrêt que vous définissez sur les lignes de code dans le volet Rédacteur.

Avec le débogueur, vous parcourez le code tout en observant les expressions JavaScript que vous spécifiez. Surveillez et modifiez manuellement les valeurs des variables et affichez automatiquement les variables qui sont dans l’étendue de l’instruction actuelle.

Volet Débogueur de l’outil Sources

Le débogueur prend en charge les actions de débogage standard, telles que :

  • Définition de points d’arrêt pour suspendre le code.
  • Exécution pas à pas dans le code.
  • Affichage et modification des propriétés et des variables.
  • Surveillance des valeurs des expressions JavaScript.
  • Affichage de la pile des appels (séquence d’appels de fonction jusqu’à présent).

Le débogueur dans DevTools est conçu pour ressembler au débogueur dans Visual Studio Code et au débogueur dans Visual Studio.

Les sous-sections suivantes couvrent le débogage :

L’approche de base de l’utilisation d’un débogueur

Pour résoudre les problèmes de code JavaScript, vous pouvez insérer console.log() des instructions dans votre code. Une autre approche plus puissante consiste à utiliser le débogueur de Microsoft Edge DevTools. L’utilisation d’un débogueur peut en fait être plus simple que , une fois que console.log()vous êtes familiarisé avec l’approche du débogueur.

Pour utiliser un débogueur sur une page web, vous définissez généralement un point d’arrêt, puis envoyez un formulaire à partir de la page web, comme suit :

  1. Ouvrez la page web Démonstration : Prise en main du débogage de JavaScript avec Microsoft Edge DevTools dans une nouvelle fenêtre ou un nouvel onglet.

  2. Cliquez avec le bouton droit n’importe où dans la page web, puis sélectionnez Inspecter. Ou appuyez sur F12. La fenêtre DevTools s’ouvre, en regard de la page web de démonstration.

  3. Dans DevTools, sélectionnez l’onglet Sources .

  4. Dans le volet Navigateur (à gauche), sélectionnez l’onglet Page , puis le fichier JavaScript, tel que get-started.js.

  5. Dans le volet Rédacteur, sélectionnez un numéro de ligne près d’une ligne de code suspecte pour définir un point d’arrêt sur cette ligne. Dans la figure ci-dessous, un point d’arrêt est défini sur la ligne var sum = addend1 + addend2;.

  6. Dans la page web, entrez des valeurs et envoyez le formulaire. Par exemple, entrez des nombres, tels que 5 et 1, puis cliquez sur le bouton Ajouter un nombre 1 et un nombre 2.

    Le débogueur exécute le code JavaScript, puis s’interrompt au point d’arrêt. Le débogueur est maintenant en mode Pause, ce qui vous permet d’inspecter les valeurs des propriétés qui sont dans l’étendue et d’exécuter le code pas à pas.

    Entrée en mode Pause du débogueur

    Dans la figure ci-dessus, nous avons ajouté les expressions sum Watch et typeof sum, et nous avons passé deux lignes au-delà du point d’arrêt.

  7. Examinez les valeurs du volet Étendue , qui affiche toutes les variables ou propriétés qui sont dans l’étendue du point d’arrêt actuel, ainsi que leurs valeurs.

    À ce stade, vous pouvez ajouter des expressions dans le volet Espion . Ces expressions sont les mêmes que celles que vous écrivez dans une console.log instruction pour déboguer votre code.

    Pour exécuter des commandes JavaScript afin de manipuler des données dans le contexte actuel, vous utilisez la console . Si vous souhaitez ouvrir la console dans le panneau Affichage rapide en bas de DevTools, appuyez sur Échap.

  8. Parcourez le code à l’aide des contrôles en haut du volet Débogueur , comme Étape (F9).

    Le bogue de cette démonstration est que vous devez d’abord convertir les données d’entrée des chaînes en nombres.

  9. Pour corriger le bogue, actualisez la page pour réinitialiser le formulaire de la page web, puis modifiez la ligne :

    var sum = addend1 + addend2;

    À:

    var sum = parseInt(addend1) + parseInt(addend2);

  10. Appuyez sur Ctrl+S (Windows, Linux) ou Cmd+S (macOS) pour enregistrer la modification dans le fichier mis en cache local.

  11. Entrez 5 et 1 dans la page web, puis cliquez sur le bouton Ajouter . Maintenant , l’étendue>somme locale>: est le nombre 6, au lieu de la chaîne « 51 ».

Voir aussi :

Avantages de la surveillance et de l’étendue du débogueur sur console.log

Ces trois approches sont équivalentes :

  • Ajout temporaire des instructions console.log(sum) et console.log(typeof sum) dans le code, où sum est dans l’étendue.

  • Émission des instructions sum et console.log(typeof sum) dans le volet Console des DevTools, lorsque le débogueur est suspendu là où sum est dans l’étendue.

  • Définition des expressions sumEspion et typeof sum dans le volet Débogueur.

Lorsque la variable sum est dans l’étendue et sum que sa valeur est automatiquement affichée dans la section Étendue du volet Débogueur, elle est également superposée dans le volet Rédacteur où sum est calculé. Vous n’aurez donc probablement pas besoin de définir une expression Watch pour sum.

Le débogueur offre un affichage et un environnement plus riches et plus flexibles qu’une console.log instruction. Par exemple, dans le débogueur, à mesure que vous parcourez le code, vous pouvez afficher et modifier les valeurs de toutes les propriétés et variables actuellement définies. Vous pouvez également émettre des instructions JavaScript dans la console, par exemple pour modifier des valeurs dans un tableau qui est dans l’étendue. (Pour afficher la console, appuyez sur Échap.)

Les points d’arrêt et les expressions Espion sont conservés lorsque vous actualisez la page web.

Déboguer directement à partir de Visual Studio Code

Pour utiliser le débogueur plus complet de Visual Studio Code au lieu du débogueur DevTools, utilisez l’extension Microsoft Edge DevTools pour Visual Studio Code.

L’extension Microsoft Edge DevTools pour Visual Studio Code

Cette extension permet d’accéder aux outils Éléments et Réseau de Microsoft Edge DevTools, à partir de Microsoft Visual Studio Code.

Pour plus d’informations, consultez Visual Studio Code pour le développement web et la page GitHub Lisez-moi, Outils de développement Microsoft Edge pour Visual Studio Code.

Articles sur le débogage

Les articles suivants couvrent le volet débogueur et les points d’arrêt :

Voir également

Remarque

Certaines parties de cette page sont des modifications fondées sur le travail créé et partagé par Google et utilisées conformément aux conditions décrites dans la licence internationale 4,0 d’attribution créative. La page originale se trouve ici et est créée par Kayce Basques.

Licence Creative Commons Cette œuvre est concédée sous licence creative commons attribution 4.0 international.