Présentation du panneau "Sources"

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

Utilisez le panneau Sources des outils pour les développeurs Chrome pour:

Afficher les fichiers

Utilisez le volet Page pour afficher toutes les ressources que la page a chargées.

Le volet "Page"

Organisation du volet Page:

  • Le premier niveau, tel que top sur la capture d'écran ci-dessus, représente un frame HTML. top est affiché sur chaque page que vous consultez. top représente le cadre principal du document.
  • Le deuxième niveau, tel que developers.google.com sur la capture d'écran ci-dessus, représente une origine.
  • Le troisième et le quatrième niveau, entre autres, 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 dans le volet Page pour afficher son contenu dans le volet Éditeur. Vous pouvez afficher tous les types de fichiers. Pour les images, un aperçu s'affiche.

Affichage d'un fichier dans le volet Éditeur.

Modifier les fichiers CSS et JavaScript

Modifiez le code CSS et JavaScript à l'aide du volet Éditeur. Les outils de développement mettent à jour la page pour exécuter le 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 des erreurs CSS @import et url(), et des attributs HTML href comportant 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 le volet "Éditeur"

Pour que les modifications JavaScript soient prises en compte, appuyez sur Cmd+S (Mac) ou Ctrl+S (Windows, Linux). Les outils de développement n'exécutent pas de réexécution de script. Par conséquent, les seules modifications JavaScript appliquées sont celles que vous effectuez dans des fonctions. Par exemple, notez que console.log('A') ne s'exécute pas, contrairement à console.log('B').

Modification de JavaScript dans le volet de l'éditeur.

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

Les outils de développement effacent les modifications CSS et JavaScript lorsque vous actualisez la page. Consultez Configurer un espace de travail pour savoir 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, pour insérer la bibliothèque jQuery dans une page et pouvoir exécuter des commandes jQuery depuis 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 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. Examinez par exemple 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, procédez comme suit:

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

Pour en savoir plus, consultez l'article Exécuter des extraits de code sur n'importe quelle page.

Déboguer JavaScript

Plutôt que d'utiliser console.log() pour déduire l'erreur JavaScript, utilisez plutôt 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, c'est-à-dire un point d'arrêt intentionnel dans votre code, puis de suivre l'exécution de votre code ligne par ligne.

Suspension à 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, et plus encore.

Pour en savoir plus sur les principes de base du débogage dans les outils de développement, consultez l'article Premiers pas avec le débogage JavaScript.

Concentrez-vous 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 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 procèdent aux opérations suivantes:

De plus, s'ils sont compatibles avec les frameworks, la pile d'appel 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 dans votre système de fichiers les modifications que vous apportez dans les outils de développement. 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.