Le protocole Chrome DevTools (CDP) est un protocole de débogage à distance (API) qui permet aux développeurs de communiquer avec un navigateur Chrome en cours d'exécution. Les outils pour les développeurs Chrome utilisent le CDP pour vous aider à inspecter l'état du navigateur, à contrôler son comportement et à collecter des informations de débogage. Vous pouvez également créer des extensions Chrome qui utilisent CDP.
Par exemple, il s'agit d'une commande CDP qui insère une nouvelle règle avec le ruleText donné dans une feuille de style avec le styleSheetId donné, à la position spécifiée par location.
{
command: 'CSS.addRule',
parameters: {
styleSheetId: '2',
ruleText:'Example',
location: {
startLine: 1,
startColumn: 1,
endLine: 1,
endColumn: 1
}
}
}
L'onglet du panneau Surveillance du protocole vous permet d'envoyer des requêtes CDP et d'afficher toutes les requêtes et réponses CDP envoyées et reçues par DevTools.
Auparavant, il était difficile de créer manuellement la commande, en particulier une commande avec de nombreux paramètres. Vous avez dû non seulement faire attention aux crochets et aux guillemets d'ouverture et de fermeture, mais aussi vous souvenir des paramètres de la commande, ce qui vous a obligé à consulter la documentation CDP.
Pour résoudre ce problème, DevTools a lancé un nouvel éditeur de CDP dont les principaux objectifs sont les suivants:
- Commandes de saisie semi-automatique Simplifiez la saisie de commandes CDP en vous fournissant la liste des commandes disponibles via une fonctionnalité de saisie semi-automatique.
- Remplir automatiquement les paramètres de commande Réduisez le besoin de consulter la documentation du CDP pour obtenir la liste des paramètres de commande disponibles.
- Simplifiez la saisie du paramètre. Il vous suffit de renseigner les valeurs des paramètres que vous souhaitez envoyer.
- Modifier et renvoyer. Accélérez le prototypage en permettant de modifier plus rapidement une commande CDP.
Voyons maintenant ce que propose ce nouvel éditeur et comment vous pouvez l'utiliser.
Fonctionnalité de saisie semi-automatique
La barre de saisie de commande est désormais dotée d'une fonctionnalité de saisie semi-automatique. Il vous aide à écrire les noms des commandes CDP auxquelles vous avez accès. Cela peut être très pratique pour les commandes qui n'acceptent pas de paramètres.
Paramètres de chaîne et de nombre
Grâce à ce nouvel éditeur, vous pouvez désormais modifier facilement les valeurs des paramètres primitifs. Pour ouvrir l'éditeur, cliquez sur l'icône 
à côté de la zone de saisie de commande.
Une fois que vous avez saisi le nom de la commande, l'éditeur affiche automatiquement les paramètres correspondants. Vous n'avez pas besoin de consulter la documentation pour savoir quels paramètres correspondent à quelles commandes. De plus, l'éditeur affiche les paramètres dans un ordre donné: les obligatoires en premier (en rouge) et les facultatifs ensuite (en bleu).
Pour ajouter une valeur à un paramètre facultatif, pointez sur son nom, puis cliquez sur le bouton +. Pour définir le paramètre sur "undefined", cliquez sur le bouton Rétablir la valeur par défaut.
Paramètres enum et booléens
Lorsque vous modifiez des paramètres énumérés ou booléens, un menu déroulant s'affiche avec une sélection de valeurs possibles (pour les énumérations) ou l'option "true" ou "false" (pour les valeurs booléennes). Cette fonctionnalité réduit le risque de saisir une valeur incorrecte pour les paramètres enum, tout en garantissant la précision et la simplicité.
Paramètres de tableau
Pour les paramètres de tableau, vous pouvez ajouter manuellement des valeurs au tableau. Pointez sur la ligne du paramètre, puis cliquez sur le bouton +.
Pour supprimer des éléments de tableau un par un, cliquez sur le bouton de la corbeille à côté des éléments. Vous pouvez également effacer tous les paramètres du tableau à l'aide du bouton de blocage. Dans ce cas, le paramètre de tableau est réinitialisé sur [].
Paramètres d'objet
Lorsque vous saisissez une commande qui accepte des paramètres d'objet, l'éditeur liste les clés de cet objet et vous pouvez modifier directement leurs valeurs. Cette méthode fonctionne pour tous les types de paramètres imbriqués.
Découvrir la fonction de la commande et des paramètres dans l'éditeur
Avez-vous déjà eu des doutes sur l'objectif d'un paramètre ou d'une commande ? Vous pouvez maintenant pointer sur une commande ou un paramètre. Une info-bulle descriptive s'affiche alors, avec un lien vers la documentation en ligne.
Avertissement avant l'envoi de paramètres incorrects
Auparavant, si vous ne saviez pas si la valeur d'un paramètre était du bon type et que vous deviez attendre pour lire la réponse d'erreur, ce nouvel éditeur est fait pour vous. Il affiche des erreurs en temps réel si le paramètre ne peut pas accepter la valeur que vous avez saisie.
Renvoyer une commande
Si vous devez modifier un paramètre de la commande que vous venez d'envoyer, vous n'avez pas besoin de la saisir à nouveau. Pour modifier et renvoyer la commande, effectuez un clic droit sur un élément de la grille de données, puis sélectionnez Modifier et renvoyer dans le menu déroulant. L'éditeur CDP s'ouvre alors automatiquement et est prérempli avec la commande que vous avez sélectionnée.
Copier une commande au format JSON
Pour copier la commande CDP au format JSON dans le presse-papiers, cliquez sur l'icône de copie 
à l'extrémité gauche de la barre d'outils. N'oubliez pas non plus que si vous saisissez une commande directement dans la barre de saisie, elle sera automatiquement insérée dans l'éditeur, et inversement.
Conclusion
L'objectif de l'équipe DevTools lors de la conception de ce nouvel éditeur CDP était de simplifier la saisie des commandes CDP. Vous pouvez également utiliser le nouvel éditeur pour afficher les paramètres à côté de la documentation et pour envoyer plus facilement vos commandes CDP.
Télécharger les canaux de prévisualisation
Envisagez d'utiliser Chrome Canary, Dev ou Bêta comme navigateur de développement par défaut. Ces canaux de prévisualisation vous donnent accès aux dernières fonctionnalités de DevTools, vous permettent de tester les API de plates-formes Web de pointe et vous aident à détecter les problèmes sur votre site avant vos utilisateurs.
Contacter l'équipe des outils pour les développeurs Chrome
Utilisez les options suivantes pour discuter des nouvelles fonctionnalités, des mises à jour ou de tout autre élément lié aux outils pour les développeurs.
- Envoyez-nous vos commentaires et vos demandes de fonctionnalités sur crbug.com.
- Signalez un problème dans les outils de développement à l'aide de l'icône Plus d'options > Aide > Signaler un problème dans les outils de développement dans les outils de développement.
- Envoyez un tweet à @ChromeDevTools.
- Laissez des commentaires sur les vidéos YouTube sur les nouveautés des outils pour les développeurs ou sur les vidéos YouTube sur les conseils concernant les outils pour les développeurs.