Présentation du panneau "Sources"

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

Utilisez le panneau Sources pour afficher et modifier les ressources de votre site Web, telles que 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. Accédez aux outils de développement.
  2. Ouvrez le menu Command en appuyant sur :
    • macOS: Command+Shift+P
    • Windows, Linux, ChromeOS: Control+Shift+P
  3. Commencez à saisir sources, sélectionnez Afficher le panneau "Sources", puis appuyez sur Entrée.

Vous pouvez également cliquer sur 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 par 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 trouverez top sur chaque page que vous consultez. top représente le cadre du document principal.
  • Le deuxième niveau, tel que developers.google.com dans la capture d'écran ci-dessus, représente une origine.
  • Les troisième, quatrième niveaux, etc., représentent les répertoires et les ressources qui ont été chargés à partir de cette origine. Par exemple, dans 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 dans l'onglet Page pour afficher son contenu dans l'onglet É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 code CSS et 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 votre nouveau code.

L'éditeur vous aide également à déboguer. Par exemple, il 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 instructions CSS @import et url() qui ont échoué, ainsi que les attributs HTML href avec des URL non valides.

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

Si vous modifiez la background-color d'un élément, vous verrez que la modification prend effet immédiatement.

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

Pour que les modifications JavaScript prennent effet, appuyez sur Command+S (Mac) ou Control+S (Windows, Linux). Les outils de développement n'exécutent pas à nouveau un script. Par conséquent, seules les modifications JavaScript que vous apportez dans les fonctions prennent effet. Par exemple, notez que console.log('A') ne s'exécute pas, contrairement à console.log('B').

Modification de JavaScript dans l'onglet "Éditeur".

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

Les outils de développement effacent vos modifications CSS et JavaScript lorsque vous rechargez la page. Consultez Configurer un espace de travail pour découvrir comment enregistrer les modifications dans 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 pour 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);

Vous pouvez enregistrer ce code dans un extrait et l'exécuter en quelques clics chaque fois que vous en avez besoin. Les outils de développement enregistrent l'extrait dans votre système de fichiers. Par exemple, examinez un extrait 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 "Exécuter" dans la barre d'actions en bas.
  • Ouvrez le menu Command , supprimez le caractère > , saisissez !, puis le nom de votre extrait et appuyez sur Entrée.

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

Déboguer le code JavaScript

Au lieu d'utiliser console.log() pour déterminer où votre code JavaScript ne fonctionne pas, envisagez d'utiliser les outils de débogage des outils pour les développeurs Chrome. L'idée générale consiste à définir un point d'arrêt, qui est un point d'arrêt intentionnel dans votre code, puis à parcourir l'exécution de votre code, une ligne à la fois.

Mise en pause à un point d'arrêt.

Lorsque vous parcourez le code, vous pouvez afficher et modifier les valeurs de toutes les propriétés et variables actuellement définies, exécuter du code JavaScript dans la console, et plus encore.

Consultez Premiers pas avec le débogage JavaScript pour découvrir les bases du débogage dans les outils de développement.

Se 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 lors de la création d'applications Web.

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

De plus, s'ils sont compatibles avec les frameworks, la pile des appels dans le débogueur et les traces de 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 rechargez la page. Les espaces de travail vous permettent d'enregistrer les modifications que vous apportez dans les outils de développement dans votre système de fichiers. Cela vous permet d'utiliser les outils de développement comme éditeur de code.

Pour commencer, consultez Modifier des fichiers avec des espaces de travail.