Présentation du panneau "Sources"

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

Utilisez le panneau Sources pour afficher et modifier les ressources de votre site Web, comme les feuilles de style, les fichiers JavaScript et les images.

Présentation

Le panneau Sources vous permet d'effectuer les opérations suivantes :

Ouvrir le panneau "Sources"

Pour ouvrir le panneau "Sources", procédez comme suit:

  1. Ouvrez les outils de développement.
  2. Ouvrez le menu Command (Commande) en appuyant sur :
    • macOS: Commande+Maj+P
    • Windows, Linux et ChromeOS : Ctrl+Maj+P
  3. Commencez à saisir sources, sélectionnez Afficher le panneau "Sources", puis appuyez sur Entrée.

Vous pouvez également sélectionner more_vert Plus d'options > Plus d'outils > Sources en haut à droite.

Afficher les fichiers

Cliquez sur l'onglet Page pour afficher toutes les ressources chargées sur la page.

Onglet "Page".

Organisation de l'onglet Page:

  • Le niveau supérieur, tel que top dans la capture d'écran ci-dessus, représente un cadre HTML. Vous verrez top sur chaque page que vous consultez. top représente le cadre principal du document.
  • Le niveau 2, comme developers.google.com dans la capture d'écran ci-dessus, représente une origine.
  • Les niveaux 3, 4, etc. représentent les répertoires et les ressources chargés à partir de cette origine. Par exemple, sur la capture d'écran ci-dessus, le chemin d'accès complet à la ressource devsite-googler-button est developers.google.com/_static/19aa27122b/css/devsite-googler-button.

Cliquez sur un fichier de l'onglet Page pour afficher son contenu dans l'onglet Editor (Éditeur). Vous pouvez afficher n'importe quel type de fichier. Pour les images, un aperçu s'affiche.

Affichage d'un fichier dans l'onglet "Éditeur".

Modifier le CSS et le JavaScript

Cliquez sur l'onglet Éditeur pour modifier le code CSS et JavaScript. Les outils de développement mettent à jour la page pour exécuter le nouveau code.

L'éditeur vous aide également à déboguer. Par exemple, elle souligne et affiche des info-bulles d'erreur intégrées à côté des erreurs de syntaxe et d'autres problèmes, tels que les erreurs d'instructions CSS @import et url(), et les attributs HTML href avec des URL non valides.

Info-bulle d'erreur de syntaxe intégrée.

Si vous modifiez le background-color d'un élément, vous constaterez que le changement prend effet immédiatement.

Modification du CSS dans l'onglet "Éditeur".

Pour appliquer les modifications JavaScript, appuyez sur Commande+S (Mac) ou Ctrl+S (Windows, Linux). Les outils de développement ne réexécutent pas un script. Par conséquent, les seules modifications JavaScript qui s'appliquent sont celles effectuées dans les fonctions. Par exemple, notez que console.log('A') ne s'exécute pas, contrairement à console.log('B').

Modification du code JavaScript dans l'onglet "Éditeur"

Si les outils de développement ont réexécuté l'intégralité du script après avoir apporté la modification, le texte A aurait été consigné dans la console.

DevTools efface vos modifications CSS et JavaScript lorsque vous actualisez la page. Consultez Configurer un espace de travail pour découvrir comment enregistrer les modifications apportées à votre système de fichiers.

Créer, enregistrer et exécuter des extraits

Les extraits sont des scripts que vous pouvez exécuter sur n'importe quelle page. Imaginez que vous saisissez à plusieurs reprises le code suivant dans la console afin d'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);

À la place, vous pouvez enregistrer ce code dans un extrait de code et l'exécuter en quelques clics sur un bouton, à tout moment. Les outils de développement enregistrent l'extrait dans votre système de fichiers. Par exemple, examinez un extrait de code qui insère la bibliothèque jQuery dans une page.

Extrait qui insère la bibliothèque jQuery dans une page.

Pour exécuter un extrait :

  • Ouvrez le fichier dans l'onglet Extraits, puis cliquez sur Exécuter Bouton "Run" (Exécuter) dans la barre d'action en bas.
  • Ouvrez le menu de commandes, supprimez le caractère >, saisissez !, saisissez le nom de votre extrait, puis appuyez sur Entrée.

Pour en savoir plus, consultez Exécuter des extraits de code à partir de n'importe quelle page.

Déboguer JavaScript

Plutôt que d'utiliser console.log() pour déduire l'origine du problème JavaScript, envisagez plutôt d'utiliser les outils de débogage des outils pour les développeurs Chrome. L'idée générale est de définir un point d'arrêt, qui est un point d'arrêt intentionnel dans votre code, puis de parcourir l'exécution du code, une ligne à la fois.

Pause au niveau d'un point d'arrêt.

À mesure que vous parcourez le code, vous pouvez afficher et modifier les valeurs de toutes les propriétés et variables actuellement définies, exécuter JavaScript dans la console, etc.

Consultez Premiers pas avec le débogage JavaScript pour découvrir les principes de base du débogage dans DevTools.

Vous concentrer uniquement sur votre code

Les outils pour les développeurs Chrome vous permettent de vous concentrer uniquement sur le code que vous créez en filtrant le bruit généré par les frameworks et les outils de compilation que vous utilisez lorsque vous créez des applications Web.

Pour vous offrir une expérience de débogage Web moderne, les outils de développement effectuent les opérations suivantes:

En outre, si la fonctionnalité est compatible avec les frameworks, la pile d'appels dans le débogueur et les traces de la pile dans la console affichent l'historique complet des opérations asynchrones.

Pour en savoir plus, consultez les sections suivantes :

Configurer un espace de travail

Par défaut, lorsque vous modifiez un fichier dans le panneau Sources, ces modifications sont perdues lorsque vous actualisez la page. Les espaces de travail vous permettent d'enregistrer les modifications que vous apportez dans DevTools dans votre système de fichiers. En substance, cela vous permet d'utiliser les outils pour les développeurs comme éditeur de code.

Pour commencer, consultez Modifier des fichiers avec Workspaces.