Chrome-ontwikkelingstools Zelfstudies, tips, trucs

Google Chrome is een van de populaire webbrowsers voor webontwikkeling vanwege de geavanceerde functies. Chrome Developer Tools kan 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 het ontwikkelen van Chrome-tools

Er zijn veel onbekende en verborgen trucs van Chrome Dev Tools en we kijken naar de handigste trucs onder hen. Als u de ontwikkelaarstools in Chrome wilt openen, drukt u op F12 op uw toetsenbord en probeert u de volgende trucs uit.

1. Zoek en open elk bestand

Wanneer we bezig zijn met webontwikkeling, hebben we te maken met veel HTML, CSS, JS en andere bestanden. Wanneer we iets willen debuggen, openen we Chrome Dev-hulpprogramma`s. U kunt snel zoeken en het specifieke bestand vinden om uw taak gemakkelijker te maken. Druk gewoon op Ctrl + P en begin de bestandsnaam te typen. Dit helpt u om het specifieke bestand uit de lijst met bestanden te vinden.

2. Zoeken in bronbestand

In vorige truc kwamen we te weten hoe te zoeken naar een bepaald bestand. U kunt zelfs naar een bepaalde reeks 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

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

4. Selecteer DOM-elementen op tabblad Console

Met Dev Tools kunt u ook elementen in de console selecteren.

• $ () - Retourneert de eerste instantie van de overeenkomende CSS-selector.
• $$ () - Het retourneert de array met elementen die overeenkomen met de opgegeven CSS-selector.

Ga voor meer console-opdrachten naar dit bericht.

5. Gebruik meerdere extraatjes

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

6. Log behouden

Log behouden helpt u om het logbestand te behouden, zelfs als de pagina is geladen. Schakel de optie naast Logbestand behouden in het consolelog in en het logboek wordt bewaard. Dit toont het logboek voordat de pagina onbelast en nuttig was om de fouten te onderzoeken.

7. Gebruik de ingebouwde code-beautifier

Chrome Dev Tools heeft de ingebouwde code-beautifier met de naam pretty print "{}". Developer-hulpmiddel geeft de geminimaliseerde code weer en is niet zo gemakkelijk te lezen. Klik op de mooie knop Afdrukken die linksonder in het geopende bronbestand wordt getoond om het bronbestand in het door mensen leesbare formaat weer te geven.

8. Is uw website mobielvriendelijk? Bekijk het hier

Met Chrome Dev Tools kunnen we ook controleren of een website mobielvriendelijk is of niet. U kunt controleren hoe uw website eruit ziet op verschillende apparaten. Ga naar Chrome Dev-hulpprogramma`s en onder het tabblad Emulatie kun je verschillende apparaten archiveren. Selecteer het gewenste apparaat en test hoe uw website eruit ziet op dat apparaat.

Bekijk de volgende video voor meer informatie.

9. Emuleer sensoren en geografische locatie

U kunt zelfs de sensoren emuleren zoals een aanraakscherm en versnellingsmeters. U kunt zelfs de geografische locatie nabootsen. Ga hiervoor naar Emulatie -> Sensoren.

10. Selecteer volgende occurrence van het huidige woord

Als u het woord in al deze occurrence wilt vervangen, selecteert u het woord en drukt u op Ctrl + D om het volgende exemplaar van het geselecteerde woord te selecteren. U kunt dit woord in één keer in elk exemplaar bewerken.

11. Verander het kleurformaat

Gebruik eenvoudig Shift + klik op het kleurenvoorbeeld om wijzigingen tussen rgba, hexadecimaal en hsl-opmaak te wijzigen.

12. Wijzigingen in lokale bestanden toevoegen via werkruimte

We kunnen bronbestanden bewerken en een aantal wijzigingen aanbrengen in CSS, Java Script en in andere bestanden in Chrome Dev-hulpprogramma`s. Om deze wijzigingen aan de lokale bestanden toe te voegen, hoeft u hier niet te kopiëren om de wijzigingen van de werkruimte naar de bestanden op schijf te plakken. Met Chrome Dev-hulpprogramma`s kunt u bestanden vergelijken en het lokale bestand bijwerken met de wijzigingen die u hebt aangebracht in dev-gereedschappen. Als u dit wilt doen, klikt u met de rechtermuisknop op het bronbestand aan de linkerkant op het tabblad Bronnen en selecteert u Map toevoegen aan werkruimte.

Ga voor meer informatie over werkruimten naar Chrome.com.