Xdebugi installimine, 2. osa: IDE

Nüüd, kui Xdebug on installitud teie kohaliku PHP installiga, on aeg ühendada see IDE-ga. See annab meile kõik eelised, mida Xdebugil on pakkuda.

See tähendab, et see võimaldab meil:

• seadke murdepunktid,
• astuge läbi meie koodi,
• ja vaadata muutujaid

Kogu selle aja, kui programm töötab. See tähendab, et lehe renderdamise ajal saame määrata oma koodibaasi punktid, kust näeme, mida server meie koodiga teeb.

Seega, kuigi seda nimetatakse vigade eemaldamiseks silumiseks, võib see anda ka ülevaate WordPressi-põhise rakenduse, teema või pistikprogrammi tööpõhimõttest ja aitab meil WordPressi tuumast paremini aru saada.

Xdebugi installimine Visual Studio Code’is

Sel hetkel peaks teie kohalikus masinas olema seadistatud järgmine keskkond:

• Valet (mis sisaldab Nginxi ja MySQL-i ning nendega seotud tööriistu )
• WordPress
• Visual Studio kood
• Xdebug

Ülejäänud ülesanded kõigi ülalnimetatute jaoks hõlmavad Xdebugi sidumist Visual Studio koodiga, et saaksime sõna otseses mõttes, kuidas WordPress (ja seega ka meie töö) toimib, mida see teeb ja nii edasi, kui see brauseris töötab.

Seda öeldes alustame.

1 Vajalike laienduste installimine

Esmalt veendume, et PHP silumislaiendus on Visual Studio Code’i installitud. IDE külgribal asuvast menüüst Laiendused otsige PHP Debug ja peaksite nägema järgmist ekraani.

Kui laiendus pole veel installitud, installige see. Uue laienduse jõustumiseks peate võib-olla taaskäivitama Visual Studio Code.

Siin on mõned täiendavad konfiguratsiooniseaded, mida peame enne mis tahes koodi silumist kontrollima.

2 Xdebugi seadistamine (veelgi rohkem!)

Tuletame meelde eelmisest postitusest, mille kohaselt pidime Xdebugi oma php.ini faili kaasama. Täpsemalt pidime Xdebugi lubamiseks lisama järgmise koodirea:

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

Nüüd peame natuke rohkem tööd tegema.

1. peame lisama konfiguratsioonirea faili php.ini, millele viidati viimases postituses ,
2. peame seadistama demoskripti, et veenduda õige Xdebugi jaotise olemasolus,
3. peame konfigureerima Visual Studio koodi

Õnneks on kõik ülaltoodud suhteliselt kiired ülesanded. Esiteks, konfiguratsioonirida, mille soovite oma failile lisada, on järgmine:

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

Järgmisena seadistage demoskript ja ühendage see Valetiga. Seda saab teha lihtsalt, luues oma töölauale kataloogi, luues midagi nagu test.php ja seejärel lisades phpinfo(); faili juurde.

Pärast seda linkige kataloog ja taaskäivitage Valet. Juhtusin nimetama oma kataloogi näidet ja viskasin kataloogi test.php faili.

Kui kõik on õigesti konfigureeritud, peaksite saama faili brauseris laadida ja nägema midagi sellist:

Ja nüüd peame Xdebugi konfigureerima. Seega eeldades, et kõik eelnev on läinud hästi ja laiendused on korralikult installitud ja töötavad, peaks Visual Studio Code’iga töötamine olema lihtne.

Loomulikult vajame demoskripti, mida saaksime testida, nii et kirjutasin üles midagi, mis on triviaalne, kuid mis annab teile aimu, mida murdepunktide määramisel oodata ja mida mitte.

<?php

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

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

Nüüd pöörame tähelepanu IDE-le. Klõpsake Visual Studio Code’is ikooni Silumine, mis asub laienduste ikooni kohal ja allika juhtimise ikooni all.

Märkate ülaosas külgribal, et seal on esitusnupp. Selle kõrval on rippmenüü. Sellel võib olla tekst "Seadistus puudub". Kui see nii on ja ma eeldan, et see nii on, peate järgima mõnda väga konkreetset sammu, et tagada silumise korrektne toimimine.

1 Avage skripti kataloog

Peate veenduma, et olete Visual Studio Code’is skripti kataloogis.

See tähendab, et sellest ei piisa, kui veenduda, et fail on avatud. Visual Studio Code peab teadma, millisest kataloogist te töötate (kuna loob ülemkataloogis peidetud .vscode kataloogi).

2 Looge käivitamise konfiguratsioon

Käivitamise vaikekonfiguratsioon peaks töötama juba karbist välja, kuid see põhineb eelmisel etapil.

Kui olete Visual Studio Code’is kataloogi (minu puhul selle, mis sisaldab test.php) avanud, käivitage käsupalett (saate seda teha otsetee kaudu, mis erineb operatsioonisüsteemiti või kasutades menüüd Abi ja seejärel valige Command Pallete).

Kui see kuvatakse, sisestage > launch.json ja see annab teile võimaluse vaadata faili launch.json. Karbist välja võttes peaks see välja nägema selline :

{
    // 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
        }
    ]
}

Sel hetkel peaks silumismenüüs esitusikooni kõrval olema midagi sellist nagu Käivita praegu avatud skript. Kui ei, siis annab see teile võimaluse valida midagi, näiteks PHP (kuna meil on laiendus installitud).

Kui jah, siis valige see valik.

3 Määrake murdepunktid

Nüüd on aeg näha silurit töös. Siinkohal minge edasi ja käivitage oma testskriptiga brauseriaken.

Minu oma on lihtne:

Pärast seda lootke oma IDE-le ja klõpsake reanumbrist vasakul asuval vasakpoolsel paanil. See määrab mõned murdepunktid.

Siin on näide:

Nüüd klõpsake siluri jaoks nuppu Esita . Peaksite kohe märkama, et olekuriba muutub oranžiks ja mõned silumisjuhtelemendid (Jätka, Astu sisse, Astu välja, Taaskäivita ja Peata). Meid need hetkel ei huvita, sest vaatleme neid järgmises postituses põhjalikumalt.

Pange tähele ka seda, et teie vasakpoolsel paanil on teavet muutujate, kellade ja muu kohta. Kui olete oma kohalikele muutujatele määranud katkestuspunktid, märkate, et $exampleName on esile tõstetud, kuid tõenäoliselt initsialiseerimata.

Klõpsake uutes ilmunud juhtelementides nuppu Esita ja see peaks kulgema järgmise katkestuspunktini.

Rida tõstetakse nüüd esile ja silumispaanil antakse väärtusele $exampleName väärtus. Minu puhul on see Alice.

Saate sellega edasi mängida nii palju kui soovite, et siluri toimimisest aimu saada.

Järgmine kord, ekraanisaated

Silumine on võimas, kuid võib olla mitmel viisil hirmutav. Alates järgmisest postitusest hakkan jagama mõnda ekraaniülekannet, mis kirjeldavad, kuidas:

• silumisfunktsioonid ja muutujad,
• muuta väärtusi lennult,
• töötada silumiskonsooliga,
• ja veel.

Need võtavad natuke rohkem aega, sest need on videod, mis kirjeldavad, kuidas seda teha, kuid kasu peaks olema suur.

Kui teil pole veel olnud võimalust selle sarja kogu sisuga tutvuda, soovitan seda soojalt.

📣 Märkus liikmehüvede kohta

Pange tähele, et enne järgmist postitust ekraaniülekannete ja selle seeria järgmise osa kohta on mul mõned spetsiaalselt saidi liikmetele mõeldud teadaanded, mis sisaldavad allahindlusi WordPressi-põhisele tarkvarale.

Ma räägin sellest lähemalt järgmisel nädalal.