Google Chrome biedt hoogwaardige webontwikkelingstools, ook wel DevTools genoemd, die u kunt gebruiken om onder andere HTML, CSS en JavaScript op uw webpage te debuggen. Hier leest u hoe u deze tools kunt gebruiken:
1. Open Google Chrome.
1. Ga naar de pagina die u wilt debuggen.
1. Klik met de rechtermuisknop op een element op de pagina dat u wilt inspecteren en selecteer ‘Inspecteren’. U ziet dan de HTML-broncode die bij dat element hoort in het deelvenster ‘Elementen’ van DevTools. U kunt ook de F12-toets op uw toetsenbord gebruiken om de DevTools te openen.
1. Bekijk de HTML-broncode in het paneel ‘Elementen’. U ziet de HTML die door de browser wordt geïnterpreteerd. U kunt door de HTML-structuur navigeren en elementen uitvouwen om hun kinderelementen te bekijken. Let op: De HTML-code hier kan verschillen van de broncode van uw server omdat JavaScript deze kan veranderen nadat de pagina is geladen.
1. Wijzig de HTML om problemen te debuggen. U kunt linksklikken op elke HTML-tag in het paneel ‘Elementen’ en deze bewerken, verplaatsen, verwijderen, enz. Wijzigingen worden meteen zichtbaar.
1. Gebruik de tool ‘Element selecteren in de pagina om te inspecteren’ (het vierkante icoontje in de linkerbovenhoek van het paneel ‘Elementen’, boven de HTML) om snel een specifiek element op uw webpagina te selecteren en te inspecteren.
1. Bekijk de CSS die op de geselecteerde HTML wordt toegepast. Aan de rechterkant van het paneel ‘Elementen’ ziet u de tabbladen ‘Stijlen’, ‘Berekend’, ‘Evenement luisteraars’, ‘Domein’, ‘Eigenschappen’ en ‘Toegankelijkheid’. De eerste twee tabbladen hebben betrekking op de CSS die de presentatie van de geselecteerde HTML beïnvloedt.
1. Aan de rechterkant van het paneel kunt u ook tijdelijk CSS-regels inschakelen, uitschakelen en toevoegen om te zien hoe zij de webpagina beïnvloeden. Dit hoeft niets te veranderen aan de feitelijke bestanden op uw live site; ze worden alleen toegepast in uw huidige browseromgeving.
1. Om uw veranderingen op te slaan, rechtsklik en kopieer de wijzigingen, plak deze dan in uw daadwerkelijke code.
Het is belangrijk op te merken dat al deze wijzigingen tijdelijk zijn en alleen van toepassing zijn op uw huidige browsertabblad. Als u de pagina vernieuwt, gaan al uw wijzigingen verloren.
