Xdebugin asentaminen, osa 2: IDE

Nyt kun Xdebug on asennettu paikallisen PHP asennuksen kanssa, on aika kytkeä se IDE:hen. Tämä tarjoaa meille kaikki Xdebugin tarjoamat edut.

Eli se antaa meille mahdollisuuden:

• aseta keskeytyspisteet,
• astu koodimme läpi,
• ja katsella muuttujia

Koko ohjelman suorituksen ajan. Tämä tarkoittaa, että kun sivua renderöidään, voimme asettaa koodikantaamme kohtia, joista voimme nähdä, mitä palvelin tekee koodillamme.

Joten totta kai, vaikka sitä kutsutaan virheenkorjaukseksi virheiden poistamiseksi, se voi myös antaa käsityksen siitä, miten WordPress-pohjainen sovellus, teema tai laajennus toimii, ja auttaa meitä ymmärtämään paremmin WordPressin ydintä.

Xdebugin asentaminen Visual Studio Codessa

Tässä vaiheessa paikalliselle koneellesi pitäisi olla määritetty seuraava ympäristö:

• Valet (joka sisältää Nginxin ja MySQL:n sekä niihin liittyvät työkalut )
• WordPress
• Visual Studio Code
• Xdebug

Kaikkiin yllä oleviin muihin tehtäviin kuuluu Xdebugin yhdistäminen Visual Studio Code -koodiin, jotta saamme kirjaimellisen kuvan siitä, kuinka WordPress (ja siten työmme) toimii, mitä se tekee ja niin edelleen aina, kun se on käynnissä selaimessa.

Tämän sanottuaan aloitetaan.

1 Tarvittavien laajennusten asentaminen

Varmista ensin, että PHP Debug Extension on asennettu Visual Studio Codessa. Etsi IDE:n sivupalkin Extensions-valikosta PHP Debug, ja sinun pitäisi nähdä seuraavanlainen näyttö.

Jos laajennusta ei ole vielä asennettu, asenna se. Sinun on ehkä käynnistettävä Visual Studio Code uudelleen, jotta uusi laajennus tulee voimaan.

Tästä eteenpäin on muutamia lisäasetuksia, jotka meidän on tarkistettava ennen kuin yritämme korjata koodia.

2 Xdebugin määrittäminen (jopa enemmän!)

Muista edellisestä viestistä, että meidän piti sisällyttää Xdebug php.ini – tiedostoomme. Erityisesti meidän oli lisättävä seuraava koodirivi Xdebugin käyttöönottamiseksi:

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

Nyt meidän on tehtävä vähän enemmän työtä.

1. meidän on lisättävä määritysrivi php.ini – tiedostoon, johon viitattiin viimeisessä viestissä ,
2. meidän on määritettävä esittelykomentosarja varmistaaksemme, että siellä on oikea Xdebug-osio,
3. meidän on määritettävä Visual Studio Code

Onneksi kaikki edellä mainitut ovat suhteellisen nopeita tehtäviä. Ensinnäkin tiedostoon lisättävä määritysrivi on seuraava:

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

Aseta seuraavaksi esittelyteksti ja liitä se Valetin kanssa. Voit tehdä tämän helposti luomalla hakemiston työpöydällesi, luomalla jotain, kuten test.php, ja lisäämällä sitten phpinfo(); tiedostoon.

Tämän jälkeen linkitä hakemisto ja käynnistä Valet uudelleen. Satuin nimeämään hakemistoni esimerkin ja pudotin test.php tiedoston hakemistoon.

Jos kaikki on määritetty oikein, sinun pitäisi pystyä lataamaan tiedosto selaimeesi ja nähdä jotain seuraavanlaista:

Ja nyt meidän on määritettävä Xdebug. Joten olettaen, että kaikki edellä mainitut asiat ovat menneet hyvin ja laajennukset on asennettu ja käynnissä oikein, Visual Studio Coden kanssa työskentelyn pitäisi olla helppoa.

Luonnollisesti tarvitsemme demo-skriptin, jota voimme testata, joten olen kirjoittanut jotain, joka on triviaalia, mutta joka antaa sinulle käsityksen siitä, mitä odottaa keskeytyskohtia asetettaessa ja mitä ei.

Käännetään nyt huomiomme IDE:hen. Napsauta Visual Studio Codessa Debug -kuvaketta, joka on Laajennukset -kuvakkeen yläpuolella ja Lähteenhallinta – kuvakkeen alapuolella .

Sivupalkissa aivan ylhäällä huomaat, että siellä on toistopainike. Sen vieressä on avattava luettelo. Siinä voi lukea "Ei konfiguraatiota". Jos näin on, ja oletan sen olevan, sinun on noudatettava tiettyjä vaiheita varmistaaksesi, että virheenkorjaus toimii oikein.

1 Avaa komentosarjan hakemisto

Sinun on varmistettava, että olet komentosarjan hakemistossa Visual Studio Codessa.

Eli ei riitä, että varmistat, että sinulla on vain tiedosto auki. Visual Studio Coden on tiedettävä, mistä hakemistosta työskentelet (koska se luo piilotetun .vscode -hakemiston päähakemistoon).

2 Luo käynnistysasetukset

Oletuskäynnistyskokoonpanon pitäisi toimia heti, mutta se perustuu edelliseen vaiheeseen.

Kun olet avannut hakemiston (minun tapauksessani test.php :n sisältävän hakemiston) Visual Studio Codessa, käynnistä komentopaletti (voit tehdä tämän käyttämällä pikakuvaketta, joka vaihtelee käyttöjärjestelmästä toiseen tai käyttämällä Ohje – valikkoa ja valitse sitten Command Pallete).

Kun se tulee näkyviin, kirjoita > launch.json, ja se antaa sinulle mahdollisuuden tarkastella launch.json – tiedostoa. Pakkauksesta otettuna sen pitäisi näyttää tältä :

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

Tässä vaiheessa Debug – valikossa pitäisi olla jotain Launch Currently Open Script -tyyppistä toistokuvakkeen vieressä. Jos ei, se antaa sinulle mahdollisuuden valita jotain, kuten PHP (koska laajennus on asennettu).

Jos on, valitse tämä vaihtoehto.

3 Aseta rajapisteitä

Nyt on aika nähdä debuggeri toiminnassa. Siirry tässä vaiheessa eteenpäin ja käynnistä selainikkuna testiskriptilläsi.

Omani on yksinkertainen:

Sen jälkeen siirry IDE:hen ja napsauta sitten rivinumeron vasemmalla puolella olevaa vasenta ruutua. Tämä asettaa joitakin keskeytyspisteitä.

Tässä on esimerkki:

Napsauta nyt debuggerin Toista -painiketta. Sinun pitäisi heti huomata tilapalkin muuttuvan oranssiksi ja jotkin virheenkorjaussäätimet (Jatka, Step In, Step Out, Restart ja Stop). Emme ole tällä hetkellä kiinnostuneita näistä, sillä tarkastelemme niitä tarkemmin seuraavassa postauksessa.

Huomaa myös, että vasemmassa ruudussasi on tietoja muuttujista, kelloista ja niin edelleen. Jos olet asettanut keskeytyspisteitä paikallisille muuttujille, huomaat, että $esimerkkiName on korostettuna, mutta todennäköisesti alustamaton.

Napsauta Toista – painiketta uusissa ilmestyneissä säätimissä, ja sen pitäisi siirtyä seuraavaan keskeytyskohtaan.

Rivi on nyt korostettu, ja virheenkorjausruudussa $exampleName saa arvon. Minun tapauksessani tämä on alice.

Voit jatkaa leikkiä tällä niin paljon kuin haluat saada käsityksen siitä, miten debuggeri toimii.

Ensi kerralla Screencasts

Virheenkorjaus on tehokasta, mutta voi olla pelottavaa monella tapaa. Seuraavasta viestistä alkaen aion jakaa joitain näyttölähetyksiä, jotka opastavat:

• virheenkorjausfunktiot ja muuttujat,
• muuttaa arvoja lennossa,
• työskentele virheenkorjauskonsolin kanssa,
• ja enemmän.

Nämä vievät hieman enemmän aikaa, koska ne ovat videoita, joissa kerrotaan kuinka tämä tehdään, mutta hyödyn pitäisi olla suuri.

Jos et ole vielä päässyt tutustumaan tämän sarjan kaikkeen sisältöön, suosittelen sitä lämpimästi.

📣 Huomautus jäseneduista

Huomaa kuitenkin, että ennen seuraavaa näyttölähetyksiä ja tämän sarjan seuraavaa osaa minulla on joitain ilmoituksia tehdä erityisesti sivuston jäsenille, jotka sisältävät alennuksia WordPress-pohjaisista ohjelmistoista.

Kerron siitä lisää ensi viikolla.