Google Chrome er en af ​​de populære webbrowsere til webudvikling på grund af dets avancerede funktioner. Chrome Developer Tools kan være meget nyttige under fejlretning. De fleste af os ved allerede, at vi kan redigere live CSS ved hjælp af Chrome Dev Tools , men der er flere tips, som vi vil dele med dig i dag.

Tips til Chrome Udviklingsværktøjer

Der er mange ukendte og skjulte tricks af Chrome Dev Tools , og vi vil se nærmere på de mest nyttige tricks blandt dem. For at åbne udviklerværktøjerne i Chrome skal du trykke på F12 på dit tastatur og prøve følgende tricks.

1. Find og åbn enhver fil

Når vi laver webudvikling beskæftiger vi os med mange HTML , CSS , JS og andre filer. Når vi vil fejlrette noget, åbner vi Chrome Dev- værktøjer. Du kan hurtigt søge og finde den pågældende fil for at gøre dit arbejde lettere. Bare^(Just) tryk på Ctrl + P og begynd at skrive filnavnet. Dette hjælper dig med at finde den pågældende fil fra listen over filer.

2. Søg i kildefilen

I det forrige trick lærte vi, hvordan man søger efter en bestemt fil. Du kan endda søge efter en bestemt streng i alle de indlæste filer. Tryk på Ctrl + Shift + F for at søge efter en streng i filer. Det understøtter også regulære udtryk.

3. Gå til en bestemt linje

Når du har åbnet en kildefil og vil flytte til en bestemt linje, skal du trykke på Ctrl + G og give linjenummeret og trykke på enter.

4. Vælg DOM-elementer på fanen Konsol^(Console)

Dev Tools giver dig også mulighed for at vælge elementer i konsollen.

• $() – Returnerer^(Returns) den første forekomst af den matchende CSS - vælger.
• $$() – Det returnerer det array af elementer, der matcher den givne CSS - vælger.

Gå over til dette indlæg^{(this post.)} for flere konsolkommandoer .

5. Gør brug af flere careets

Nogle gange vil du indstille de flere indtegninger på forskellige steder, og du kan nemt gøre det i Chrome Dev - værktøjer ved at holde Ctrl - tasten nede og klikke, hvor du vil placere dem. Begynd derefter at skrive, og du vil se, at den er placeret på forskellige valgte steder.

6. Bevar log

Bevar^(Preserve) log hjælper dig med at bevare loggen, selv om siden er indlæst. Marker indstillingen ud for Bevar log^{(Preserve log )} i konsolloggen^(Console) , og loggen bevares. Dette viser loggen før siden er aflæst og nyttig til at undersøge fejlene.

7. Brug indbygget kodebeautifier

Chrome Dev Tools har den indbyggede kodebeautifier kaldet pretty print "{}" . Udviklerværktøjet viser den minimerede kode og er ikke så let at læse. Klik^(Click) på den smukke printknap, som er vist nederst til venstre på den åbnede kildefil, for at vise kildefilen i det menneskeligt læsbare format.

8. Er din hjemmeside mobilvenlig? Tjek det her

Chrome Dev Tools giver os også mulighed for at kontrollere, om et websted er mobilvenligt eller ej. Du kan tjekke, hvordan dit websted ser ud på forskellige enheder. Gå over til Chrome Dev - værktøjer, og under fanen Emulation kan du arkivere forskellige enheder. Vælg den enhed, du ønsker, og test, hvordan dit websted ser ud på den pågældende enhed.

For mere information, se følgende video.

9. Efterlign sensorer og geografisk placering^{(Geographical Location)}

Du kan endda efterligne sensorer som berøringsskærme og accelerometre. Du kan endda efterligne den geografiske placering. For at gøre dette skal du gå over til Emulation -> Sensors.

10. Vælg den næste forekomst af det aktuelle ord

Hvis du vil erstatte ordet i hele dets forekomst, skal du vælge ordet og trykke på Ctrl + D for at vælge den næste forekomst af det valgte ord. Derefter kan du redigere det ord i alle dets forekomster i ét skud.

11. Skift farveformat

Bare brug Shift + Click på farveeksemplet for at ændre ændringer mellem rgba-, hexadecimal- og hsl-formatering.

12. Tilføj^(Add) ændringer til lokale filer gennem arbejdsområdet

Vi er i stand til at redigere kildefiler og foretage nogle ændringer i CSS , JavaScript og andre filer i Chrome Dev- værktøjer. For at tilføje disse ændringer til de lokale filer, er der ingen grund til at kopiere og indsætte ændringerne fra arbejdsområde til filer på disken. Chrome Dev -værktøjer giver dig mulighed for at matche filer og opdatere den lokale fil med de ændringer, du har foretaget i dev-værktøjer. For at få dette gjort skal du højreklikke på kildefilen i venstre side på fanen Kilder^{(Sources )} og vælge Tilføj mappe til arbejdsområdet.^{(Add Folder to workspace.)}

Håber dette hjælper.

Chrome Development Tools Tutorials, Tips, Tricks

Gоogle Chrome іs one of the popular web browserѕ for web development, 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

• Bedste Google Chrome tips og tricks til Windows PC-brugere

• 3 nyttige tips og tricks til brug af Sticky Notes

• Sådan downloader du en skrifttype fra et websted ved hjælp af udviklerværktøjer

• Genstart Chrome, Edge eller Firefox uden at miste faner i Windows 11/10

• Tips til brug af Inspect Element i Google Chrome-browseren

• Hvor gemmes cookies i Windows 10 for alle større browsere?

• 20+ skjulte Google-spil, du skal spille (2022)

• Sådan rettes Twitch Error 2000 i Google Chrome

• Sådan sender du en tekst fra computeren med Android-beskeder

• Sådan sætter du Google Chrome i mørk tilstand -

• Sådan forhindrer du Chrome i at bede om at gemme adgangskoder -

• Sådan lægger du billeder op på Instagram fra en pc -

• Sådan rydder du cookies fra Chrome: Alt hvad du behøver at vide

• Løs problem: Google Chrome bruger meget processor (CPU), når jeg besøger et websted

• Hvad er DNS over HTTPS eller Secure DNS-opslag? Aktiver det i Google Chrome!

• Gå inkognito med en genvejstast i Chrome, Edge, Firefox og Opera

• Sådan rettes 403 Forbidden Error på Google Chrome

• Sådan aktiverer du Java i alle de store webbrowsere

• Sådan slår du en fane fra i Chrome, Firefox, Microsoft Edge og Opera

• Sådan ændrer du dit navn på Google Meet