Présentation du panneau "Sources"

Kayce Basques
Kayce Basques
Sofia Emelianova
Sofia Emelianova

Le panneau Sources des outils pour les développeurs Chrome vous permet d'effectuer les opérations suivantes:

Afficher les fichiers

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

Volet de page.

Organisation du volet Page:

  • Le premier niveau, comme top sur la capture d'écran ci-dessus, représente un cadre HTML. top est disponible sur chaque page que vous consultez. top représente le cadre principal du document.
  • Le deuxième niveau, comme developers.google.com sur la capture d'écran ci-dessus, représente une origine.
  • Le troisième niveau, le quatrième niveau, et ainsi de suite, représentent les répertoires et les ressources qui ont été chargés 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 du volet Page pour afficher son contenu dans le volet Éditeur. Vous pouvez afficher tous les types de fichier. Pour les images, un aperçu s'affiche.

Affichage d'un fichier dans le volet de l'éditeur.

Modifier les fichiers CSS et JavaScript

Utilisez le volet Éditeur pour modifier les fichiers 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 indiquant une erreur de syntaxe intégrée.

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

Modification du code CSS dans le volet de l'é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 à l'intérieur 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 ont réexécuté l'intégralité du script après avoir apporté la modification, le texte A aurait été consigné dans la Console :

Les outils de développement effacent vos modifications CSS et JavaScript lorsque vous actualisez la page. Consultez la section Configurer un Workspace 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 tapez plusieurs fois le code suivant dans la console, afin d'insérer la bibliothèque jQuery dans une page, de sorte que vous Vous pouvez 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 de code et l'exécuter à tout moment en quelques clics sur un bouton. vous en avez besoin. 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 le volet Extraits, puis cliquez sur Exécuter Bouton "Exécuter" dans la barre d'action en bas.
  • Ouvrez le menu Command, supprimez le caractère >, saisissez !, puis 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 d'utiliser la méthode 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, d'arrêt intentionnel dans votre code, puis de suivre son exécution, ligne par ligne en temps réel.

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 valeurs et les variables, exécuter JavaScript dans la console, etc.

Consultez la page Premiers pas avec le débogage JavaScript pour apprendre les principes de base du débogage dans les outils de développement.

Concentrez-vous 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 en créant des outils que vous utilisez pour créer 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, les modifications sont perdues lorsque vous l'actualisez. la page. Les espaces de travail vous permettent d'enregistrer les modifications apportées dans les outils de développement dans votre fichier. du système d'exploitation. Cela vous permet essentiellement d'utiliser les outils de développement comme éditeur de code.

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