Kuidas kasutada Chrome'i arendajate tööriistu tõhusalt (õpetus)

Kohtupunktid Chrome'i arendajate tööriistades tõhusalt kasutada

Kõik õpetuse videod Chrome'i arendaja tööriistadega tõhusalt töötamine (õpetus)

Debugimistööriistad on kriitilise tähtsusega selleks, et analüüsida koodi ja tuvastada vigu. Chrome'i arendajatööriistad pakuvad mitmeid funktsioone, mis aitavad sul jälgida võrgupäringuid ja mõista, kuidas sinu rakendus serveriga suhtleb. Selles juhendis keskendume Fetch-Breakpoint'idele, mis võimaldavad sul peatada koodi igal võrgupäringul. See võimaldab sul saada sügavamat arusaama oma rakenduse tööpõhimõtetest ja lahendada võimalikke probleeme kiiresti.

Olulisemad järeldused

  • Fetch-Breakpoint'ide abil saate peatada koodi iga võrgupäringu korral.
  • Te saate määrata konkreetseid URL-e, et käitumist suunata.
  • Arendajatööriistade võrguosas saate jälgida, milliseid päringuid on tehtud ja kes need käivitas.

Juhiste samm-sammult järgimine

1. Juurdepääs arendajatööriistadele

Fetch-Breakpoint'idega töötamiseks peate avama Chrome'i arendajatööriistad. Saate seda teha, klõpsates Chrome'i ülemises parempoolses nurgas oleval kolme punkti menüül, seejärel valige „Muud tööriistad“ ja lõpuks „Arendajatööriistad“. Alternatiivselt saate kasutada Windows'is klahvikombinatsiooni Ctrl + Shift + I või Mac'is klahvikombinatsiooni Cmd + Option + I.

Hankige murdepunktide kasutamine Chrome'i arendaja tööriistades tõhusalt

2. Navigeerimine lähtekoodide juurde

Arendajatööriistadest leiate vahekaardid "Elemendid", "Konsool", "Lähtekoodid", "Võrk" ja palju muud. Peate nüüd klõpsama vahekaardil "Lähtekoodid", et pääseda oma projekti lähteallikale. Siin saate vaadata oma JavaScripti koodi ja seada breakpoint'e.

3. Fetch-Breakpoint'i seadistamine

"Lähtekoodid" vahekaardil on sektsioon „XHR“ või „Fetch-Breakpoint'id“. Uue Fetch-Breakpoint'i seadmiseks klõpsake vastavat nuppu, et lisada uus breakpoint. Teil palutakse sisestada URL või URL-i osa, et breakpoint oleks spetsiifiline. Kui aga midagi ei sisesta, aktiveeritakse breakpoint kõigi läbiviidavate Fetch-päringute jaoks.

4. Breakpoint'i käivitamine

Fetch-Breakpoint'i õigsuse kontrollimiseks tehke toiming, mis käivitab Fetch-päringu - näiteks klõpsake nupul, mis teostab andmepäringu. Kui breakpoint töötab õigesti, peatub kood selles kohas ja näitab teile koodi praegust olekut.

Kasuta Chrome'i arendaja tööriistades tõhusalt laadimispunktide paigutusi

5. Võrgupäringu kontrollimine

Kui kood on peatatud, saate vaadata muutujate praegust olekut ja analüüsida võrgupäringut. Siin saate kontrollida, kas oodatud andmeid on saadud. Näiteks kui jälgite oma koodis muutujat, mis käivitab Fetch-päringu, saate kontrollida, kas õige sihtkoht on saavutatud.

Kasuta Chrome'i arendajate tööriistades silmapaiste-punkte tõhusalt

6. Konkreetsete breakpoint'ide seadistamine

Kui olete huvitatud ainult teatud Fetch-päringutest, saate lisada uue breakpoint'i ja määrata konkreetse URL-i. Näiteks võiksite seada URL-i „main.js“. Seejärel, kui käivitate Fetch-päringu sellele URL-ile, peaks breakpoint käivituma. Kui URL-i ei sisestata, kehtib breakpoint kõigi võrgupäringute kohta, mis on kasulik üldiste probleemide uurimisel.

7. Algataja kontrollimine

Fetch-päringu põhjuste kohta rohkem teabe saamiseks saate liikuda arendajatööriistade „Võrk“ vahekaardile. Sealt näete kõiki tehtud Fetch-päringuid. „Käivitaja“ veerg näitab teile, milline teie koodi osa tegi päringu. Kui klõpsate mõnel neist kirjetest, viiakse teid vastavasse reale „Lähtekoodid“ vahekaardil.

Kasuta Chrome'i arendajate tööriistades tõhusalt toomiskatkestusi

8. Viimased kontrollid

Kui teete kohandusi oma koodis, näiteks muudate URL-i, veenduge, et laadiksite arendajatööriistad uuesti, et muudatused jõustuksid. Seda saate teha väga lihtsalt, värskendades lehte. Seejärel kontrollige, kas Fetch-päring toimib uuesti edukalt ja kas breakpoint käivitub õigesti.

Chrome'i arendajate tööriistades tõhusalt kasutage punkt-peatusi

Kokkuvõte

Selles juhendis õppisid, kuidas kasutada Fetch-murd-punkte Chrome'i arendaja tööriistades, et peatada võrgupäringute ajal koodi. Sa said teada, kuidas luua spetsiifilisi murdpunkte, et peatuda ainult teatud kohtades oma koodis, millist infot sa saad arendaja tööriistadest lugeda ning kuidas jälgida, kes käivitas Fetch-päringu.

Korduma kippuvad küsimused

Mis on Fetch-murd-punktid?Fetch-murd-punktid võimaldavad teil koodi peatada konkreetses kohas, kui saadetakse päring serverile.

Kuidas ma seadistan Fetch-murd-punkti?Saate seadistada Fetch-murd-punkti Chrome'i arendaja tööriistade vahekaardil „Allikad“, sisestades URL-i või üldise seade kõigile Fetch-päringutele.

Kuidas kontrollida, kas minu Fetch-murd-punkt toimib?Seda saate testida, käivitades tegevuse, mis käivitab Fetch-päringu. Vealik peaks peatuma, kui murdpunkt on aktiivne.

Mida teha, kui murdpunkte ei käivitata?Veenduge, et URL on õigesti sisestatud ja et kood, mis käivitab Fetch-päringu, jõuab tegelikult kohale. Ka lehe värskendamine võib aidata.

Kuidas näen Fetch-päringu algatajat?Algataja saate vaadata arendaja tööriistade vahekaardil „Võrk“. Seal näidatakse teile, milline osa teie koodist põhjustas päringu.