Debug je Laravel applicatie met de debugbar

Vraag de gratis webshop scan aan!

Kom erachter hoe jouw webshop presteert met onze webshop scan.

We controleren je webshop op:
  • Technisch: performance en hosting
  • Gebruiksvriendelijkheid: design en usability
  • Veiligheid: SSL certificaat, veiligheidslekken
  • SEO: Zoekmachine vriendelijkheid
  • En nog veel meer..

Het Laravel Debugbar pakket geschreven door Barry vd. Heuvel is een handige tool om snel en eenvoudig je Laravel applicatie te debuggen tijdens het developen. Met deze debugbar krijg je snel meer inzicht in wat er allemaal binnen jouw webapplicatie gebeurd.

In dit artikel leg ik je uit hoe je de debugbar installeert en kan gaan inzetten. Je kan de code van de debugbar vinden op de volgende github pagina.

De Laravel Debugbar installeren

De installatie is zeer eenvoudig. Zo heb je de debugbar al binnen 5 minuten werkend in je Laravel applicatie. Hier onder de stappen die nodig zijn om de debugbar te installeren.

composer require barryvdh/laravel-debugbar --dev

Laravel maakt gebruik van auto-discovery, het is dus niet nodig om hem handmatig toe te voegen.

Installatie zonder auto-discovery

Als je geen gebruik maakt van de auto-discover functionaliteit, moet je twee regels code aan config/app.php toevoegen om de debugbar correct te installeren.

Voeg de volgende regel toe aan de ServiceProviders.

Barryvdh\Debugbar\ServiceProvider::class,

Als je gebruik wil maken van de Debugbar facade voeg deze dan ook toe.

'Debugbar' => Barryvdh\Debugbar\Facade::class,

Let op: De debugbar zal pas tevoorschijn komen zodra de instelling APP_DEBUG op true staat.

Installatie Lumen

Om de debugbar in het microframe van Laravel genaamd Lumen te gebruiken.
Moet je deze registreren in het betand bootstrap/app.php.

if (env('APP_DEBUG')) {
 $app->register(Barryvdh\Debugbar\LumenServiceProvider::class);
}

Om wijzigingen aan de configuratie te kunnen maken, kopieer het config bestand naar de config directorie en activeer deze.

$app->configure('debugbar');

Kennismaken met de debugbar

Nu je de debugbar hebt geïnstalleerd wordt het tijd te laten zien wat je er allemaal mee kan.

Messages

Debugbar messages

Messages is een aparte sectie binnen de debugbar, hier komen alleen meldingen in te staan die je zelf toevoegt vanuit de code. Dit doe je op de volgende manier.

Debugbar::info($object);
Debugbar::error('Error!');
Debugbar::warning('Watch out…');
Debugbar::addMessage('Another message', 'mylabel');

De berichten bevatten de PSR-3 niveaus (debug, info, warning, error, critical, alert, emergency).

Timeline

De timeline is perfect om te achterhalen welke delen binnen jouw webapplicatie er lang over doen om in te laden. Je kan bijvoorbeelden meten hoelang het duurt om een bepaalde pagina op te bouwen. Zo kom je erachter welke processen er lang over doen en mogelijk geoptimaliseerd moeten worden.

Debugbar timeline
Debugbar::stopMeasure('render');
Debugbar::addMeasure('now', LARAVEL_START, microtime(true));
Debugbar::measure('My long operation', function() {
// Do something…
});

Exceptions

Debugbar exceptions

De volgende tab is een exception logger. Je kan exceptions via de debugbar loggen op de volgende manier:

try {
  throw new Exception('foobar');
} catch (Exception $e) {
  Debugbar::addException($e);
}

Views

Debugbar views

Onder de tab views vind je alle views die worden gebruikt met daarbij de ingeladen variabelen die daaraan hangen. Dit word erg handig op het moment dat je Laravel applicatie groeit, en dus ook het aantal views dat gebruikt wordt. Op deze manier achterhaal je erg snel of de juiste views met daaraan de juiste data word ingeladen.

Route

Debugbar route

Alles met betrekking tot de route vind je op de route tab. Hier vind je bijvoorbeeld om wat voor type request het gaat (GET, POST, PUT, PATCH, DELETE), en welke controller er wordt ingeladen.

Queries

Debugbar queries

Misschien wel een van de belangrijkste tabs die de debugbar kent, de queries tab. Op deze tab vind je alle afgevuurde queries en daarbij de laadtijd die de query nodig had om data terug te geven.

Zo kom je heel snel achter queries waarvan de laadtijd er lang is en je webapplicatie onnodig traag maken.

Folder icon

Debugbar folder icon

Aan de rechterkant van de debugbar vind je een folder icoon. Zodra je hierop klikt krijg je een popup met daarin alle overige requests die worden uitgevoerd bij het laden van je webapplicatie. Denk hierbij bijvoorbeeld aan ajax calls die worden uitgevoerd.

Debugbar documentatie

Zoals je waarschijnlijk al wel door had, heb ik niet alle tabs van de debugbar behandeld. De debugbar kent naast deze tabs nog tal van andere functies.

Als je meer wil leren over wat de debugbar allemaal nog meer kan, lees dan de documentatie.

Kennismaken?

Begin met bouwen

Maak werk van jouw ambities in e-commerce. Plan vrijblijvend een afspraak
in voor eerlijk advies en zet je eerste stap naar groei.

Plan een afspraak 013 - 20 321 13