Chrome DevTools Protocol (CDP) è 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 ispezionare lo stato del browser, controllarne il comportamento e raccogliere informazioni di debug. Puoi anche creare estensioni di Chrome che utilizzano CDP.
Ad esempio, questo è 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 Monitoraggio del protocollo ti consente di inviare richieste CDP e di visualizzare tutte le richieste e le risposte CDP inviate e ricevute da DevTools.
In precedenza era difficile creare il comando manualmente, in particolare un comando con molti parametri. Non solo dovevi fare attenzione alle parentesi graffe e alle virgolette di apertura e chiusura, ma dovevi anche ricordare i parametri del comando, il che ti costringeva a consultare la documentazione del CDP.
Per risolvere questo problema, DevTools ha introdotto un nuovo editor CDP i cui obiettivi principali sono:
- Comandi di completamento automatico. Semplifica l'inserimento dei comandi CDP fornendo l'elenco dei comandi disponibili tramite una funzionalità di completamento automatico.
- Compila automaticamente i parametri dei comandi. Riduci la necessità di controllare la documentazione di CDP per 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 semplificando la modifica di un comando CDP.
Ora diamo un'occhiata a cosa offre questo nuovo editor e a come puoi utilizzarlo.
Funzionalità di completamento automatico
La barra di immissione dei comandi ora è dotata di una funzionalità di completamento automatico. Ti aiuta a scrivere i nomi dei comandi CDP a cui hai accesso. Questa opzione può essere molto utile per i comandi che non accettano parametri.
Parametri di stringa e numeri
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.
Una volta inserito il nome del comando, l'editor mostra automaticamente i parametri corrispondenti. Non devi consultare la documentazione per sapere quali parametri vanno con quali comandi. Inoltre, l'editor mostra i parametri in un determinato ordine: prima quelli obbligatori (in rosso) e poi quelli facoltativi (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 di enumerazione e booleani
Quando modifichi i parametri enum o booleani, viene visualizzato un menu a discesa che offre una selezione di potenziali valori (per gli enum) o l'opzione semplice true o false per i valori booleani. Questa funzionalità riduce la possibilità di digitare il valore sbagliato per i parametri enum e mantiene l'accuratezza e la semplicità.
Parametri di array
Per i parametri array, puoi aggiungere manualmente i 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 Cestino accanto agli elementi. Puoi anche cancellare tutti i parametri dall'array con il pulsante di blocco. In questo caso, il parametro array viene reimpostato su [].
Parametri degli oggetti
Quando inserisci un comando che accetta parametri di oggetti, l'editor elenca le chiavi di questo oggetto e puoi modificarne direttamente i valori. Questo vale per tutti i tipi di parametri nidificati.
Scopri cosa fanno il comando e i parametri nell'editor
Hai mai avuto dubbi sullo scopo di un parametro o di un comando? Ora puoi passare il mouse sopra un comando o un parametro per visualizzare una descrizione comando descrittiva, completa di un link alla documentazione online.
Ricevere un avviso prima di inviare parametri errati
In precedenza, se non sapevi se il valore di un parametro era del tipo corretto e dovevi attendere di leggere la risposta all'errore, questo nuovo editor fa al caso tuo. Mostra gli errori in tempo reale se il parametro non può accettare il valore inserito.
Inviare di nuovo un comando
Se devi modificare un parametro del comando che hai appena inviato, non devi digitarlo di nuovo. Per modificare e inviare nuovamente il comando, fai clic con il tasto destro del mouse su un elemento della tabella dati e seleziona Modifica e invia di nuovo dal menu a discesa. L'editor CDP si riaprirà 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à a sinistra della barra degli strumenti. Inoltre, tieni presente che se inserisci un comando direttamente nella barra di immissione, l'editor verrà compilato senza problemi e viceversa.
Conclusione
Lo scopo del team di DevTools alla base della progettazione di questo nuovo editor dei comandi 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.
Scaricare i canali di anteprima
Valuta la possibilità di utilizzare Chrome Canary, Dev o Beta come browser di sviluppo predefinito. Questi canali di anteprima ti consentono di accedere alle funzionalità più recenti di DevTools, di testare API di piattaforme web all'avanguardia e di trovare i problemi sul tuo sito prima che lo facciano i tuoi utenti.
Contatta il team di Chrome DevTools
Utilizza le seguenti opzioni per discutere di nuove funzionalità, aggiornamenti o qualsiasi altro argomento relativo a DevTools.
- Inviaci feedback e richieste di funzionalità all'indirizzo crbug.com.
- Segnala un problema DevTools utilizzando Altre opzioni > Guida > Segnala un problema DevTools in DevTools.
- Invia un tweet all'account @ChromeDevTools.
- Lascia un commento sui video di YouTube Novità di DevTools o sui video di YouTube Suggerimenti per DevTools.