Google Chrome is een van de populaire webbrowsers voor webontwikkeling, vanwege de geavanceerde functies. Chrome Developer Tools kunnen erg handig zijn tijdens het debuggen. De meesten van ons weten al dat we de live CSS kunnen bewerken met Chrome Dev Tools , maar er zijn meer tips die we vandaag met u zullen delen.

Tips voor Chrome-ontwikkelingstools

Er zijn veel onbekende en verborgen trucs van Chrome Dev Tools en we zullen kijken naar de meest bruikbare trucs onder hen. Om de ontwikkelaarstools in Chrome te openen , drukt u op F12 op uw toetsenbord en probeert u de volgende trucs.

1. Zoek en open een bestand

Wanneer we aan webontwikkeling doen, hebben we te maken met veel HTML- , CSS- , JS- en andere bestanden. Als we iets willen debuggen, openen we Chrome Dev- tools. U kunt het specifieke bestand snel zoeken en vinden om uw werk gemakkelijker te maken. Druk gewoon^(Just) op Ctrl + P en begin met het typen van de bestandsnaam. Dit helpt u om het specifieke bestand te vinden in de lijst met bestanden.

2. Zoek in het bronbestand

In de vorige truc kwamen we te weten hoe we naar een bepaald bestand moesten zoeken. U kunt zelfs naar een bepaalde tekenreeks zoeken in alle geladen bestanden. Druk op Ctrl + Shift + F om naar een tekenreeks in bestanden te zoeken. Het ondersteunt ook reguliere expressies.

3. Ga naar een bepaalde regel

Zodra u een bronbestand hebt geopend en naar een bepaalde regel wilt gaan, drukt u op Ctrl + G , geeft u het regelnummer op en drukt u op enter.

4. DOM-elementen selecteren op het tabblad Console

Met Dev Tools^{(Dev Tools)} kunt u ook elementen in de console selecteren.

• $() – Retourneert^(Returns) het eerste exemplaar van de overeenkomende CSS -selector.
• $$() – Het retourneert de reeks elementen die overeenkomen met de gegeven CSS -selector.

Ga naar dit bericht^{(this post.)} voor meer console-opdrachten .

5. Maak gebruik van meerdere markeringen

Soms wilt u de meerdere carets op verschillende plaatsen instellen en u kunt dat eenvoudig doen in Chrome Dev - tools door de Ctrl - toets ingedrukt te houden en te klikken op de plaats waar u ze wilt plaatsen. Begin dan met schrijven en je zult zien dat die op verschillende geselecteerde plaatsen is geplaatst.

6. Bewaar logboek

Preserve log helpt je om het log te bewaren, zelfs als de pagina is geladen. Vink de optie aan naast Logboek behouden^{(Preserve log )} in het Console- logboek en het logboek wordt bewaard. Dit toont het logboek voordat de pagina wordt verwijderd en is handig om de bugs te onderzoeken.

7. Gebruik ingebouwde code-verfraaier

Chrome Dev Tools heeft de ingebouwde code-verfraaier genaamd pretty print "{}" . De ontwikkelaarstool toont de geminimaliseerde code en is niet zo gemakkelijk te lezen. Klik^(Click) op de mooie printknop die linksonder op het geopende bronbestand wordt weergegeven, om het bronbestand in het voor mensen leesbare formaat te tonen.

8. Is uw website mobielvriendelijk? Check het hier

Met Chrome Dev Tools^{(Chrome Dev Tools)} kunnen we ook controleren of een website mobielvriendelijk is of niet. U kunt controleren hoe uw website eruitziet op verschillende apparaten. Ga naar Chrome Dev - tools en op het tabblad Emulatie^{(Emulation )} kun je verschillende apparaten archiveren. Selecteer het gewenste apparaat en test hoe uw website eruitziet op dat apparaat.

Voor meer informatie, bekijk de volgende video.

9. Emuleer sensoren en geografische locatie^{(Geographical Location)}

U kunt zelfs de sensoren emuleren, zoals aanraakschermen en versnellingsmeters. U kunt zelfs de geografische locatie nabootsen. Ga hiervoor naar Emulation -> Sensors.

10. Selecteer het volgende voorkomen van het huidige woord

Als u het woord in zijn geheel wilt vervangen, selecteert u het woord en drukt u op Ctrl + D om het volgende voorkomen van het geselecteerde woord te selecteren. Vervolgens kunt u dat woord in één keer in al zijn voorkomens bewerken.

11. Wijzig kleurformaat

Gebruik gewoon Shift + Click op het kleurvoorbeeld om wijzigingen tussen rgba-, hexadecimale en hsl-opmaak te wijzigen.

12. Wijzigingen aan lokale bestanden toevoegen via de werkruimte^(Add)

We kunnen bronbestanden bewerken en enkele wijzigingen aanbrengen in CSS , JavaScript en andere bestanden in Chrome Dev - tools. Om deze wijzigingen aan de lokale bestanden toe te voegen, is het niet nodig om de wijzigingen van de werkruimte naar bestanden op schijf te kopiëren en plakken. Met Chrome Dev^{(Chrome Dev)} -tools kun je bestanden matchen en het lokale bestand bijwerken met de wijzigingen die je hebt aangebracht in dev-tools. Om dit voor elkaar te krijgen, klikt u met de rechtermuisknop op het bronbestand aan de linkerkant op het tabblad Bronnen en selecteert u ^{(Sources )}Map toevoegen aan werkruimte.^{(Add Folder to workspace.)}

Ik hoop dat dit helpt.

Chrome Development Tools Tutorials, Tips, Tricks

Google Chrome is one of the рopular web brоwsers for web develоpment, due to its advanced feаtures. 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

• Beste Google Chrome-tips en -trucs voor Windows-pc-gebruikers

• 3 handige tips en trucs voor het gebruik van plaknotities

• Een lettertype downloaden van een website met Developer Tools

• Start Chrome, Edge of Firefox opnieuw zonder tabbladen te verliezen in Windows 11/10

• Tips voor het gebruik van het Inspect Element van de Google Chrome-browser

• Flash inschakelen voor specifieke websites in Chrome

• Hoe de zoekmachine in Chrome voor Windows, macOS, Android en iOS te wijzigen -

• Java inschakelen in alle belangrijke webbrowsers

• Hoe Adobe Flash Player te deblokkeren in Google Chrome -

• Hoe u uw naam kunt wijzigen in Google Meet

• Incognito gaan in Chrome, Firefox, Edge en Opera

• Hoe Google Chrome in de donkere modus te zetten -

• 20+ verborgen Google-games die je moet spelen (2022)

• Hoe 403 Forbidden Error op Google Chrome te repareren

• Hoe te voorkomen dat Chrome vraagt ​​om wachtwoorden op te slaan -

• Identificeer lettertypen in Chrome, Edge en Firefox met behulp van Developer Tools

• Chrome-meldingen uitschakelen: alles wat u moet weten -

• Probleem oplossen: Google Chrome gebruikt veel processor (CPU) wanneer ik een website bezoek

• Sitegegevens wissen voor een bepaalde site in Chrome of Edge met Developer Tools

• Simpele vragen: wat zijn cookies en wat doen ze?