Utvecklingsverktyg för Chrome Handledning, tips, tricks

Google Chrome är en av de populära webbläsarna för webbutveckling på grund av dess avancerade funktioner. Utvecklingsverktyg för Chrome kan vara mycket användbara när felsökning. De flesta av oss vet redan att vi kan redigera den levande CSS med Chrome Dev Tools, men det finns fler tips som vi kommer att dela med dig idag.

Tips för Chrome Utvecklingsverktyg

Det finns många okända och dolda trick i Chrome Dev Verktyg och vi kommer att titta på de mest användbara kneparna bland dem. För att öppna utvecklingsverktygen i Chrome trycker du på F12 på tangentbordet och provar följande tricks.

1. Hitta och öppna någon fil

När vi gör webbutveckling hanterar vi många HTML, CSS, JS och andra filer. När vi vill felsöka något öppnar vi Chrome Dev-verktyg. Du kan snabbt söka och hitta den specifika filen för att göra ditt jobb enklare. Tryck bara på Ctrl + P och börja skriva filnamnet. Detta hjälper dig att hitta den specifika filen från listan över filer.

2. Sök inom källfilen

I tidigare trick kom vi att veta hur man söker efter en viss fil. Du kan även söka efter en viss sträng i alla de laddade filerna. Tryck på Ctrl + Shift + F för att söka efter en sträng i filer. Den stöder också reguljära uttryck.

3. Gå till en särskild rad

När du har öppnat någon källfil och vill flytta till en viss rad, tryck sedan på Ctrl + G och ange radenummer och tryck på Enter.

4. Val av DOM-element i fliken Konsol

Med Dev Tools kan du också välja element i konsolen.

• $ () - Returnerar den första förekomsten av matchande CSS-väljaren.
• $$ () - Den returnerar arrayen av element som matchar den givna CSS-väljaren.

För mer konsolkommandon, gå över till det här inlägget.

5. Använd flera bilar

Ibland vill du ställa in flera bilar på olika platser och du kan enkelt göra det i Chrome Dev-verktyg genom att hålla tangenten Ctrl och klicka där du vill placera dem. Då börjar du skriva och du kommer att se det som är placerat på olika ställen valt.

6. Bevara logg

Bevar logg hjälper dig att fortsätta loggen även om sidan är laddad. Markera alternativet bredvid Bevar logg i konsolloggen och loggen bevaras. Detta visar loggen före sidan i lossat och användbart för att undersöka buggarna.

7. Använd inbyggd kodskärm

Chrome Dev Tools har den inbyggda kodskärmaren pretty print "{}". Utvecklarverktyget visar den minimerade koden och är inte så lätt att läsa. Klicka på den söta utskriftsknappen som visas längst ner till vänster på den öppna källfilen, för att visa källfilen i det läsbara formatet.

8. Är din webbplats mobilvänlig? Kolla det här

Chrome Dev Tools tillåter oss också att kontrollera om en webbplats är mobilvänlig eller inte. Du kan kontrollera hur din webbplats ser på olika enheter. Gå över till Chrome Dev-verktyg och under fliken Emulation , så kan du ladda olika enheter. Välj den enhet du vill ha och testa hur din webbplats ser ut i den enheten.

Mer information finns på följande video.

9. Emulera sensorer och geografiskt läge

Du kan även efterlikna sensorer som pekskärm och accelerometrar. Du kan även efterlikna det geografiska läget. För att göra detta, gå vidare till Emulering -> Sensorer.

10. Välj nästa förekomst av det aktuella ordet

Om du vill byta ut ordet I all händelse, välj sedan ordet och tryck på Ctrl + D för att välja nästa förekomst av det valda ordet. Du kan redigera det ordet i alla händelser i ett skott.

11. Ändra färgformat

Använd bara Skift + Klicka på färgförhandsgranskningen för att ändra ändras bland rgba, hexadecimal och hsl-formatering.

12. Lägg till ändringar i lokala filer via arbetsytan

Vi kan redigera källfiler och göra vissa ändringar i CSS, Java Script och i andra filer i Chrome Dev-verktyg. För att lägga till dessa ändringar i de lokala filerna behöver du inte kopiera klistra in ändringarna från arbetsytan till filer på disken. Med Chrome Dev-verktyg kan du matcha filer och uppdatera den lokala filen med de ändringar du har gjort i dev-verktyg. För att få det gjort klickar du på källfilen till vänster på fliken Källor och väljer Lägg till mapp i arbetsytan.

För mer information om arbetsytor, gå över till Chrome.com.