Google Chrome er en av de populære nettleserne for webutvikling, på grunn av det avanserte funksjoner. Utviklerverktøy for Chrome kan være veldig nyttig mens feilsøking. De fleste av oss vet allerede at vi kan redigere live CSS ved hjelp av Chrome Dev Tools, men det er flere tips vi vil dele med deg i dag.
Tips om Chrome Development Tools
Det er mange ukjente og skjulte triks av Chrome Dev Tools, og vi vil se på de mest nyttige triksene blant dem. For å åpne utviklerverktøyene i Chrome trykker du på F12 på tastaturet ditt og prøv følgende triks.
1. Finn og åpne hvilken som helst fil
Når vi gjør webutvikling, håndterer vi mange HTML, CSS, JS og andre filer. Når vi vil feilsøke noe, åpner vi Chrome Dev-verktøy. Du kan raskt søke og finne den aktuelle filen for å gjøre jobben enklere. Bare trykk på Ctrl + P og begynn å skrive filnavnet. Dette hjelper deg med å finne den aktuelle filen fra listen over filer.
2. Søk i kildefilen
I tidligere triks kom vi å vite hvordan du søker etter en bestemt fil. Du kan til og med søke etter en bestemt streng i alle de lastede filene. trykk Ctrl + Shift + F å søke etter en streng i filer. Den støtter også vanlige uttrykk.
3. Gå til bestemt linje
Når du har åpnet noen kildefil og vil flytte til bestemt linje, trykker du på Ctrl + G og gi linjenummeret og trykk enter.
4. Velge DOM-elementer i konsoll-kategorien
Dev Tools lar deg også velge elementer i konsollen.
- $() – Returnerer den første forekomsten av den tilsvarende CSS-velgeren.
- $$() – Den returnerer utvalg av elementer som samsvarer med den oppgitte CSS-väljeren.
5. Gjør bruk av flere kjøretøyer
Noen ganger vil du sette flere biletter på forskjellige steder, og du kan enkelt gjøre det i Chrome Dev-verktøy ved å holde Ctrl tast og klikk hvor du vil plassere dem. Deretter begynner å skrive og du vil se det som er plassert på forskjellige steder valgt.
6. Bevar logg
Bevar logg hjelper deg å fortsette loggen selv siden siden er lastet. Sjekk alternativet ved siden av Bevar logg i konsollloggen og loggen er bevart. Dette viser loggen før siden i losset og nyttig for å undersøke feilene.
7. Bruk innebygd kodeforsker
Chrome Dev Tools har den innebygde koden beautifier kalt pen utskrift "{}". Utviklerverktøyet viser den minimerte koden og er ikke så lett å lese. Klikk på den pen utskriftsknappen som vises nederst til venstre på den åpne kildefilen, for å vise kildefilen i det menneskelige lesbare formatet.
8. Er nettstedet ditt mobilvennlig? Sjekk det her
Chrome Dev Tools lar oss også kontrollere om et nettsted er mobilvennlig eller ikke. Du kan sjekke hvordan nettstedet ditt ser på ulike enheter. Gå over til Chrome Dev-verktøy og under emulering fanen, kan du laste inn ulike enheter. Velg enheten du vil ha, og test hvordan nettstedet ditt ser ut i den enheten.
9. Emulere sensorer og geografisk plassering
Du kan til og med etterligne sensorene som berøringsskjerm og akselerometre. Du kan til og med etterligne den geografiske plasseringen. For å gjøre dette, gå over til Emulering -> Sensorer.
10. Velg neste forekomst av gjeldende ord
Hvis du vil erstatte ordet I alle tilfeller, velg ordet og trykk Ctrl + D for å velge neste forekomst av det valgte ordet. Du kan redigere det ordet i alle tilfeller i ett skudd.
11. Endre fargeformat
Bare bruk Skift + Klikk På fargeforhåndsvisningen for endring endres mellom rgba, heksadesimal og hsl-formatering.
12. Legg til endringer i lokale filer gjennom arbeidsområdet
Vi kan redigere kildefiler og gjøre noen endringer i CSS, Java Script og i andre filer i Chrome Dev-verktøy. For å legge til disse endringene i de lokale filene, er det ikke nødvendig å kopiere lim inn endringene fra arbeidsområdet til filer på disken. Med Chrome Dev-verktøy kan du matche filer og oppdatere den lokale filen med endringene du har gjort i dev-verktøy. For å få dette gjort, høyreklikk på kildefilen på venstre side på kilder fanen og velg Legg til mappe i arbeidsområdet.
For mer informasjon om arbeidsområder, gå over til Chrome.com.
