Vue d’ensemble de l’outil Sources

  • Article

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, Éditeur 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 Éditeur 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 Éditeur 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

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

Les sous-sections suivantes couvrent le volet Navigateur :

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

Utilisez l’onglet Page du volet Navigateur pour explorer le système de fichiers retourné par le serveur afin de construire la page web actuelle. Sélectionnez un fichier JavaScript pour l’afficher, le modifier et le déboguer. L’onglet Page répertorie toutes les ressources chargées par la page.

Onglet Page dans le volet Navigateur de l’outil Sources

Pour afficher un fichier dans le volet Éditeur , 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), sélectionnez le bouton ... (Plus d’options). Un menu s’affiche.
  2. Sélectionnez ou désactivez l’option Regrouper par dossier .

Utilisation de l’onglet Système de fichiers pour définir un espace de travail local

Utilisez l’onglet Système de fichiers du volet Navigateur pour ajouter des fichiers à un espace de travail, afin que les modifications que vous apportez dans DevTools soient enregistrées dans votre système de fichiers local.

Onglet Système de fichiers, pour un espace de travail

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 du volet Navigateur pour remplacer les ressources de page (telles que les images) par les fichiers d’un dossier local.

Les éléments de cet onglet remplacent ce que le serveur envoie au navigateur, même après que le serveur a envoyé les ressources.

Onglet Remplacements du volet Navigateur

La fonctionnalité Remplacements est similaire aux espaces de travail. 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.

Un fichier qui remplace un fichier retourné par le serveur est indiqué par un point violet en regard du nom de fichier, dans DevTools.

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 Éditeur, sélectionnez 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 , sélectionnez le bouton ... (Plus d’options), puis sélectionnez Ouvrir un 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 Éditeur pour afficher ou modifier des fichiers

Utilisez le volet Éditeur pour afficher les fichiers frontaux retournés par le serveur pour composer la page web active, notamment les fichiers JavaScript, HTML, CSS et image. Lorsque vous modifiez les fichiers frontaux dans le volet Éditeur , DevTools met à jour la page web pour exécuter le code modifié.

Volet Éditeur dans l’outil Sources

Le volet Éditeur offre 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 apportées à votre système de fichiers, consultez Utilisation de l’onglet Système de fichiers pour définir un espace de travail local, ci-dessus.

Les sous-sections suivantes couvrent le volet Éditeur :

Voir aussi :

Modification d’un fichier JavaScript

Pour modifier un fichier JavaScript dans DevTools, utilisez le volet Éditeur dans l’outil Sources .

Modification de JavaScript dans le volet Éditeur

Pour charger un fichier dans le volet Éditeur, 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 des fichiers avec des espaces de travail (onglet Système de fichiers).

Rechercher et remplacer

Pour rechercher du texte dans le fichier actif, sélectionnez le volet Éditeur 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 Éditeur 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.

Reformatage d’un fichier JavaScript minifié avec impression

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

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 Éditeur.

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 Éditeur , 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 de carte 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 d’un fichier CSS

Il existe deux façons de modifier CSS dans DevTools :

  • Dans l’outil Éléments , vous travaillez avec une propriété CSS à la fois, via des contrôles d’interface utilisateur. Cette approche est recommandée dans la plupart des cas. Pour plus d’informations, consultez Prise en main de l’affichage et de la modification de CSS.
  • Dans l’outil Sources , vous utilisez un éditeur de texte pour modifier des fichiers CSS.

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 des fichiers avec des espaces de travail (onglet Système de fichiers) 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 affichée devient vert :

h1 {
  color: green;
}

Modifier css dans le volet Éditeur 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 l’éditeur 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 Éditeur, 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 Éditeur, 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 Éditeur.

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

Affichage des 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 tiroir, qui apparaît en bas de DevTools.

Pour utiliser l’outil Source rapide :

  1. 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.

    En bas de la fenêtre DevTools, le tiroir s’affiche, avec l’outil Source rapide sélectionné. L’outil Source rapide contient le dernier fichier que vous avez modifié 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.

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 Éditeur .

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 Éditeur , 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 sélectionnez 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 tiroir situé 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 s’affiche automatiquement dans la section Étendue du volet Débogueur , et qu’elle est également superposée dans le volet Éditeur 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.

Extension Microsoft Edge DevTools pour Visual Studio Code

Cette extension permet d’accéder aux éléments et aux outils 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 Readme, 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 d’origine se trouve ici et est créée par Kayce Basques (Rédacteur technique, Chrome DevTools & Lighthouse).

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