Il protocollo CDP (Chrome DevTools) è un protocollo di debug remoto (API) che consente agli sviluppatori di comunicare con un browser Chrome in esecuzione. Chrome DevTools utilizza CDP per aiutarti a esaminare lo stato del browser, controllarne il comportamento e raccogliere informazioni di debug. Puoi anche creare estensioni di Chrome che utilizzano CDP.
Ad esempio, si tratta di un comando CDP che inserisce una nuova regola con il valore ruleText specificato in un foglio di stile con il valore styleSheetId specificato, nella posizione specificata da location.
{
command: 'CSS.addRule',
parameters: {
styleSheetId: '2',
ruleText:'Example',
location: {
startLine: 1,
startColumn: 1,
endLine: 1,
endColumn: 1
}
}
}
La scheda del riquadro a scomparsa Monitoraggio del protocollo offre un modo per inviare richieste CDP e visualizzare tutte le richieste e le risposte CDP inviate e ricevute da DevTools.
In precedenza era difficile creare il comando manualmente, soprattutto un comando con molti parametri. Non solo dovevi fare attenzione alle parentesi di apertura e chiusura e alle virgolette, ma era necessario anche ricordare i parametri del comando che, a loro volta, ti fanno cercare la documentazione di CDP.
Per risolvere questo problema, DevTools ha introdotto un nuovo editor CDP i cui obiettivi principali sono:
- Comandi per il completamento automatico. Semplifica l'input dei comandi CDP fornendo l'elenco dei comandi disponibili tramite una funzionalità di completamento automatico.
- Compilazione automatica dei parametri dei comandi. Riduci la necessità di consultare la documentazione CDP per trovare l'elenco dei parametri di comando disponibili.
- Semplifica la digitazione del parametro. Devi solo inserire i valori dei parametri che vuoi inviare.
- Modifica e invia di nuovo. Migliora la velocità di prototipazione rendendo più veloce la modifica di un comando CDP.
Ora diamo un'occhiata a cosa offre questo nuovo editor e come puoi utilizzarlo.
Funzionalità di completamento automatico
La barra di immissione dei comandi ora è basata su una funzionalità di completamento automatico. Ti aiuta a scrivere i nomi dei comandi CDP a cui hai accesso. Questo può essere molto utile per i comandi che non accettano parametri.
Parametri stringa e numero
Con questo nuovo editor, ora puoi modificare facilmente i valori dei parametri primitivi. Per aprire l'editor, fai clic sull'icona 
accanto all'input del comando.
Dopo aver inserito il nome del comando, l'editor mostra automaticamente i parametri corrispondenti. Non è necessario cercare la documentazione per sapere quali parametri sono associati a quali comandi. Inoltre, l'editor visualizza i parametri in un determinato ordine: prima quelli obbligatori (in rosso) e quelli opzionali (in blu).
Per aggiungere un valore a un parametro facoltativo, passa il mouse sopra il nome e fai clic sul pulsante +. Per reimpostare il parametro su Non definito, fai clic sul pulsante Ripristina valore predefinito.
Parametri enum e booleani
Quando modifichi i parametri enum o booleani, viene visualizzato un menu a discesa che offre una selezione di valori potenziali (per le enum) oppure l'opzione vero o falso per i valori booleani. Questa funzionalità riduce la possibilità di digitare il valore sbagliato per i parametri di enumerazione e garantisce precisione e semplicità.
Parametri array
Per i parametri dell'array, puoi aggiungere manualmente valori all'array. Passa il mouse sopra la riga del parametro e fai clic sul pulsante +.
Per eliminare gli elementi dell'array uno alla volta, fai clic sul pulsante del cestino accanto agli elementi. Puoi anche cancellare tutti i parametri dall'array con il pulsante Blocca. In questo caso, il parametro dell'array viene reimpostato su [].
Parametri oggetto
Quando inserisci un comando che accetta i parametri dell'oggetto, l'editor elenca le chiavi dell'oggetto e tu puoi modificarne direttamente i valori. Questo vale per tutti i tipi di parametri nidificati.
Scoprire cosa fanno il comando e i parametri nell'editor
Hai mai avuto dubbi sullo scopo di un parametro o di un comando? Passando il mouse sopra un comando o un parametro, viene visualizzata una descrizione comando descrittiva, completa di link alla documentazione online.
Ricevi un avviso prima di inviare parametri errati
In precedenza, se non sapevate se il valore di un parametro fosse del tipo corretto e dovevate aspettare prima di leggere la risposta di errore, questo nuovo editor fa al caso vostro. Se il parametro non accetta il valore inserito, mostra gli errori in tempo reale.
Invia di nuovo un comando
Se devi modificare un parametro del comando che hai appena inviato, non sarà necessario digitarlo di nuovo. Per modificare e inviare nuovamente il comando, fai clic con il tasto destro del mouse su un elemento nella griglia di dati e seleziona Modifica e invia di nuovo dal menu a discesa. L'editor CDP verrà riaperto automaticamente e verrà precompilato con il comando selezionato.
Copiare un comando in formato JSON
Per copiare il comando CDP in formato JSON negli appunti, fai clic sull'icona di copia 
all'estremità sinistra della barra degli strumenti. Inoltre, tieni presente che se inserisci un comando direttamente nella barra di immissione, questo apparirà senza interruzioni nell'editor e viceversa.
Conclusione
L'obiettivo del team DevTools alla base della progettazione di questo nuovo editor CDP era semplificare la digitazione dei comandi CDP. Il nuovo editor può essere utilizzato anche per visualizzare i parametri insieme alla documentazione e per offrirti un modo più semplice per inviare i comandi CDP.
Scarica i canali in anteprima
Prendi in considerazione l'utilizzo di Chrome Canary, Dev o beta come browser di sviluppo predefinito. Questi canali in anteprima ti consentono di accedere alle funzionalità di DevTools più recenti, di testare le API per piattaforme web all'avanguardia e di individuare eventuali problemi sul tuo sito prima che lo facciano gli utenti.
Contattare il team di Chrome DevTools
Utilizza le opzioni seguenti per discutere delle nuove funzionalità e delle modifiche nel post o di qualsiasi altra cosa relativa a DevTools.
- Inviaci un suggerimento o un feedback tramite crbug.com.
- Segnala un problema DevTools utilizzando Altre opzioni
> Guida > Segnala i problemi di DevTools in DevTools. - Tweet all'indirizzo @ChromeDevTools.
- Lascia commenti sui video di YouTube o sui suggerimenti di DevTools in DevTools Video di YouTube.