Vi bruker Chrome DevTools som om
- Rediger raskt HTML-elementer
- Utvid alle barnelementer
- Flytting av inspektøren
- DOM element søk
- paletter
- Flere markører
- Kode base64 bilde
- Pseudoklassen bytte
- Kolonnevalg
- Kopier forespørsel for cURL
- Skjermtastatur
- Skjermbilde av hele siden
- Emulering av berøringsenheter
- Nyttige funksjoner
Som navnet antyder, er Chrome DevTools, eller web inspektør, et verktøy utviklet for webutviklere og personer som er tilknyttet det. Nettinspektøren lar deg gjøre følgende:
- Kontroller at skjermen er riktig.
- Spor utførelsen av skript i JavaScript.
- Se nettverksaktiviteter.
Når jeg skrev denne artikkelen brukte jeg Canary - versjon av Chrome, der nye funksjoner testes, som deretter faller inn i en stabil versjon av Chrome.
For å starte inspektøren kan du høyreklikke hvor som helst på siden og velge "Vis elementkode", du kan også bare trykke på Ctrl + Shift + C.
Rediger raskt HTML-elementer
La oss starte med de enkleste: redigeringselementene.
Hvordan sjekke:
- Velg fanen Elementer.
- Velg et hvilket som helst HTML-element i panelet.
- Dobbeltklikk på taggen og endre for eksempel taggenavnet.
Når redigering er fullført, oppdateres lukkekoden automatisk.
Utvid alle barnelementer
Hvordan sjekke:
- Gå til elementpanelet.
- Velg et element, og hold Alt mens du klikker på pilen til venstre for elementet.
Flytting av inspektøren
Kontrollpanelet kan trykkes både nederst i nettleservinduet og til høyre side. For eksempel er plasseringen av panelet til høyre praktisk når du arbeider på widescreen-skjermer. Kontrollpanelet kan også plasseres i et eget vindu og overføres til en annen skjerm.
Hvordan sjekke:
- Ctrl + Shift + D - Bytt posisjon
DOM element søk
Sannsynligvis ikke mange for hvem dette vil bli en oppdagelse, men i "Elements" -fanen kan du søke hos DOM.
Hvordan sjekke:
- Trykk Ctrl + F og skriv inn det foreslåtte søket.
paletter
Velg farge fra paletten Valg av farge i nyere versjoner av Chrome har gjennomgått noen endringer: lagt til to paletter for å lette valget av farge.
Flere markører
Flytt markøren, og hold inne Ctrl, klikk i ønsket område for å legge til en markør. Du kan angre handlingen med Ctrl + U. Personlig har jeg aldri vært nyttig.
Kode base64 bilde
Hvordan sjekke:
- Bytt til nettverkspanelet.
- Velg bilde
- Høyreklikk på bildet og velg ""
Pseudoklassen bytte
Pseudoklassene gjenspeiler tilstanden til elementene og deres relative posisjoner.
Hvordan sjekke:
- Høyreklikk på et element i Element-panelet og velg en pseudoklasse i Force Element State-listen.
- Du kan også velge en pseudoklasse på høyre side av elementpanelet.
Kolonnevalg
Hvordan sjekke:
- Gå til "Kilder" -panelet.
- Velg hvilken som helst fil.
- Velg teksten ved å holde Alt.
Velge en kolonne fungerer også når HTML redigeres i elementpanelet.
Kopier forespørsel for cURL
Enhver forespørsel i nettverksfanen kan kopieres og limes inn i terminalen for utførelse ved bruk av krøll.
Skjermtastatur
Hvis Nexus 5X-profilen er valgt, kan du se hvordan nettstedet ser ut når tastaturet på skjermen er aktiv.
Chrome DevTools: Skjermtastatur
Skjermbilde av hele siden
Ta et bilde av hele siden er veldig enkelt. Trenger bare ...
- Åpen inspektør.
- Gå til konsoll.
- Trykk Ctrl + Shift + P
- Skriv "skjermbilde"
- Velg "Capture full size screenshot"
Skjermbilde av hele siden Emulering av berøringsenheter
Du kan også simulere noen sensorer:
- Berøringsskjerm
- Koordinater for geolokalisering
- akselerometer
Slik prøver du:
- Velg elementpanelet.
- Trykk "Esc" og velg "Emulation> Sensors".
Nyttige funksjoner
nøkler og verdier
Tastene og verdiene gir deg muligheten til å skrive ut tastene eller verdiene til objektet til konsollen, henholdsvis. 
Viser taster og objektverdier separat