Hoe test je HTML-code in een browser?

HTML is de ruggengraat van alle webpagina’s op het web. HTML wordt gebruikt om de basisstructuur van een website te maken en de gewenste UI van de pagina weer te geven. Aangezien het de basis is van elke webpagina, wordt het van vitaal belang om de HTML-code te testen in een normale browser, samen met cross-browser testscenario’s. De snelste manier is het testen in de browser, dus laten we eens kijken hoe dit kan worden gedaan en ook hoe HTML-code kan worden getest op echte apparaat-browsercombinaties.

Het belang van het testen van HTML-code in de browser

Je kunt je afvragen waarom het nodig is om code in de browser te testen. Ter verduidelijking: het testen van HTML-code in een browser heeft betrekking op het controleren van kleine wijzigingen in de code. Bijvoorbeeld, controleren of CSS voor cross-browser compatibiliteit correct wordt toegepast of een element in HTML manipuleren om het gedrag ervan te controleren.

Met dev tools kunnen ontwikkelaars de HTML-code inspecteren, laadtijden van assets controleren, gegevens opslaan en nog veel meer.

Het gebruik van dev tools maakt het voor ontwikkelaars heel gemakkelijk om kleine codewijzigingen te testen en het gedrag van de pagina te analyseren.

Het is vermeldenswaard dat het testen van HTML-code in een browser ver afstaat van de traditionele handmatige of geautomatiseerde tests die op elke applicatie worden uitgevoerd.

Dat zijn uitgebreide tests om de functionaliteit en betrouwbaarheid van een applicatie te testen, terwijl dev tools helpen om websites op een veel kleiner niveau te testen.

Dev tools zijn beschikbaar in elke browser en hebben overal dezelfde functies. Het zou nog mooier zijn als er een platform was om cross-browser tests uit te voeren. Het heeft ook ingebouwde Dev-tools waarmee gebruikers hun HTML-code kunnen testen op een echt apparaat in elke browser om eventuele cross-browser compatibiliteitsproblemen op te sporen.

U kunt ook een lighthouse test uitvoeren op uw website met behulp van de dev tools, die uw website een algemene score geeft op het gebied van prestaties, toegankelijkheid, SEO, enz.

Hoe HTML-code testen in een browser?

Elke browser heeft een handige functie waarmee ontwikkelaars HTML-code kunnen testen op de browserpagina. Laten we eens kijken hoe dit werkt.

Voorbeeld Inspecteren HTML en CSS

Klik in je webbrowser op control shift C voor Windows of appeltje shift C voor Mac

In dit voorbeeld van inspecteren zie je dat de witte tekst de class of stijl aw-banner-top-text-intro heet. Deze stijl staat in het CSS van het WordPress thema. Lees handleidingen hieronder.

Bestandsgrootte bekijken alle html elementen

Om de bestandsgrootte bekijken alle html elementen ga je naar netwerk > grootten. Je ziet dan alle css, javascript–bestanden en afbeeldingen. Klik of een element en je ziet wat het doet, hoe groot het is en de tijd van laden.

Meer handleidingen html en code inspecteren

Meer WordPress handleidingen over inspecteren vind je hier: