Selles juhendis tahan tutvustada sulle põhifunktsioone Chrome'i Arendaja Tööriistades. Konsool on võimas tööriist arendajatele, mis võimaldab sul käivitada JavaScript koodi, kuvada logisõnumeid ja jälgida vigu. Olles algaja veebirakenduste arendamisel või omades juba kogemusi, aitab see ülevaade konsoolist sul töötada tõhusamalt ja produktiivsemalt.
Kõige olulisemad järeldused
- Konsool on mitmekülgne tööriist JavaScript koodi käivitamiseks, logisõnumite ja vigade kuvamiseks.
- Saad kasutada erinevaid väljundi tüüpe, nagu console.log(), console.error() ja console.warn().
- Filtreerimine ja kontroll, mida konsoolis kuvatakse, on oluline ülevaate säilitamiseks.
- Saad otse breakpointide kontekstis töötada ja vigade otsimisel muutujatele ja nende väärtustele ligi pääseda.
Juhend samm-sammult
Chrome'i Arendaja Tööriistade konsooliga töötamiseks järgi neid samme:
Konsooli esmakordsel kasutamisel peaksid teadma, kuidas sinna juurde pääseda. Konsooli saad avada, klõpsates vahekaardil "Konsool" või kasutades otseteed "Escape". Võid konsooli avada ka menüüpunkti "Kuva konsoolisahtel" kaudu. See kuvab konsooli ekraani allservas.
Kui konsool on avatud, saad teha esimesi logisõnumeid. Kasuta console.log(), et kuvada sõnumeid konsoolis. Võid edastada suvalise arvu parameetreid ja need kuvatakse vastavalt vormindatult.
Veel üks kasulik käsk konsoolis on autotäitmine. Kui midagi kirjutad, saad vajutada lihtsalt tabulaatorit, et saada ettepanekuid. See kehtib mitte ainult console.log() puhul, vaid ka teiste funktsioonide, nagu console.error() või console.warn() puhul.
Kasutades console.error(), saad luua veateateid, mis ilmuvad punase kirjaga. See aitab sul oma koodis probleeme kiiremini tuvastada. Samuti võid lasta hoiatusi väljastada console.warn() abil, mis kuvatakse kollase kirjaga.
Kui oled loonud palju logimise kirjeid, võib see kiiresti segaseks muutuda. Seetõttu võimaldab konsool filtreerida kuvatavaid logitasemeid. Saad kuvamist kohandada nii, et näed ainult vigu, hoiatusi või teavet. Näiteks määra filter "Viga", et näha ainult veateateid.
Pea meeles, et console.log() ja sarnaste funktsioonide kasutamine produktsioonikoodis peaks olema võimalikult minimaalne. On oluline, et logimise väljundite rohkus ei mõjutaks sinu rakenduse jõudlust. Arenduse käigus on see aga abiks vigade parandamisel.
Konsooli üks kasulik funktsioon on võime otse JavaScripti koodi käivitada. Kui oled koodis määranud breakpoint'i, saad konsoolis kasutada hetkeolukorda muutujate kuvamiseks või toimingute sooritamiseks. Saad kergesti sisestada muutujad nagu massiiv konsooli ja kuvada nende sisu.
Veel üks konsooli tugev omadus on võime käivitada mitmeid realisi koodilõike. Kui soovid näiteks funktsiooni setTimeout() luua, võid seda teha. Kirjuta oma kood sisse, vajuta seejärel "Enter" ja jälgi koodi täitmist konsoolis.
Muutujate jälgimine, samal ajal kui navigeerid koodis, on DevToolside abil eriti intuitiivne. Kui jõuad breakpoint'i, saad konsoolis pärida muutujaid ja vaadata nende väärtusi, mis oluliselt hõlbustab vigade leidmist.
Kui sinu rakenduses on mitu raami või iFrame'i, saad konsooli abil valida konteksti ja töötada erinevate aknaobjektidega. See võimaldab sul efektiivselt töötada ka keerukates numbrite süsteemides.
Konsool pakub mitmeid meetodeid DOM-iga suhtlemiseks. Pärast põhivõimaluste tutvustamist saate jätkata nende täiendavate käsudega, et muuta oma töö veelgi efektiivsemaks.
Kokkuvõte
Selles juhendis saite ülevaate Chrome'i arendajate tööriistade konsooli põhifunktsioonidest. Nüüd teate, kuidas genereerida logiväljundeid, kuidas filtreerida erinevaid logi tasemeid ning kuidas saate otse JavaScripti koodi käivitada. Kasutage neid funktsioone, et optimeerida oma arendustööd ja vigu tõhusalt parandada.
Sagedased küsimused
Kuidas ma saan konsooli avada?Konsooli saab avada vahekaardil "Konsool" või kiirklahvi "Escape" abil.
Mis vahe on console.log() ja console.error() vahel?console.log() kuvab üldised logiväljundid, samas kui console.error() kuvab vead punase tekstina.
Kuidas saan konsoolis logi tasemeid filtreerida?Saad logi tasemeid kohandada filtri valikutes, et kuvada ainult teatud tüüpi väljundeid.
Kas ma saan konsoolis käivitada mitmerealist koodi?Jah, saad kirjutada mitmerealist koodi konsooli ja käivitada seda, kasutades vastavaid sulge ning vajutades "Enter".
Mida peaksin arvestama konsooli kasutamisel tootmiskoodis?Tootmiskoodis peaksid vältima console.log() ja sarnaste funktsioonide kasutamist, et säilitada tõhusust.
