Debugging, testen en problemen oplossen in WordPress

Gelukkig is WordPress een veilig systeem. Je kan problemen opzoeken dankzij de ingebouwde debug-modus, maar ook dankzij de vele externe tools die je kunt inzetten om fouten in WordPress op te sporen.

In dit artikel bespreken we de ingebouwde debug modus van WordPress en hoe u deze kunt inschakelen. Daarna zullen we ook enkele manieren met u delen waarop u uw WordPress site kunt debuggen.

Stel je dit scenario voor: U werkt aan een WordPress ontwikkelingsproject en hebt een 20 of meer plugins geïnstalleerd. Uw site draait echter niet helemaal zoals u dat zou willen. U hebt alle gebruikelijke problemen opgelost: de hosting is toereikend, er zijn geen duidelijke JavaScript– of PHP-fouten, en er is niets anders duidelijk mis. Je vermoedt dat een of meer van de plugins die je hebt geïnstalleerd de schuldige zijn, maar hoe kom je erachter welke plugin het probleem veroorzaakt?

De gebruikelijke methode om een probleem-plugin te identificeren is om plugins een voor een te deactiveren totdat het gedrag dat u probeert aan te pakken stopt. Echter, met de juiste plugin geïnstalleerd, kunt u sneller en met grotere nauwkeurigheid WordPress problemen lokaliseren en debuggen. Dit is het soort scenario waarvoor Query Monitor is gemaakt om op te lossen.

WordPress debug log?

Wanneer je de WordPress debug modus inschakelt, zul je real-time berichten op je site zien (zoals het bericht hierboven) – maar de berichten zelf zullen nergens worden opgeslagen.

Als u ze wilt opslaan, moet u het WordPress debug log inschakelen. Dit slaat alle berichten en fouten op in een bestand op uw server. Je kunt dit inschakelen door de WP_DEBUG_LOG constante op “true” te zetten. Dan zal WordPress alle problemen opslaan in het volgende bestand:

wp-content/debug.log

Je kunt echter ook een ander bestand/map op een andere server locatie kiezen om logs naar weg te schrijven.

Als je alle berichten in het logboek wilt opslaan, maar ze niet op een publieke HTML pagina wilt tonen (zoals in het voorbeeld hierboven), kun je de constante WP_DEBUG_DISPLAY gebruiken om debug modus ingeschakeld te houden, maar de berichten niet op je site te tonen.

In de meeste gevallen zult u WP_DEBUG_DISPLAY willen combineren met WP_DEBUG_LOG.

WordPress debug plugin

Je kunt ook de gratis WordPress debug plugins vinden die het gemakkelijk voor je maken om debug modus in te schakelen. Je kunt verschillende opties vinden op WordPress.org, maar wij raden de gratis WP Debugging plugin van Andy Fragen aan. Zodra je de plugin installeert en activeert, begint het onmiddellijk te werken. Standaard zet het de volgende constanten op true (dat wil zeggen, het schakelt de volgende functies in):

WP_DEBUG – schakelt de debug modus in.
WP_DEBUG_LOG – slaat berichten op in een log bestand.
SCRIPT_DEBUG
SAVEQUERIES
Later in dit artikel zullen we uitleggen wat deze laatste twee constanten doen.

Om de instellingen van de plugin te wijzigen, ga naar Tools → WP Debugging:

Zorg ervoor dat je de plugin uitschakelt als je klaar bent om debug modus weer uit te schakelen.

Query Monitor plugin

De Query Monitor plugin is een gratis plugin die bijzonder nuttig is voor het debuggen van specifieke gebieden in WordPress, waaronder:

• Database queries.
• PHP fouten.
• Hooks en acties.
• Blokken van de blok editor.
• Geladen scripts en stylesheets.
• HTTP API oproepen.
• Gebruikers functies.

Het is een van de beste WordPress debug tools die je kunt vinden, dat is de reden waarom het heeft een bijna-perfecte 5-sterren rating uit meer dan 320 reviews.

Zodra u de plugin installeert en activeert, zult u een aantal nieuwe opties met debug informatie in de WordPress werkbalk zien. Wanneer je erop klikt, openen deze opties een nieuwe Query Monitor box die je meer informatie geeft.

Lees handleiding Query Monitor plugin

Debuggen met CSS

Voor debuggen met CSS vind ik dit heel handig:

[style] { /* selecteer elk element met een stijlkenmerk en omlijn het in rood */
  outline: 2px solid red; 
}

Zie voorbeeld hieronder:

See the Pen Combined Attributes and Attribute-Only Selection by CSS-Tricks (@css-tricks) on CodePen.

Deze gebruik ik ook vaak. Alles om elk element krijgt een groen lijntje op een webpagina:

* { /* selecteer elk element met een stijlkenmerk en omlijn het in rood */
  outline: 3px solid rgba(0,236,0,02); 
}