Šiame vadove išmoksi, kaip derinti JavaScript kodą su Chrome Developer Tools ir kaip nustatyti breakpoint'us. Debuggingas yra viena iš pagrindinių įgūdžių programinei įrangai kurti. Naudojant Developer Tools galėsite analizuoti savo kodo vykdymą, stebėti kintamųjų reikšmes ir rasti klaidas prieš jį naudodami gamyboje.
Naudodami Developer Tools, ypač nustatydami ir naudodami breakpoint'us, galėsite išsamiai stebėti savo programos būseną ir taikyti galingus debuggingo metodus. Eismų palaipsniui pereisime per procesą, kad galėtumėte šias svarbias įgūdžius naudoti savarankiškai.
Svarbiausios išvados
- Chrome Developer Tools teikia išsamias galimybes JavaScript debuggingui.
- Breakpoint'ai padeda sustabdyti kodo vykdymą, kad galėtumėte patikrinti programos būseną.
- Tinkamai naudojant įrankius galite greitai nustatyti ir ištaisyti klaidas.
Palaipsniui vadovas
Žingsnis 1: Prieiga prie Developer Tools
Pirmiausia turite atidaryti Chrome Developer Tools. Tai galite padaryti spustelėdami dešinįjį pelės klavišą ant puslapio ir pasirinkdami „Tirti“ arba naudodami klavišų derinį Ctrl + Shift + I (Windows) arba Cmd + Opt + I (Mac). Tai atvers Developer Tools jūsų naršyklės dešinėje pusėje.
Žingsnis 2: Naviguokite į skirtuką „Sources“
Developer Tools viršuje rasite kelis skirtukus. Spustelėkite skirtuką „Sources“, kad gautumėte prieigą prie jūsų programos skriptų ir struktūros. Čia galėsite peržiūrėti visus įkeltus skriptus ir išteklius, kuriuos jūsų svetainė naudoja.
Žingsnis 3: Pasirinkite bylą, skirtą debuggingui
Straipsnių skirtuke galite pamatyti skriptus, įkeltus iš jūsų puslapio. Ieškokite JavaScript bylos, kurią norite derinti. Įsitikinkite, kad pasirinkote tinkamą bylą, ypač jei yra keli tos pačios bylos versijos, pvz., šaltinių žemėlapiai.
Žingsnis 4: Nustatykite breakpoint'ą
Norėdami nustatyti breakpoint'ą, tiesiog spustelėkite eilės numerį kairėje pusėje nuo kodo, kuriame norite sustabdyti vykdymą. Atsiras mėlynas taškas, nurodantis, kad breakpoint'as sėkmingai nustatytas. Tai padės jums sustabdyti vykdymą šiame taške ir apžiūrėti kintamųjų būseną.
Žingsnis 5: Įkelkite puslapį iš naujo
Norėdami pasiekti breakpoint'ą, įkelkite puslapį iš naujo. Tai galite padaryti paspaudę F5 arba spragtelėję adreso juostoje esantį Atnaujinimo mygtuką. Vykdymas turėtų sustoti tuo taške, kuriame nustatėte breakpoint'ą.
Žingsnis 6: Ištirkite vykdymą
Kai vykdymas sustoja prie jūsų breakpoint'o, galite ištirti savo programos dabartinę būseną. Pusėje dešinėje galite pamatyti kintamųjų reikšmes, iškvietimų steką ir esamą sritį. Ši informacija yra svarbi norint suprasti, kas vyksta jūsų programoje.
Žingsnis 7: Leiskite vykdymą arba ištirkite kintamuosius
Programą galite leisti vykti iki kito breakpoint'o arba eiti eilutėmis. Norėdami tęsti iki kito breakpoint'o, tiesiog spustelėkite „Paleisti“ mygtuką. Jei norite eiti eilutėmis, naudokite „Žingsnių per“ arba „Žingsniuoti į“ norėdami išsaugoti išsamesnį kontrolę.
Žingsnis 8: Pakeiskite kintamųjų reikšmes
Jei norite pakeisti kintamųjų reikšmę, tai galite padaryti tiesiogiai srityje. Spustelėkite kintamąjį, pakeiskite reikšmę ir tada vėl spustelėkite „Paleisti“. Tai padės jums išbandyti, kaip skirtingos reikšmės veikia jūsų programos elgseną.
Žingsnis 9: Pašalinkite breakpoint'us, jei reikia
Jei daugiau nebejaučiate reikalo naudoti breakpoint'ų arba norite juos visus iš karto pašalinti, tiesiog spustelėkite dešiniu pelės klavišu ant eilutės numerio ir pasirinkite „Pašalinti breakpoint'ą“. Alternatyviai galite visus breakpoint'us pašalinti iš karto, jei esate juos nustatę daug.
Žingsnis 10: Naudokite skambučių steką ir derinimo parinktis
Naudokite skambučių steką, kad pamatytumėte, iš kur buvo iškviesta dabartinė funkcija. Tai padės jums atsekti programos vykdymo kelią. „Chrome Developer Tools“ taip pat siūlo daug naudingų funkcijų, tokių kaip „Sustabdyti išimčių atveju“, kuris padeda identifikuoti klaidas ir suteikia išsamias žinias apie problemas.
Santrauka
Šioje instrukcijoje sužinosite, kaip efektyviai naudoti „Chrome Developer Tools“ JavaScript derinimui. Procesą sudaro stabdymo taškų nustatymas, kintamųjų ir skambučių steko tyrimas, taip pat kintamųjų keitimas vykdymo metu. Turėdami šias įgūdžius, gerai pasiruošę identifikuoti ir ištaisyti klaidas.
Daugiausiai užduodamų klausimų
Kaip nustatyti stabdymo tašką savo JavaScript byloje?Paspauskite tiesiog ant eilutės numerio norimoje jūsų kodo vietoje.
Ką daryti, jei mano stabdymo taškas nesuveikia?Patikrinkite, ar failas, kuriame nustatytas stabdymo taškas, iš tikrųjų įkrautas, ir įsitikinkite, kad įkraunant nėra perrašomų kintamųjų
Kaip visiems stabdymo taškams iš karto pašalinti?Dešiniuoju pelės mygtuku spustelėkite stabdymo taško eilutės numerį ir pasirinkite „Išimti visus stabdymo taškus“.
Kas yra skambučių stekas?Skambučių stekas parodymas jūsų funkcijų skaičiavimo susijungimą, leidžiant jums pamatyti, kur buvo iškviesta jūsų funkcija
Kaip pakeisti kintamojo reikšmę derinimo metu?Pelės spustelėkite kintamąjį srities srityje, pakeiskite reikšmę ir tada spustelėkite „Paleisti“, kad tęstumėte vykdymą su nauja reikšme.
