Hva er krom devtools

Noen ganger må du gjøre justeringer av nettstedet ditt og sjekke resultatene samtidig. For dette formålet, Google har laget et verktøy som er forhåndsinstallert i Google Chrome-nettleseren. Chrome Devtools eller Kromutviklingsverktøy tillate brukere å reparere feil i koden sin uten å forlate den åpne gjeldende fanen.

Hva er krom devtools

Chrome Devtools er et sett med verktøy som er designet for å hjelpe deg i frontutviklingen. Du kan forbedre nettstedet ditt ved å adressere stylingfeil og vurdere endringer i sanntid. Lær hvordan du bruker Chrome DevTools til å bruke dette verktøyet som en sandkasse for å eksperimentere med nettstedstiler og kode. Du er ikke pålagt å gjøre ytterligere konfigurasjon fordi Chrome Devtools er innebygd i nettleseren din. Disse utviklerverktøyene anbefales på det sterkeste siden de hjelper deg med å redigere stilen på nettstedet ditt, fullføre DOM-relaterte operasjoner, feilsøke JavaScript og forbedre nettstedets hastighet.

La oss nå forstå få ting før vi går mot bruk av Chrome Devtools:

• Nettlesere kjører JavaScript, CCS, og Html, Dette er de tre språkene som Chrome Devtools er ment å bruke.
• Hvem som helst kan manipulere nettstedskoden ved hjelp av Chrome Devtools. De anvendte modifikasjonene blir bare sett i nettleseren din og forsvinner når du snart oppdaterer den websiden. Disse DevTools hjelper deg med å bestemme hvilke endringer som er nødvendige. Du må få tilgang til back-end-koden for å gjøre disse endringene permanente.

Hvorfor du bør bruke Chrome Devtools

Ved å tillate brukere å redigere nettsteder direkte i nettleseren, sparer Google Chrome Devtools tiden din, og vi kan ikke benekte dette faktum. For å rettferdiggjøre uttalelsen, sjekk ut den undergitte listen over Chrome DevTools-aspekter som kan hjelpe deg med å forbedre din webutvikling:

• Effektivitet: Chrome Devtools er innebygd i nettleseren din, og gir deg anlegget til å redigere nettsteder eller innhold uten å bytte faner.
• Paneler: Ved hjelp av Chrome Devtools, kan du leke med forskjellige sideelementer og trekke ut informasjonen, men husk at eventuelle endringer du gjør vil gå tapt hvis du lukker fanen uten å lagre dem.
• Optimalisering: Du kan også utføre revisjoner som du kan få en rapport relatert til ytelsen. På nettleseren vil du få forslag til å forbedre nettstedets lastehastighet.
• Feilsøk JavaScript: Brukeren kan identifisere feilene ved å ta en pause på nettstedskoden din og finne ut nøyaktig øyeblikk når skriptet ikke klarer å kjøre riktig.

Hvordan åpne Chrome Devtools

Chrome Developer Tools kan nås ved hjelp av snarveier:

• Trykk "Ctrl+Shift+J”Å åpne Chrome Devtools på Vinduer, Chromebook, og Linux.
• Til Mac os, slå den "CMD+skift+j”Eller“CMD+Shif+C”Snarvei.

Bruke Chrome's meny:
Utforsk “Flere verktøy”>“Utviklerverktøy”I krommenyen. Det vil føre deg til Chrome DevTools -vinduet:

Vinduet Developer Tools har tre faner øverst, pluss ytterligere seks som du kan se ved å klikke på >> tegnet ved siden av dem:

Her er navnene på fane som vises i vårt panel: elementer, konsoll, kilder, nettverk, ytelse, minne, applikasjon, sikkerhet, fyrtårn, cookie -redaktør og adblock:

Elements Tab in Chrome Devtools

Chrome Devtools -panelet åpnes med "Elementer”Fanen som standard. Den viser HTML og inline CSS som brukes til å utvikle websiden du ser på:

Konsollfanen i Chrome Devtools

Konsollfanen håndterer JavaScript. Den gir detaljer relatert til elementene som er til stede på en webside. Du kan bruke konsoll til å skrive JavaScript -kode for interaksjonen til websiden og sende meldinger til deg selv. Disse meldingene vises i konsollvinduet når JavaScript vil utføre:

Kilder -fanen i Chrome Devtools

Kilder -fanen vises og lar deg inspisere alle filene som brukes til å opprette nettstedet:

Nettverksfane i Chrome DevTools

Nettverksfanen viser alle belastningene for gjeldende URL du ser på. Du får detaljert informasjon om belastningsobjekter, inkludert varigheten av DNS -oppslag, innledende tilkobling, SSL, etc. Sjekk ut det undergitte bildet for å vite om lastede objektattributter:

Applikasjonsfanen i Chrome DevTools

Programfanen viser innholdet i nettleserlagringen din, inkludert nettleserdatabaser som lokal lagring, web SQL osv. Det tillater deg også å ha finkornet kontroll over informasjonskapslene dine:

Sikkerhetsfanen i Chrome Devtools

Sikkerhetsfanen gir grunnleggende sikkerhetsinformasjon, for eksempel TLS -tilstanden til et nettsted og dets HTTPS -sertifikat:

Fyrtårn i Chrome Devtools

Lighthouse hjelper Chrome DevTools -brukeren med å generere rapporter om nettstedstrukturen og funksjonaliteten, som hjelper utviklerne til å forbedre ytelsen:

Hvordan bruke Chrome DevTools for å inspisere sidetagger

H1- og H2-tagger er noen av de mest betydningsfulle delene av SEO på siden. Når du har funnet ut sidene med et uoptimalisert bilde som H2 eller sidene med fire H2 -tagger, vil du forstå kompleksiteten i denne saken.

Du kan bruke Chrome DevTools til å inspisere sidetagene. For å gjøre det, trykk “Ctrl-F”Eller“Cmd+f”Å søke i kategorien Elements, og skriv inn”H2”For å se sidekodene dine:

Hvordan bruke Chrome Devtools for å redigere CSS

Chrome Devtools tillater deg å redigere en sides CSS direkte i nettleseren din. Du kan eksperimentere med skrifter, fargevalg og alt annet som er definert av CSS:

Du kan også nye stiler til websidene ved hjelp av DevTools:

Konklusjon

Chrome Devtools er en komplett utviklerverktøysett som kommer forhåndsinstallert med Chrome-nettleseren. Disse verktøyene tillater brukere å endre websider, identifisere problemer og lage bedre nettsteder i sanntid. Du kan dra nytte av Chrome Devtools selv om du ikke er en nettutvikler. Denne artikkelen diskuterte Chrome Devtools, dens faner og hvordan du bruker disse DevTools på nettleseren din. Nå kan du gjerne utforske Chrome Devtools.