Visual Studio Code Debugger: Primer ja Screencast

Aiemmissa viesteissä olen puhunut hieman siitä, miksi oikean debuggerin käyttö verrattuna joihinkin PHP:n sisäisiin lauseisiin on tärkeää. Viimeisessä viestissä jopa käyn läpi, kuinka Xdebug määritetään Visual Studio Codella (ja MAMP Prolla, jos käytät).

Mutta jos et ole koskaan käyttänyt tällaista työkalua ennen, et ole koskaan nähnyt sen toimintaa tai et ole koskaan nähnyt, miksi se on niin tehokas, haluan käsitellä sitä hieman tässä viestissä.

Joten aion käydä läpi tämän tekemisen muutaman määritelmän ja kuvakaappauksen sekä lopussa olevan lyhyen kuvakaappauksen yhteydessä, jotta voin näyttää Visual Studio Coden debuggerin toimivan toiminnassa.

Visual Studio Code Debugger

Olettaen, että sinulla on debuggeri asennettuna; on muutamia termejä, jotka kannattaa oppia. Toki niitä on muitakin, mutta nämä ovat mielestäni avainasemassa:

• Katkaisupisteissä käsketään ohjelmaa pysäyttämään sen suorittaminen. Kun koodi on pysähtynyt tässä vaiheessa, voit tarkastella muuttujia, nähdä, mitä arvoja on tallennettu muistiin ja niin edelleen.
• Kellot ovat koodin muuttujia, joita haluat kirjaimellisesti katsoa, ​​kun ne muuttuvat muuttujien suorittamisen aikana.
• Käynnistä käynnistää debuggerin. Vaikka keskeytyspisteet ja kellot olisivat asetettu, debuggeri ei tee mitään ennen kuin käynnistät sen.
• Step Into on toiminto, joka, kun painat funktiokutsua, vie sinut toimintoon, jota kutsutaan. Joskus tämä on hyödyllistä, esimerkiksi jos haluat nähdä, mitä toiminto tekee; toisinaan se on tarpeetonta, jos välität vain funktion suorittamisesta tai välität vain siitä, mitä se palauttaa.
• Step Over -toiminnon avulla voit ohittaa funktion suorituksen siten, että ohjelman suoritus pysähtyy välittömästi sen jälkeen, kun toiminto, jonka yli olet astunut, on päättynyt.
• Step Out -toimintoa käytetään, kun olet astunut toimintoon, saavuttanut pisteen, jossa olet valmis koodin arvioinnin, ja sitten valmis astumaan takaisin sinne, missä olit asettanut keskeytyskohdan.
• Stop lopettaa debuggerin suorittamisen.

Kuulostaa suhteellisen selkeältä, eikö? Mielestäni tämä on helpoin nähdä käytännössä.

Lisäksi nähdäksesi, mitkä kuvakkeet tekevät mitä, yleensä paras tapa on viedä hiiren osoitin niiden päälle ja lukea sitten työkaluvihjeet. Kuitenkin, kun olet käyttänyt niitä muutaman kerran, tiedät, mitä kukin tekee.

Loppujen lopuksi kuvakkeet ovat melko kuvailevia.

Esimerkki

Olettaen, että olet noudattanut edellisen artikkelin vaiheita, tässä on lyhyt esimerkki siitä, kuinka voit asettaa keskeytyskohdan ja seurata sen suorittamista laajennuksen kautta.

1 Rajapiste

Huomaa alla olevassa kuvassa, että olen sijoittanut keskeytyskohdan koodirivin viereen (kuten punainen piste osoittaa).

Täällä suoritus pysähtyy, kun käynnistän debuggerin ja aloitan ohjelman suorittamisen.

2 Aseta kello

Seuraavaksi muuttujan katsominen tarkoittaa, että haluamme nähdä muuttujan arvon koko ohjelman elinkaaren ajan. Alla lisään kellon $description-muuttujaan.

Seuraavassa osiossa näet kellon arvon sen jälkeen, kun ohjelma on läpäissyt kyseisen koodirivin.

3 Arvioi kello

Kun koodi on ohittanut kyseisen rivin, näet muuttujan arvon  virheenkorjausruudun Watch -osiossa.

Huomaa funktiossa, että woocommerce_wp_text_input kutsuu. Käytämme tätä funktiota esimerkkinä siirtyäksemme funktioon, koska se on osa WooCommercen ydintä.

4 Valmistaudu astumaan sisään

Ennen kuin siirryt funktioon, on tärkeää varmistaa, että funktion nimi on korostettu.

Kun olet valmis, voit napsauttaa Step In -painiketta nähdäksesi, mitä toiminnossa tapahtuu.

5 Astu sisään

Kun astut sisään, näet koodin, jota et kirjoittanut. Sen sijaan se on koodi, joka on osa WooCommercea (ainakin tässä esimerkissä).

Kokemuksesi perusteella näet koodin, jonka ehkä kirjoitit tai jonka joku muu kirjoitti.

6 Astu ulos

Kun olet poistunut koodista, palaat koodiriville heti sen jälkeen, kun astuit koodiin.

Käydä järkeen?

Screencast

Ja lopuksi, tässä on erittäin lyhyt kuvaesitys, jossa käydään läpi, miltä kaikki yllä oleva näyttää toiminnassa:

Kuten videossa mainittiin, tämä ei ole mitenkään kattava, mutta sen pitäisi riittää osoittamaan, kuinka tehokas virheenkorjaus voi olla.

Se vaatii aikoja ja harjoittelua

Virheenkorjaus vie hieman enemmän aikaa kuin muuttujien siirtäminen näytölle.

Enkä sano, etteikö sen tekemisellä olisi paikkaansa; Jos kuitenkin haluat saada syvemmän ymmärryksen siitä, mitä tapahtuu, kun käytät ohjelmaa, tai haluat tutkia esimerkiksi WordPressin ydintä, debuggerin käyttö on todella hyvä tapa tehdä se.

Lisäksi väitän, että debuggerin käyttö voi auttaa ymmärtämään paremmin, mikä on väärin (tai oikein) koodisi yhteydessä, jotta voit luoda sille parhaan mahdollisen ratkaisun.