Utviklingsverktøy for Chrome Tutorials, Tips, Tricks

Google Chrome er en av de populære nettleserne for webutvikling, på grunn av det avanserte funksjonene. Chrome Developer Tools kan være svært nyttig når du feiler. 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 for Chrome Utviklingsverktøy

Det er mange ukjente og skjulte triks av Chrome Dev Verktøy og vi vil se på de mest nyttige triksene blant dem. For å åpne utviklerverktøyene i Chrome trykker du på F12 på tastaturet og prøver følgende triks.

1. Finn og åpne en 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 inn 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 på Ctrl + Shift + F for å 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 en bestemt linje, trykker du Ctrl + G og gir linjenummeret og trykker på Enter.

4. Velger 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 en rekke elementer som samsvarer med den oppgitte CSS-velgeren.

For flere konsollkommandoer, gå over til dette innlegget.

5. Gjør bruk av flere kjøretøyer

Noen ganger vil du sette flere kjøretøy på forskjellige steder, og du kan enkelt gjøre det i Chrome Dev-verktøy ved å holde Ctrl -tasten og klikke hvor du vil plassere dem. Så begynn å skrive og du vil se det som er plassert på forskjellige steder valgt.

6. Bevar logg

Bevar logg hjelper deg med å fortsette loggen, selv om siden er lastet inn. Kontroller alternativet ved siden av Bevar logg i konsollloggen, og loggen blir bevart. Dette viser loggen før siden i losset og nyttig for å undersøke feilene.

7. Bruk innebygd kodebeautifier

Chrome Dev Tools har den innebygde koden beautifier kalt pen print "{}". 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å sjekke 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 Emulation -fanen, kan du laste inn ulike enheter. Velg ønsket enhet og test hvordan nettstedet ditt ser ut i den enheten.

For mer informasjon, ta en titt på følgende video.

9. Emulere sensorer og geografisk plassering

Du kan til og med etterligne sensorene som berøringsskjerm og akselerometer. Du kan til og med etterligne den geografiske plasseringen. For å gjøre dette, gå over til Emulering -> Sensorer.

10. Velg neste forekomst av det nåværende ordet

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 Shift + Klikk på fargevarioen for å endre endring 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 til venstre på fanen Kilder og velg Legg til mappe i arbeidsområdet.

For mer informasjon om arbeidsområder, gå over til Chrome.com.