Kantoor

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

5 Cool Inspect Element Tips

5 Cool Inspect Element Tips

Inhoudsopgave:

Anonim

Google Chrome is ontworpen voor niet alleen voor gewone internetgebruikers, maar ook voor webontwikkelaars, die vaak een website, ontwerpblogs, etc. maken. Het Inspect Element of Inspecteer -optie van Google Chrome helpt gebruikers bij het vinden van informatie over een website die niet zichtbaar is. Hier zijn enkele tips voor het gebruik van het Inspect Element van Google Chrome-browser voor Windows-pc.

Inspecteer element van Google Chrome

1] Zoek verborgen JavaScript / mediabestanden

Veel websites tonen pop-ups als de bezoeker op internet blijft pagina voor meer dan 15 of 20 seconden. Of vaak wordt een afbeelding, advertentie of pictogram geopend na ergens willekeurig te hebben geklikt. Om deze verborgen bestanden van een webpagina te vinden, kunt u gebruik maken van het tabblad Bronnen van Inspect Element. Er wordt een boomstructuurlijst weergegeven aan de linkerkant die kan worden onderzocht.

2] HEX / RGB-kleurcode ophalen in Chrome

Soms vinden we een kleur misschien leuk en willen we graag de kleurcode achterhalen. U kunt eenvoudig de HEX- of RGB-kleurcode vinden die op een bepaalde webpagina wordt gebruikt, met behulp van de native optie in Google Chrome. Klik met de rechtermuisknop op de kleur en klik op Inspecteren . In de meeste gevallen krijgt u de kleurcode aan de rechterkant met andere CSS. Als je het niet ziet, wel, dan moet je misschien wat gratis kleurkiezersoftware gebruiken.

TIP : Bekijk ook deze onlinetools van Color Picker.

3] Verbeter tips voor het verbeteren van webpagina`s

Iedereen vindt het heerlijk om te landen op een website die snel wordt geopend. Als u uw website ontwerpt, moet u dat altijd in gedachten houden. Er zijn veel tools om de laadsnelheid van de pagina te controleren en te optimaliseren. Google Chrome wordt echter ook geleverd met een ingebouwde tool waarmee gebruikers tips kunnen krijgen om de laadsnelheid van de website te verbeteren. Voor toegang tot deze hulpprogramma`s gaat u naar het tabblad Audits en zorgt u ervoor Netwerkgebruik , Prestaties webpagina en Pagina Opnieuw laden en Audit bij laden zijn geselecteerd. Klik vervolgens op de knop Run . Het zal de pagina herladen en u enige informatie tonen die kan worden gebruikt om de pagina sneller te maken. U kunt bijvoorbeeld alle bronnen krijgen die geen cache-afloop hebben, JavaScript dat kan worden gecombineerd tot één bestand, enzovoort.

4] Controleer reactievermogen

Het responsief maken van een webpagina is tegenwoordig van cruciaal belang. Er zijn heel veel tools die kunnen controleren of uw site volledig reageert of niet. Deze tool van Google Chrome helpt gebruikers echter om te weten of de site responsief is of niet, en controleert hoe deze eruit zou zien op een bepaald mobiel apparaat. Open een website, download het tabblad Inspect Element , klik op de knop mobiele knop, stel de resolutie in of selecteer het gewenste apparaat om de webpagina te testen.

5] Bewerk live website

Laten we aannemen dat u een webpagina aanmaakt, maar u bent in de war over de kleur regeling of navigatiemenu-grootte of inhoud of zijbalkverhouding. U kunt uw live website bewerken met behulp van de optie Inspect Element van Google Chrome. Hoewel u de wijzigingen op een live website niet kunt opslaan, kunt u alle bewerkingen uitvoeren zodat u deze verder kunt gebruiken. Om dit te doen, opent u het Inspect Element, selecteert u de HTML-eigenschap aan de linkerkant en maakt u stijlwijzigingen aan de rechterkant. Als u een wijziging in CSS aanbrengt, kunt u op de bestandskoppeling klikken, de volledige code kopiëren en die in het originele bestand plakken.

Inspect Element van Google Chrome is een echte partner van elke webontwikkelaar. Het maakt niet uit of u een website van één pagina of een dynamische website ontwikkelt, u kunt deze tips zeker gebruiken.