Installera Xdebug, del 2: IDE

Nu när Xdebug är installerat med din lokala installation av PHP är det dags att koppla upp det till IDE. Detta ger oss alla fördelar som Xdebug har att erbjuda.

Det vill säga, det tillåter oss att:

• ställ in brytpunkter,
• gå igenom vår kod,
• och titta på variabler

Hela tiden som programmet körs. Det betyder att medan en sida renderas kan vi ställa in punkter i vår kodbas där vi kan se vad servern gör med vår kod.

Så visst, även om det kallas felsökning för att ta bort buggar, kan det också ge insikt om hur en WordPress-baserad applikation, tema eller plugin körs och kan hjälpa oss att få en bättre förståelse av WordPress-kärnan.

Installera Xdebug i Visual Studio Code

Vid det här laget bör du ha följande miljö inställd på din lokala dator:

• Betjänad (som inkluderar Nginx och MySQL och relaterade verktyg )
• WordPress
• Visual Studio Code
• Xdebug

De återstående uppgifterna för alla ovanstående involverar att knyta Xdebug till Visual Studio Code så att vi får en bokstavlig representation av hur WordPress (och därmed vårt arbete) presterar, vad det gör och så vidare när det körs i webbläsaren.

Med det sagt, låt oss börja.

1 Installera nödvändiga tillägg

Låt oss först se till att PHP Debug Extension är installerad i Visual Studio Code. Från Extensions-menyn i sidofältet i IDE, sök efter PHP Debug, och du bör se en skärm som följande.

Om tillägget inte redan är installerat, fortsätt och installera det. Du kan behöva starta om Visual Studio Code för att det nya tillägget ska träda i kraft.

Härifrån finns det några ytterligare konfigurationsinställningar som vi måste verifiera innan vi försöker felsöka någon kod.

2 Konfigurera Xdebug (Ännu mer!)

Minns från föregående inlägg att vi behövde inkludera Xdebug i vår php.ini -fil. Specifikt var vi tvungna att lägga till följande kodrad för att aktivera Xdebug:

zend_extension="/usr/local/lib/php/pecl/20160303/xdebug.so"

Nu måste vi jobba lite mer.

1. vi kommer att behöva lägga till en konfigurationsrad till php.ini -filen som refererades till i det senaste inlägget ,
2. vi måste ställa in ett demoskript för att se till att det finns en korrekt Xdebug-sektion,
3. vi måste konfigurera Visual Studio Code

Lyckligtvis är alla ovanstående relativt snabba uppgifter. För det första är konfigurationsraden som du vill lägga till i din fil som följer:

[XDebug]
xdebug.remote_enable = 1
xdebug.remote_autostart = 1

Sedan, ställ in ett demo-skript och koppla upp det med Betjänad. Du kan göra detta enkelt genom att skapa en katalog på ditt skrivbord, skapa något som test.php och sedan lägga till phpinfo(); till filen.

Därefter länkar du katalogen och startar om Valet. Jag råkade namnge mitt katalogexempel och tappade en test.php -fil i katalogen.

Om du tillåter att allt är korrekt konfigurerat bör du kunna ladda filen i din webbläsare och se något i stil med följande:

Och nu måste vi konfigurera Xdebug. Så förutsatt att allt ovan har gått bra och tilläggen är korrekt installerade och körs, borde det vara enkelt att arbeta med Visual Studio Code.

Naturligtvis behöver vi ett demoskript som vi kan testa, så jag har skrivit något som är trivialt men som ger dig en uppfattning om vad du kan förvänta dig när du ställer in brytpunkter och vad som inte.

<?php

// First, set a sample name.
$exampleName = 'alice';
echo $exampleName;

// Next, change the name and display it.
if ('alice' === $exampleName) {
    $exampleName = 'bob';
}
echo $exampleName;

Låt oss nu rikta vår uppmärksamhet mot IDE. I Visual Studio Code klickar du på felsökningsikonen som är precis ovanför tilläggsikonen och strax under ikonen för källkontroll.

I sidofältet högst upp kommer du att märka att det finns en uppspelningsknapp. Bredvid det finns en rullgardinslista. Det kan stå "Ingen konfiguration." Om så är fallet, och jag kommer att anta att det är det, finns det några mycket specifika steg du måste följa för att säkerställa att felsökningen fungerar korrekt.

1 Öppna skriptets katalog

Du kommer att behöva se till att du är i skriptets katalog i Visual Studio Code.

Det vill säga, det räcker inte att se till att du bara har en fil öppen. Visual Studio Code behöver veta från vilken katalog du arbetar (eftersom den skapar en dold .vscode- katalog i den överordnade katalogen).

2 Skapa startkonfigurationen

Standardstartkonfigurationen bör fungera direkt, men den är baserad på föregående steg.

När du har öppnat en katalog (i mitt fall, den som innehåller test.php) i Visual Studio Code, starta kommandopaletten (du kan göra detta via en genväg som varierar från OS till OS eller genom att använda hjälpmenyn och välj sedan Command Pallete).

När den dyker upp anger du > launch.json, så får du möjlighet att visa filen launch.json. Ur lådan ska det se ut så här :

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for XDebug",
            "type": "php",
            "request": "launch",
            "port": 9000
        },
        {
            "name": "Launch currently open script",
            "type": "php",
            "request": "launch",
            "program": "${file}",
            "cwd": "${fileDirname}",
            "port": 9000
        }
    ]
}

Vid denna tidpunkt bör Debug- menyn ha något som Launch Currently Open Script bredvid spelikonen. Om det inte gör det kommer det att ge dig möjlighet att välja något som PHP (eftersom vi har tillägget installerat).

Om så är fallet, välj det alternativet.

3 Ställ in några brytpunkter

Nu är det dags att se felsökaren i aktion. Vid det här laget startar du ett webbläsarfönster med ditt testskript.

Min är enkel:

Efter det, hoppas över till din IDE och klicka sedan på den vänstra rutan till vänster om radnumret. Detta kommer att sätta några brytpunkter.

Här är ett exempel:

Klicka nu på Play -knappen för felsökaren. Omedelbart bör du märka att statusfältet blir orange och några felsökningskontroller (för Fortsätt, stega in, stega ut, starta om och stoppa). Vi är inte intresserade av dessa för tillfället eftersom vi kommer att ta en djupare titt på dessa i nästa inlägg.

Observera också att din vänstra ruta har en del information om variabler, klockor och så vidare. Om du har ställt in brytpunkter för dina lokala variabler, kommer du att märka att $exampleName är markerad men troligen oinitierad.

Klicka på knappen Spela upp i de nya kontrollerna som har dykt upp, så bör den köras till nästa brytpunkt.

Raden kommer nu att markeras och i felsökningsrutan kommer $exampleName att ges ett värde. I mitt fall är detta alice.

Du kan fortsätta leka med detta så mycket du vill för att få en känsla för hur felsökaren fungerar.

Nästa gång, skärmsändningar

Felsökning är kraftfullt, men kan vara skrämmande på många sätt. Från och med nästa inlägg kommer jag att börja dela några screencasts som går igenom hur man:

• felsöka funktioner och variabler,
• ändra värden i farten,
• arbeta med felsökningskonsolen,
• och mer.

Dessa kommer att ta lite mer tid eftersom de kommer att vara videor som beskriver hur man gör detta, men fördelen borde vara stor.

Om du inte har haft en chans att komma ikapp med allt innehåll i den här serien än, rekommenderar jag det starkt.

📣 En anteckning för medlemsförmåner

Observera dock att innan nästa inlägg om skärmsändningar och nästa del av den här serien har jag några tillkännagivanden att göra specifikt för medlemmar på webbplatsen som inkluderar rabatter på WordPress-baserad programvara.

Jag kommer att berätta mer om det nästa vecka.