Le CDP (Chrome DevTools Protocol) 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 la 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 la plate-forme de données client.
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 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 Moniteur de protocole permet d'envoyer des requêtes CDP et d'afficher toutes les requêtes et réponses CDP envoyées et reçues par les outils de développement.
Auparavant, il était difficile de créer la commande à la main, surtout s'il s'agissait d'une commande comportant de nombreux paramètres. Vous deviez non seulement faire attention aux crochets et aux guillemets ouvrants et fermants, mais aussi aux paramètres de la commande, qui vous permettront de consulter la documentation CPP.
Pour résoudre ce problème, les outils de développement ont introduit un nouvel éditeur CDP dont les principaux objectifs sont les suivants:
- Commandes de saisie semi-automatique : Simplifiez la saisie de vos commandes CDP en vous fournissant la liste des commandes disponibles via une fonctionnalité de saisie semi-automatique.
- Remplir automatiquement les paramètres de commande. Plus besoin de consulter la documentation CDP pour obtenir la liste des paramètres de commande disponibles.
- Simplifier la saisie des paramètres Il vous suffit d'indiquer les valeurs des paramètres que vous souhaitez envoyer.
- Modifier et renvoyer Accélérer le prototypage en permettant de modifier plus rapidement une commande CDP
Découvrons maintenant les fonctionnalités de ce nouvel éditeur et comment l'utiliser.
Fonctionnalité de saisie semi-automatique
Une fonctionnalité de saisie semi-automatique alimente désormais la barre de saisie de commande. 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 les 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 l'entrée 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 sont associés à quelles commandes. De plus, l'éditeur affiche les paramètres dans un ordre donné: les paramètres obligatoires en rouge et les suivants (en bleu).
Pour ajouter une valeur à un paramètre facultatif, pointez sur son nom, puis cliquez sur le bouton +. Pour rétablir le paramètre sur "non défini", cliquez sur le bouton Rétablir la valeur par défaut.
Paramètres d'énumération et booléens
Lorsque vous modifiez des paramètres enum ou booléens, un menu déroulant propose une sélection de valeurs potentielles (pour les énumérations) ou l'option simple "true" ou "false" pour les valeurs booléennes. Cette fonctionnalité réduit le risque de saisir une valeur incorrecte pour les paramètres d'énumération, et préserve la justesse 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 du tableau un par un, cliquez sur le bouton représentant une poubelle à côté des éléments. Vous pouvez également effacer tous les paramètres du tableau à l'aide du bouton "Bloquer". Dans ce cas, le paramètre du tableau est réinitialisé sur [].
Paramètres d'objet
Lorsque vous saisissez une commande qui accepte les paramètres d'objet, l'éditeur répertorie les clés de cet objet et vous pouvez modifier directement leurs valeurs. Cela fonctionne pour tous les types de paramètres imbriqués.
Découvrez le rôle de la commande et des paramètres dans l'éditeur.
Avez-vous déjà été incertain de la fonction d’un paramètre ou d’une commande ? Désormais, il vous suffit de pointer sur une commande ou un paramètre pour faire apparaître une info-bulle descriptive contenant un lien vers la documentation en ligne.
Être averti avant d'envoyer des paramètres incorrects
Auparavant, si vous ne saviez pas si le type de valeur d'un paramètre était correct et que vous deviez attendre pour lire la réponse d'erreur, ce nouvel éditeur est fait pour vous. Il affiche les erreurs en temps réel si le paramètre n'accepte pas la valeur que vous avez saisie.
Renvoyer une commande
Si vous avez besoin de modifier un paramètre de la commande que vous venez d'envoyer, vous n'avez pas besoin de le 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 est alors automatiquement rouvert et 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 votre presse-papiers, cliquez sur l'icône de copie 
à l'extrémité gauche de la barre d'outils. De plus, n'oubliez pas que si vous saisissez une commande directement dans la barre de saisie, elle s'affiche de manière transparente dans l'éditeur, et inversement.
Conclusion
L'objectif de l'équipe DevTools pour la conception de ce nouvel éditeur CDP était de simplifier la saisie des commandes CDP. Le nouvel éditeur permet également d'afficher les paramètres en plus de la documentation et de faciliter l'envoi de vos commandes CDP.
Télécharger les canaux de prévisualisation
Nous vous conseillons d'utiliser Chrome Canary, Dev ou Beta comme navigateur de développement par défaut. Ces versions preview vous permettent d'accéder aux dernières fonctionnalités des outils de développement, de tester des API de pointe de plates-formes Web et de détecter les problèmes sur votre site avant qu'ils ne le fassent.
Contacter l'équipe des outils pour les développeurs Chrome
Utilisez les options suivantes pour discuter des nouvelles fonctionnalités et des modifications dans l'article, ou de toute autre question concernant les outils de développement.
- Envoyez-nous une suggestion ou des commentaires via crbug.com.
- Signalez un problème dans les outils de développement via Plus d'options
> Aide > Signaler un problème dans les outils de développement dans les Outils de développement. - Envoyez un tweet à @ChromeDevTools.
- Dites-nous en plus sur les nouveautés concernant les vidéos YouTube dans les outils de développement ou sur les vidéos YouTube de nos conseils relatifs aux outils de développement.