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

Tips för Chrome Development Tools

Det finns många okända och dolda knep för Chrome Dev Tools och vi kommer att titta på de mest användbara knep bland dem. För att öppna utvecklarverktygen i Chrome trycker du på F12 på tangentbordet och testar följande knep.

1. Hitta och öppna valfri fil

När vi håller på med 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^(Just) på Ctrl + P och börja skriva filnamnet. Detta hjälper dig att hitta den specifika filen från listan med filer.

2. Sök i källfilen

I det föregående tricket fick vi veta hur man söker efter en viss fil. Du kan till och med söka efter en viss sträng i alla inlästa filer. Tryck på Ctrl + Shift + F för att söka efter en sträng i filer. Det stöder även reguljära uttryck.

3. Gå till en viss rad

När du har öppnat valfri källfil och vill flytta till en viss rad, tryck sedan på Ctrl + G och ange radnumret och tryck på enter.

4. Välj DOM-element på fliken Konsol^(Console)

Dev Tools låter dig också välja element i konsolen.

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

För fler konsolkommandon, gå över till det här inlägget.^{(this post.)}

5. Använd flera carets

Ibland vill du ställa in flera markörer på olika platser och du kan göra det enkelt i Chrome Dev- verktyg genom att hålla ned Ctrl-^{(Ctrl )} tangenten och klicka där du vill placera dem. Börja sedan skriva och du kommer att se att den är placerad på olika valda platser.

6. Bevara logg

Bevara^(Preserve) loggen hjälper dig att bevara loggen även om sidan är laddad. Markera alternativet bredvid Bevara logg^{(Preserve log )} i konsolloggen^(Console) och loggen bevaras. Detta visar loggen innan sidan är avladdad och är till hjälp för att undersöka felen.

7. Använd inbyggd kodförskönare

Chrome Dev Tools har den inbyggda kodförskönaren som heter pretty print "{}" . Utvecklarverktyget visar den minimerade koden och är inte så lätt att läsa. Klicka^(Click) på den vackra utskriftsknappen som visas längst ner till vänster på den öppnade källfilen, för att visa källfilen i det mänskliga läsbara formatet.

8. Är din webbplats mobilanpassad? Kolla här

Chrome Dev Tools låter oss också kontrollera om en webbplats är mobilanpassad eller inte. Du kan kontrollera hur din webbplats ser ut på olika enheter. Gå över till Chrome Dev- verktyg och under fliken Emulering^{(Emulation )} kan du arkivera olika enheter. Välj den enhet du vill ha och testa hur din webbplats ser ut på den enheten.

För mer information, ta en titt på följande video.

9. Emulera sensorer och geografisk plats^{(Geographical Location)}

Du kan till och med efterlikna sensorerna som pekskärmar och accelerometrar. Du kan till och med efterlikna den geografiska platsen. För att göra detta, gå över till Emulation -> Sensors.

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

Om du vill ersätta ordet i hela dess förekomst, välj sedan ordet och tryck på Ctrl + D för att välja nästa förekomst av det valda ordet. Sedan kan du redigera det ordet i alla dess förekomster i ett skott.

11. Ändra färgformat

Använd bara Shift + Click på färgförhandsgranskningen för att ändra ändringar mellan rgba-, hexadecimal- och hsl-formatering.

12. Lägg^(Add) till ändringar i lokala filer via arbetsytan

Vi kan redigera källfiler och göra vissa ändringar i CSS , JavaScript och andra filer i Chrome Dev- verktyg. För att lägga till dessa ändringar i de lokala filerna behöver du inte kopiera och klistra in ändringarna från arbetsytan till filerna på disken. Med Chrome Dev-^{(Chrome Dev)} verktyg kan du matcha filer och uppdatera den lokala filen med de ändringar du har gjort i dev-verktygen. För att få detta gjort högerklicka på källfilen till vänster på fliken Källor^{(Sources )} och välj Lägg till mapp till arbetsytan.^{(Add Folder to workspace.)}

Hoppas det här hjälper.

Chrome Development Tools Tutorials, Tips, Tricks

Google Chrome is one of the popular wеb browsers for web dеvelopment, due to its advanced features. Chrome Developer Tools can be very useful while debugging. Most of us already know that we can edit the live CSS using Chrome Dev Tools, but there are more tips that we will share with you today.

Chrome Development Tools tips

There are many unknown and hidden tricks of Chrome Dev Tools and we will be looking in to the most useful tricks among them. To open the developer tools in Chrome, press F12 on your keyboard and try out the following tricks.

1. Find and Open any file

When we are doing web development we deal with many HTML, CSS, JS, and other files. When we want to debug anything, we open Chrome Dev tools. You can quickly search and find the particular file to make your job easier. Just, press Ctrl + P and start typing the file name. This helps you to find the particular file from the list of files.

2. Search within the source file

In the previous trick, we came to know how to search for a particular file. You can even search for a particular string in all the loaded files. Press Ctrl + Shift + F to search for a string in files. It also supports regular expressions.

3. Go to a particular line

Once you have opened any source file and want to move to a particular line, then press Ctrl + G and give the line number and hit enter.

4. Selecting DOM Elements in the Console tab

Dev Tools also allows you to select elements in the console.

• $() – Returns the first occurrence of the matching CSS selector.
• $$() – It returns the array of elements matching the given CSS selector.

For more console commands, head over to this post.

5. Make use of multiple carets

Sometimes, you want to set the multiple carets at different places and you can do that easily in Chrome Dev tools by holding the Ctrl key and clicking where you want to place them. Then start writing and you will see that is placed at various places selected.

6. Preserve Log

Preserve log helps you to persist the log even the page is loaded. Check the option beside Preserve log in the Console log and the log is preserved. This shows up the log before the page in unloaded and helpful to investigate the bugs.

7. Use built-in code beautifier

Chrome Dev Tools has the built-in code beautifier called pretty print “{}”. The developer tool shows the minimized code and is not so easy to read. Click on the pretty print button which is shown on the bottom left on the opened source file, to show the source file in the human-readable format.

8. Is your website mobile friendly? Check it here

Chrome Dev Tools also allows us to check whether a website is mobile-friendly or not. You can check how your website looks on various devices. Head over to Chrome Dev tools and under Emulation tab, you can file various devices. Select the device you want and test how your website looks on that device.

For more information, have a look at the following video.

9. Emulate Sensors and Geographical Location

You can even emulate the sensors like touch screens and accelerometers. You can even emulate the geographical location. To do this, head over to Emulation -> Sensors.

10. Select the next occurrence of the current word

If you want to replace the word In all of its occurrence, then select the word and press Ctrl + D to select the next occurrence of the selected word. Then, you can edit that word in all of its occurrences in one shot.

11. Alter Color Format

Just use Shift + Click on the color preview to change alters among rgba, hexadecimal and hsl formatting.

12. Add changes to local files through the workspace

We are able to edit source files and making some changes in CSS, JavaScript and other files in Chrome Dev tools. To add these changes to the local files, then there is no need to copy-paste the changes from workspace to files on disk. Chrome Dev tools allow you to match files and update the local file with the changes you have done in dev tools. To get this done right click on the source file on the left side on the Sources tab and select Add Folder to workspace.

Hope this helps.

Related posts

• Bästa Google Chrome tips och tricks för Windows PC-användare

• 3 användbara tips och tricks för att använda klisterlappar

• Hur man laddar ner ett teckensnitt från en webbplats med hjälp av utvecklarverktyg

• Starta om Chrome, Edge eller Firefox utan att tappa flikar i Windows 11/10

• Tips om hur du använder Inspect Element i webbläsaren Google Chrome

• Hur man fixar 403 förbjudet fel på Google Chrome

• Identifiera typsnitt i Chrome, Edge och Firefox med hjälp av utvecklarverktyg

• Så här rensar du cookies från Chrome: Allt du behöver veta

• Så här stänger du av en flik i Chrome, Firefox, Microsoft Edge och Opera

• Hur man skickar ett textmeddelande från datorn med Android Messages

• Vilken version av Chrome har jag? 6 sätt att ta reda på -

• Så här aktiverar du Do Not Track i Chrome, Firefox, Edge och Opera

• Rensa webbplatsdata för en viss webbplats i Chrome eller Edge med hjälp av utvecklarverktyg

• Kombinera alla dina e-postkonton till en Gmail-inkorg

• 20+ dolda Google-spel du behöver spela (2022)

• Hur man aktiverar Java i alla större webbläsare

• Google Chrome för Mac: Så får du det!

• Hur man åtgärdar Twitch Error 2000 i Google Chrome

• Åtgärda problem: Google Chrome använder mycket processor (CPU) när jag besöker en webbplats

• Så här ändrar du sökmotorn på Chrome för Windows, macOS, Android och iOS -