Selles juhendis näitan sulle, kuidas kasutada Chrome Developer Tools, et juhtida silumise protsessi efektiivselt ja üksikasjalikult. Õpid, kuidas läbi lähtekoodi liikuda järk-järgult ja toetada konkreetseid punkte programmi käigus. Rõhk on sellel, et tutvustada sulle kasulikke otseteid ja funktsioone, mis hõlbustavad silumist ja parandavad sinu töövoogu.
Olulisemad teadmised
- Sa saad kiiresti ja tõhusalt navigeerida suurte koodibaaside vahel, kasutades failiotsingut.
- Sammu-sammu haaval silumist toetavad erinevad otseteed ja funktsioonid, mis lihtsustavad koodi läbimist.
- Asünkroonsete funktsioonide korral on spetsiaalsed mehhanismid, mis selgitavad, milliseid osi koodist täpselt käivitatakse.
Juhend samm-sammult
Alusta silumisega Chrome Developer Tools kasutades järgmisi samme:
Õigete failide leidmiseks saad kasutada klahvikombinatsiooni "Command P" Maci puhul või "Ctrl P" Windowsi puhul. See avab otsinguriba, kuhu saad sisestada otsitava faili nime, mida otsid. Näed kohe, kuidas tulemusi filtreeritakse ja saad soovitud dokumendi märksa kiiremini leida.
Kui otsid konkreetset faili, mille täpset nime sa ei tea, saad sisestada ka osa nimest või otsingusõnu, mis sisaldavad osi failinimest. See võimaldab sul efektiivselt filtreerida, eriti suurtes projektides, kus on palju faile.
Lisaks on Chrome Developer Toolsis klaviatuuri otseteed, mis lihtsustavad lähtekoodi navigeerimist. Need otseteed on väga kasulikud, et koodi järjestikku läbida. Kasuta klahve F8 (jätkamiseks praeguses funktsioonis) ja F10 (järgmise funktsioonikõne jaoks). Sel viisil saad oma silumissessiooni oluliselt kiirendada ja tõhusamaks muuta.
Kui soovid liikuda funktsiooni sisse, vajuta F11. Sellega jõuad otse valitud funktsiooni. Samuti saad funktsioonist välja liikuda, kasutades "Shift F11", mis viib sind ühe astme võrra ülespoole. Need liigutused on olulised konkreetse koodi programmi käigu ja mõjude mõistmiseks.
Kui tegeled asünkroonse koodiga, on olulised kaalutlused, mida peaksid tegema. Asünkroonsete kutsete korral saad eristada klahvide "Step into" (F11) ja "Step over" (F9) vahel, et sukelduda funktsiooni või vaadata, kuidas käivitust üle vaadata.
Silumisprotsessi veelgi efektiivsemaks muutmiseks saad seada ajutisi katkestusi. Hiire parema nupuga klõpsates koodireal vali "Edasi siia" ("Continue to here"). Programm käivitub kuni selle punktini ilma katkestusteta teistel ridadel.
Üks kasulik tööriist Developer Toolsis on võimalus a²tõmmata funktsiooni käivitamine. See tähendab, et vajutades „Restart Frame“ nupule, hüppad tagasi funktsiooni algusesse, muutmata muutujaid. See funktsioon on eriti kasulik, kui soovid funktsiooni käitumist teatud tingimustel korduvalt testida.
Kõik need trikid ja otseteed muudavad silumise lõppkokkuvõttes palju kiiremaks protsessiks. Alati, kui tunned, et silumine ei liigu edasi, kontrolli Developer Toolsi pakutavaid võimalusi. Kui järgid samme, vaata, et sa saad aru otseteedest, et tõhustada oma efektiivsust veelgi.
Kokkuvõte
Selles juhendis oled õppinud, kuidas optimaalselt kasutada Chrome Developer Toolsi, et läbi lihtekoodi navigeerida ja keerulisi silumissituatsioone lahendada. Otseteede ja spetsiifiliste funktsioonide kasutamine võimaldab sul sügavamat kontrolli silumisprotsessi üle, sõltumata sellest, kas töötad sünkroonse või asünkroonse koodiga.
Korduma kippuvad küsimused
Kuidas kiiresti leida fail Chrome Developer Tools'is?Kasuta kiirklahvi „Strg P“ Windowsi puhul või „Command P“ Maci puhul ning sisesta failinime osa.
Mis vahe on F11 ja F9 vahel silumisel?F11 sukeldub funktsiooni sisse, samas kui F9 jätab selle vahele ja läheb otse järgmisesse koodiplokki.
Kuidas seada ajutisi peatamispunkte?Paremklõpsa koodil ja vali „Jätka siit“ programmi käivitamiseks selle kohani.
Mis juhtub „Taaskäivita raamistikus“?Tegevus hüppab funktsiooni algusesse, jätmata praeguseid muutujaid nulli.
Kas saan silumist teha ka ilma peatamispunktideta?Jah, see on võimalik, kasutades jätkamisfunktsioone või juhtides programmiüleminekuid kirjeldatud kiirklahvide abil.
