O protocolo do Chrome DevTools (CDP) é um protocolo de depuração remota (API) que permite que os desenvolvedores se comuniquem com um navegador Chrome em execução. O Chrome DevTools usa o CDP para ajudar a inspecionar o estado do navegador, controlar o comportamento dele e coletar informações de depuração. Você também pode criar extensões do Chrome que usem CDP.
Por exemplo, este é um comando do CDP que insere uma nova regra com o ruleText fornecido em uma folha de estilo com o styleSheetId especificado, na posição especificada por location.
{
command: 'CSS.addRule',
parameters: {
styleSheetId: '2',
ruleText:'Example',
location: {
startLine: 1,
startColumn: 1,
endLine: 1,
endColumn: 1
}
}
}
A guia da gaveta Monitoramento de protocolo oferece uma maneira de enviar solicitações de CDP e conferir todas as solicitações e respostas de CDP enviadas e recebidas pelo DevTools.
Antes era difícil criar o comando manualmente, especialmente um comando com muitos parâmetros. Além de abrir e fechar colchetes e aspas, você também precisou se lembrar dos parâmetros do comando que, por sua vez, farão com que você consulte a documentação do PCD.
Para resolver esse problema, o DevTools introduziu um novo editor de CDP, com os principais objetivos de:
- Comandos de preenchimento automático: Simplifique a entrada de comando do CDP fornecendo a lista de comandos disponíveis com um recurso de preenchimento automático.
- Preencher automaticamente os parâmetros de comando. Reduza a necessidade de consultar a lista de parâmetros de comando disponíveis na documentação do CDP.
- Simplifique a digitação de parâmetros. Basta preencher os valores dos parâmetros que você quer enviar.
- Editar e reenviar. Melhore a velocidade de prototipagem tornando mais rápida a modificação de um comando do CDP.
Agora, vamos dar uma olhada no que esse novo editor oferece e como você pode aproveitá-lo.
Recurso de preenchimento automático
Um recurso de preenchimento automático agora ativa a barra de entrada de comando. Ele ajuda a escrever os nomes dos comandos do CDP a que você tem acesso. Isso pode ser muito útil para comandos que não aceitam parâmetros.
Parâmetros de string e número
Com esse novo editor, fica fácil editar os valores dos parâmetros primitivos. Para abrir o editor, clique no ícone 
ao lado da entrada do comando.
Depois que você digita o nome do comando, o editor mostra os parâmetros correspondentes automaticamente. Você não precisa consultar a documentação para saber quais parâmetros correspondem a quais comandos. Além disso, o editor exibe os parâmetros em uma determinada ordem: os obrigatórios primeiro (em vermelho) e os opcionais depois (em azul).
Para adicionar um valor a um parâmetro opcional, passe o cursor sobre o nome dele e clique no botão +. Para redefinir o parâmetro como indefinido, clique no botão Redefinir para o valor padrão.
Parâmetros enumerados e booleanos
Ao editar parâmetros booleanos ou enum, você verá um menu suspenso que fornece uma seleção de valores potenciais (para tipos enumerados) ou a opção true ou false para booleanos. Esse recurso reduz a possibilidade de digitar o valor errado para parâmetros de tipo enumerado e mantém a precisão e a simplicidade.
Parâmetros de matriz
Para parâmetros de matriz, é possível adicionar valores manualmente à matriz. Passe o cursor sobre a linha do parâmetro e clique no botão +.
Para excluir um item da matriz, clique no botão de lixeira ao lado dos itens. Também é possível limpar todos os parâmetros da matriz com o botão de bloqueio. Nesse caso, o parâmetro da matriz é redefinido como [].
Parâmetros do objeto
Quando você insere um comando que aceita parâmetros de objetos, o editor lista as chaves desse objeto e é possível editar os valores diretamente. Isso funciona para todos os tipos de parâmetros aninhados.
Descubra o que o comando e os parâmetros fazem no editor
Você já teve dúvidas sobre a finalidade de um parâmetro ou comando? Agora, você pode passar o cursor sobre um comando ou parâmetro, e uma dica descritiva vai aparecer com um link para a documentação on-line.
Receber aviso antes de enviar parâmetros incorretos
Antes, se você não sabia se o valor de um parâmetro era do tipo correto e precisava esperar para ler a resposta de erro, esse novo editor é para você. Ele mostra erros em tempo real se o parâmetro não aceitar o valor inserido.
Reenviar um comando
Se você precisar ajustar um parâmetro do comando que acabou de enviar, não precisa digitá-lo novamente. Para editar e reenviar o comando, clique com o botão direito do mouse em um item na grade de dados e selecione Editar e reenviar no menu suspenso. Isso vai reabrir automaticamente o editor do CDP e preenchê-lo com o comando selecionado.
Copiar um comando para o formato JSON
Para copiar o comando CDP no formato JSON para a área de transferência, clique no ícone de cópia 
na extremidade esquerda da barra de ferramentas. Além disso, não se esqueça de que, se você inserir um comando diretamente na barra de entrada, ele vai preencher o editor e vice-versa.
Conclusão
O objetivo da equipe do DevTools por trás do design desse novo editor de CDP era simplificar a digitação de comandos do CDP. O novo editor também pode ser usado para visualizar parâmetros junto com a documentação e fornecer uma maneira mais fácil de enviar os comandos do CDP.
Fazer o download dos canais de visualização
Use o Chrome Canary, Dev ou Beta como seu navegador de desenvolvimento padrão. Esses canais de pré-lançamento oferecem acesso aos recursos mais recentes do DevTools, testam as APIs modernas de plataformas da Web e encontram problemas no site antes dos usuários.
Entrar em contato com a equipe do Chrome DevTools
Use as opções a seguir para discutir os novos recursos e mudanças na publicação ou qualquer outra coisa relacionada ao DevTools.
- Envie uma sugestão ou feedback em crbug.com.
- Informe um problema do DevTools em Mais opções
> Ajuda > Informar problemas no DevTools. - Envie um tweet em @ChromeDevTools.
- Deixe comentários nos nossos vídeos do YouTube sobre a ferramenta DevTools ou nos vídeos do YouTube com dicas sobre o DevTools.