Vi använder Chrome DevTools som om

  1. Redigera snabbt HTML-element
  2. Expand alla barnelement
  3. Flyttning av inspektören
  4. DOM-elementsökning
  5. paletter
  6. Flera markörer
  7. Koda base64-bild
  8. Pseudoklassbyte
  9. Kolumn urval
  10. Kopiera begäran om cURL
  11. Skärmtangentbord
  12. Skärmdump av hela sidan
  13. Emulering av pekdon
  14. 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.

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.

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.

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 paletten

Valet 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.

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 Chrome DevTools: skärmtangentbord

Skärmdump av hela sidan

Ta en bild på hela sidan är väldigt enkel. Behöver bara ...

  1. Öppen inspektör
  2. Gå till konsolen.
  3. Tryck Ctrl + Skift + P
  4. Skriv "skärmdump"
  5. Välj "Capture full size screenshot"
Skärmdump av hela sidan

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. Med tangenterna och värdesfunktionerna kan du skriva ut tangenterna eller värdena för objektet till konsolen Visar tangenter och objektvärden separat

Новости