- Redigera snabbt HTML-element
- Expand alla barnelement
- Flyttning av inspektören
- DOM-elementsökning
- paletter
- Flera markörer
- Koda base64-bild
- Pseudoklassbyte
- Kolumn urval
- Kopiera begäran om cURL
- Skärmtangentbord
- Skärmdump av hela sidan
- Emulering av pekdon
- Användbara funktioner
Som namnet antyder är Chrome DevTools, eller webbinspektör, ett verktyg utformat för webbutvecklare och personer som är associerade med det. Web inspektören låter dig göra följande:
- Kontrollera skärmens korrekthet.
- Spåra utförandet av skript i JavaScript.
- Visa nätverksaktiviteter.
När jag skrev den här artikeln använde jag Canary - version av Chrome, där nya funktioner testas, som sedan hamnar i en stabil version av Chrome.
För att starta inspektören kan du högerklicka var som helst på sidan och välja "Visa artikelnummer", du kan också bara trycka på Ctrl + Shift + C.
Redigera snabbt HTML-element
Låt oss börja med de enklaste: redigeringselementen.
Så här kontrollerar du:
- Välj fliken Elements.
- Välj något HTML-element i panelen.
- Dubbelklicka på taggen och byt till exempel taggnamnet.
När redigeringen är klar uppdateras stängningskoden automatiskt.
Expand alla barnelement
Så här kontrollerar du:
- Gå till panelen Elements.
- Välj ett element och, samtidigt som du håller Alt, klicka på pilen till vänster om elementet.
Flyttning av inspektören
Inspektionspanelen kan tryckas både i botten av webbläsarfönstret och på dess högra sida. Platsen för panelen till höger är till exempel lämplig när du arbetar med widescreen-bildskärmar. Kontrollpanelen kan också placeras i ett separat fönster och överförs till exempel till en annan bildskärm.
Så här kontrollerar du:
- Ctrl + Skift + D - Växla plats
DOM-elementsökning
Förmodligen inte många för vilka detta kommer att bli en upptäckt, men på fliken "Elements" kan du söka av DOM.
Så här kontrollerar du:
- Tryck Ctrl + F och skriv in den föreslagna sökfrågan.
paletter
Välj färg från palettenValet av färg i de senaste versionerna av Chrome har genomgått vissa ändringar: lägger till två paletter för att underlätta valet av färg.
Flera markörer
Flytta markören och, medan du håller Ctrl, klicka i önskat område för att lägga till en markör. Du kan ångra åtgärden med Ctrl + U. Personligen har jag aldrig varit användbar.
Koda base64-bild
Så här kontrollerar du:
- Växla till nätverkspanelen.
- Välj bild
- Högerklicka på bilden och välj ""
Pseudoklassbyte
Pseudoklasserna återspeglar elementens tillstånd och deras relativa positioner.
Så här kontrollerar du:
- Högerklicka på ett element i panelen Elements och välj en pseudoklass i listan över kraven för kraftelement.
- Du kan också välja en pseudoklass på höger sida av panelen Elements.
Kolumn urval
Så här kontrollerar du:
- Gå till panelen "Källor".
- Välj vilken fil som helst.
- Markera texten genom att hålla Alt.
Val av kolumn fungerar också när HTML redigeras i panelen Elements.
Kopiera begäran om cURL
Alla förfrågningar på fliken Nätverk kan kopieras och klistras sedan in i terminalen för körning med användning av curl.
Skärmtangentbord
Om Nexus 5X-profilen är vald kan du se hur webbplatsen ser ut när tangentbordet på skärmen är aktivt.
Chrome DevTools: skärmtangentbord
Skärmdump av hela sidan
Ta en bild på hela sidan är väldigt enkel. Behöver bara ...
- Öppen inspektör
- Gå till konsolen.
- Tryck Ctrl + Skift + P
- Skriv "skärmdump"
- Välj "Capture full size screenshot"
Emulering av pekdon
Du kan också simulera några sensorer:
- Pekskärm
- Koordinater för geolokalisering
- accelerometer
Så här försöker du:
- Välj panelen Elements.
- Tryck på "Esc" och välj "Emulation> Sensors".
Användbara funktioner
nycklar och värden
Med tangenterna och värdesfunktionerna kan du skriva ut tangenterna eller värdena för objektet till konsolen. Visar tangenter och objektvärden separat