O protocolo 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 usam o CDP.
Por exemplo, este é um comando CDP que insere uma nova regra com o ruleText fornecido em uma folha de estilo com o styleSheetId fornecido, 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 Protocol monitor oferece uma maneira de enviar solicitações do CDP e conferir todas as solicitações e respostas do CDP enviadas e recebidas pelo DevTools.
Antes, era difícil criar o comando manualmente, especialmente um comando com muitos parâmetros. Além de prestar atenção aos colchetes e aspas, você também precisa se lembrar dos parâmetros do comando, o que exige que você consulte a documentação do CDP.
Para resolver esse problema, as Ferramentas do desenvolvedor introduziram um novo editor de CDP com os seguintes objetivos principais:
- Comandos de preenchimento automático. Simplifique a entrada de comando do CDP fornecendo a lista de comandos disponíveis por um recurso de preenchimento automático.
- Preencha automaticamente os parâmetros do comando. Reduza a necessidade de consultar a documentação do CDP para conferir a lista de parâmetros de comando disponíveis.
- Simplifique a digitação de parâmetros. Basta preencher os valores dos parâmetros que você quer enviar.
- Editar e reenviar. Melhore a velocidade da prototipagem, tornando mais rápido modificar um comando do CDP.
Agora, vamos conferir o que esse novo editor oferece e como você pode usá-lo.
Recurso de preenchimento automático
Um recurso de preenchimento automático agora alimenta a barra de entrada de comando. Ele ajuda a escrever os nomes dos comandos do CDP aos quais 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, agora é possível editar facilmente os valores de parâmetros primitivos. Para abrir o editor, clique no ícone 
ao lado da entrada de comando.
Depois que você insere 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 são usados com quais comandos. Além disso, o editor mostra os parâmetros em uma determinada ordem: primeiro os obrigatórios (em vermelho) e depois os opcionais (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 de tipo enumerado e booleano
Ao editar parâmetros de tipo enumerado ou booleano, você vai encontrar um menu suspenso que oferece uma seleção de valores em potencial (para tipos enumerados) ou a opção simples "verdadeiro" ou "falso" para booleanos. Esse recurso reduz a possibilidade de digitar o valor errado para parâmetros de enumeração 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 os itens da matriz um por um, clique no botão da lixeira ao lado deles. Também é possível limpar todos os parâmetros da matriz com o botão de bloqueio. Nesse caso, o parâmetro de matriz é redefinido como [].
Parâmetros de objeto
Quando você insere um comando que aceita parâmetros de objeto, o editor lista as chaves desse objeto, e você pode 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 um aviso antes de enviar parâmetros incorretos
Antes, se você não soubesse se o valor de um parâmetro era do tipo correto e precisasse 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 será necessário 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 Edit and resend no menu suspenso. Isso vai reabrir o editor do CDP automaticamente 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 
no final esquerdo da barra de ferramentas. Além disso, se você inserir um comando diretamente na barra de entrada, ele será preenchido no editor e vice-versa.
Conclusão
O objetivo da equipe de DevTools ao criar esse novo editor de CDP era simplificar a digitação de comandos. O novo editor também pode ser usado para conferir parâmetros com a documentação e facilitar o envio de comandos do CDP.
Fazer o download dos canais de visualização
Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de visualização dão acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de última geração e ajudam a encontrar problemas no seu site antes que os usuários.
Entre em contato com a equipe do Chrome DevTools
Use as opções a seguir para discutir os novos recursos, atualizações ou qualquer outra coisa relacionada ao DevTools.
- Envie feedback e solicitações de recursos para crbug.com.
- Informe um problema do DevTools usando a opção Mais opções > Ajuda > Informar um problema do DevTools no DevTools.
- Envie um tweet para @ChromeDevTools.
- Deixe comentários nos vídeos Novidades do DevTools no YouTube ou Dicas do DevTools no YouTube.