Vi bruger Chrome DevTools som om

  1. Rediger hurtigt HTML-elementer
  2. Udvid alle børns elementer
  3. Flytning af inspektøren
  4. DOM element søgning
  5. paletter
  6. Flere markører
  7. Indkode base64 billede
  8. Pseudoklasseskift
  9. Kolonneudvælgelse
  10. Kopier anmodning om cURL
  11. Skærmtastatur
  12. Skærmbillede af hele siden
  13. Emulering af berøringsenheder
  14. Nyttige funktioner

Som navnet antyder, er Chrome DevTools eller web inspektør et værktøj designet til webudviklere og personer, der er tilknyttet det. Web inspektøren giver dig mulighed for at gøre følgende:

  • Kontroller, om displayet er korrekt.
  • Spor udførelsen af ​​scripts i JavaScript.
  • Se netværksaktiviteter.

Når jeg skrev denne artikel brugte jeg Canary - version af Chrome, hvor nye funktioner testes, som derefter falder ind i en stabil version af Chrome.

For at starte inspektøren kan du højreklikke overalt på siden og vælge "View item code", du kan også bare trykke på Ctrl + Shift + C.

Rediger hurtigt HTML-elementer

Lad os starte med de enkleste: redigeringselementer.

Lad os starte med de enkleste: redigeringselementer

Sådan kontrolleres:

  • Vælg fanen Elements.
  • Vælg ethvert HTML-element inde i panelet.
  • Dobbeltklik på taggen og ændrer f.eks. Tagnavnet.

Når redigering er gennemført, opdateres lukkekoden automatisk.

Udvid alle børns elementer

Sådan kontrolleres:

  • Gå til elementets panel.
  • Vælg et element, og hold Alt ved at klikke på pilen til venstre for elementet.

Flytning af inspektøren

Inspektionspanelet kan trykkes både nederst i browservinduet og til højre side. Placeringen af ​​panelet til højre er f.eks. Praktisk, når du arbejder på widescreen-skærme. Inspektionspanelet kan også placeres i et separat vindue og overføres til en anden skærm.

Inspektionspanelet kan også placeres i et separat vindue og overføres til en anden skærm

Sådan kontrolleres:

  • Ctrl + Skift + D - Toggle Location

DOM element søgning

Sandsynligvis ikke mange for hvem dette vil være en opdagelse, men i fanen "Elements" kan du søge hos DOM.

Sandsynligvis ikke mange for hvem dette vil være en opdagelse, men i fanen Elements kan du søge hos DOM

Sådan kontrolleres:

  • Tryk på Ctrl + F og indtast det foreslåede søgeforespørgsel.

paletter

Vælg farve fra paletten

Valget af farve i nyere versioner af Chrome har gennemgået nogle ændringer: tilføjet to paletter for at lette valget af farve.

Flere markører

Flyt markøren og, mens du holder Ctrl, klik på det ønskede område for at tilføje en markør. Du kan fortryde handlingen med Ctrl + U. Personligt har jeg aldrig været nyttigt.

Indkode base64 billede

Sådan kontrolleres:

  • Skift til netværkspanelet.
  • Vælg billede
  • Højreklik på billedet og vælg ""

Pseudoklasseskift

Pseudoklasserne afspejler elementernes tilstand og deres relative positioner.

Pseudoklasserne afspejler elementernes tilstand og deres relative positioner

Sådan kontrolleres:

  • Højreklik på et element i panelet Elements, og vælg en pseudoklasse på listen over styringselementer.
  • Du kan også vælge en pseudoklasse på højre side af elementets panel.

Kolonneudvælgelse

Sådan kontrolleres:

  • Gå til panelet "Kilder".
  • Vælg enhver fil.
  • Vælg teksten ved at holde Alt.

Valg af en kolonne fungerer også, når HTML redigeres i elementets panel.

Kopier anmodning om cURL

Enhver anmodning på fanen Netværk kan kopieres og indsættes derefter i terminalen for udførelse ved brug af krølle.

Skærmtastatur

Hvis Nexus 5X-profilen er valgt, kan du se, hvordan webstedet ser ud, når tastaturet på skærmen er aktiv.

Chrome DevTools: Skærmtastatur Chrome DevTools: Skærmtastatur

Skærmbillede af hele siden

Tage et billede af hele siden er meget enkel. Bare brug for ...

  1. Åben inspektør.
  2. Gå til konsol.
  3. Tryk på Ctrl + Skift + P
  4. Skriv "screenshot"
  5. Vælg "Capture full size screenshot"
Skærmbillede af hele siden

Emulering af berøringsenheder

Du kan også simulere nogle sensorer:

  • Berøringsskærm
  • Koordinater for geolocation
  • accelerometer

Hvordan man prøver:

  • Vælg panelet Elementer.
  • Tryk på "Esc" og vælg "Emulation> Sensors".

Nyttige funktioner

nøgler og værdier

Tasterne og værdierne giver dig mulighed for at udlæse nøglerne eller værdierne af objektet til konsollen. Tasterne og værdierne giver dig mulighed for at udlæse nøglerne eller værdierne af objektet til konsollen Viser nøgler og objektværdier separat