Utilizziamo Chrome DevTools come circa
- Modifica rapidamente elementi HTML
- Espandi tutti gli elementi figlio
- Trasloco dell'ispettore
- Ricerca elemento DOM
- tavolozze
- Cursori multipli
- Codifica l'immagine base64
- Commutazione pseudo-classe
- Selezione colonna
- Copia richiesta per cURL
- Tastiera su schermo
- Screenshot dell'intera pagina
- Emulazione di dispositivi touch
- Caratteristiche utili
Come suggerisce il nome, Chrome DevTools, o web inspector, è uno strumento progettato per gli sviluppatori web e le persone ad esso associate. Il web inspector ti consente di fare quanto segue:
- Ispezionare la correttezza del display.
- Traccia l'esecuzione degli script in JavaScript.
- Visualizza le attività di rete.
Quando ho scritto questo articolo ho usato canarino - versione di Chrome, in cui vengono testate le nuove funzionalità, che poi rientrano in una versione stabile di Chrome.
Per avviare l'ispettore, puoi fare clic con il pulsante destro del mouse in qualsiasi punto della pagina e selezionare "Visualizza codice articolo", puoi anche solo premere Ctrl + Maiusc + C.
Modifica rapidamente elementi HTML
Iniziamo con il più semplice: modificare gli elementi.
Come controllare:
- Seleziona la scheda "Elementi".
- Seleziona qualsiasi elemento HTML all'interno del pannello.
- Fai doppio clic sul tag e modifica, ad esempio, il nome del tag.
Al termine della modifica, il tag di chiusura si aggiornerà automaticamente.
Espandi tutti gli elementi figlio
Come controllare:
- Vai al pannello Elementi.
- Seleziona un elemento e, tenendo premuto Alt, fai clic sulla freccia a sinistra dell'elemento.
Trasloco dell'ispettore
Il pannello dell'ispettore può essere premuto sia nella parte inferiore della finestra del browser sia sul lato destro. Ad esempio, la posizione del pannello sulla destra è utile quando si lavora su monitor widescreen. Inoltre, il pannello di controllo può essere posizionato in una finestra separata e, ad esempio, trasferito su un altro monitor.
Come controllare:
- Ctrl + Maiusc + D - Attiva / disattiva posizione
Ricerca elemento DOM
Probabilmente non molti per i quali questa sarà una scoperta, ma nella scheda "Elementi" puoi cercare per DOM.
Come controllare:
- Premi Ctrl + F e inserisci la query di ricerca proposta.
tavolozze
Seleziona il colore dalla tavolozza La scelta del colore nelle ultime versioni di Chrome ha subito alcune modifiche: sono state aggiunte due palette per facilitare la scelta del colore.
Cursori multipli
Spostare il cursore e, tenendo premuto Ctrl, fare clic nell'area desiderata per aggiungere un cursore. Puoi annullare l'azione usando Ctrl + U. Personalmente, non sono mai stato utile.
Codifica l'immagine base64
Come controllare:
- Passa al pannello Rete.
- Seleziona immagine
- Fai clic con il tasto destro sull'immagine e seleziona ""
Commutazione pseudo-classe
Le pseudo-classi riflettono lo stato degli elementi e le loro posizioni relative.
Come controllare:
- Fai clic con il tasto destro su un elemento nel pannello Elementi e seleziona una pseudo-classe nell'elenco Forza stato elemento.
- Puoi anche selezionare una pseudo-classe sul lato destro del pannello Elementi.
Selezione colonna
Come controllare:
- Vai al pannello "Sorgenti".
- Seleziona un file.
- Evidenzia il testo tenendo premuto Alt.
La selezione di una colonna funziona anche quando HTML viene modificato nel pannello Elementi.
Copia richiesta per cURL
Qualsiasi richiesta nella scheda Rete può essere copiata e quindi incollata nel terminale per l'esecuzione utilizzando l'arricciatura.
Tastiera su schermo
Se il profilo Nexus 5X è selezionato, puoi vedere come appare il sito quando la tastiera su schermo è attiva.
Chrome DevTools: tastiera su schermo
Screenshot dell'intera pagina
Scattare una foto dell'intera pagina è molto semplice. Ho solo bisogno ...
- Ispettore aperto.
- Vai alla console.
- Premi Ctrl + Maiusc + P
- Digita "screenshot"
- Seleziona "Cattura screenshot a grandezza intera"
Screenshot dell'intera pagina Emulazione di dispositivi touch
Puoi anche simulare alcuni sensori:
- Touch screen
- Coordinate per la geolocalizzazione
- accelerometro
Come provare:
- Seleziona il pannello Elementi.
- Premere "Esc" e selezionare "Emulazione> Sensori".
Caratteristiche utili
chiavi e valori
Le funzioni chiavi e valori consentono di inviare le chiavi oi valori dell'oggetto alla console, rispettivamente. 
Visualizzazione di chiavi e valori dell'oggetto separatamente