Šiame vadove norėčiau jus supažindinti su pagrindinėmis " Chrome" programuotojo įrankių konsolės funkcijomis. Konsolė yra galinga programuotojams skirta priemonė, leidžianti vykdyti "JavaScript" kodą , peržiūrėti žurnalo pranešimus ir stebėti klaidas. Jei pradedate kurti žiniatinklio programas arba jau turite patirties, ši konsolės apžvalga padės jums dirbti efektyviau ir produktyviau.
Pagrindinės žinios
- Konsolė yra universali priemonė, skirta "JavaScript" kodui vykdyti ir žurnalo išvestims bei klaidoms rodyti.
- Galite naudoti įvairių tipų išvestis, pavyzdžiui, console.log(), console.error() ir console.warn().
- Filtravimas ir konsolėje rodomos informacijos kontrolė yra labai svarbūs, kad būtų galima viską sekti.
- Galite tiesiogiai dirbti pertraukos taškų kontekste ir, šalindami problemas, pasiekti kintamuosius bei jų reikšmes.
Žingsnis po žingsnio vadovas
Norėdami dirbti su "Chrome Developer Tools" konsole, atlikite šiuos veiksmus:
Pirmą kartą naudodami konsolę turėtumėte žinoti, kaip ją pasiekti. Konsolę galite atidaryti spustelėję skirtuką "Console" arba pasinaudoję sparčiuoju klavišu "Escape". Konsolę taip pat galite atidaryti naudodami meniu punktą "Rodyti konsolės stalčių". Tai parodo konsolę ekrano apačioje.
Atidarę konsolę galite atlikti pirmuosius žurnalo išvedimus. Norėdami rodyti pranešimus konsolėje, naudokite console.log(). Galite perduoti tiek parametrų, kiek norite, ir jie bus atitinkamai suformatuoti.
Kita naudinga konsolės komanda yra užbaigimas. Kai ką nors įvedate, galite tiesiog paspausti klavišą Tab ir gauti pasiūlymų. Tai taikoma ne tik funkcijai console.log(), bet ir kitoms funkcijoms, pavyzdžiui, console.error() arba console.warn().
Naudodami console.error() galite sukurti raudonu šriftu rodomus klaidų pranešimus. Tai padeda greičiau nustatyti kodo problemas. Naudodami console.warn() taip pat galite išvesti įspėjimus, kurie rodomi geltonu šriftu.
Jei esate sukūrę daug žurnalo įrašų, jie greitai gali tapti painūs. Todėl konsolėje yra galimybė filtruoti rodomus žurnalo lygius. Galite pritaikyti rodymą taip, kad būtų rodomos tik klaidos, įspėjimai arba informacija. Pavyzdžiui, nustatykite filtrą "Error" (klaida), kad matytumėte tik klaidų pranešimus.
Įsitikinkite, kad gamybiniame kode kuo mažiau naudojate console.log() ir panašias funkcijas. Svarbu, kad didelis žurnalo išvedimų skaičius neturėtų įtakos jūsų programos našumui. Tačiau kuriant naudinga pašalinti klaidas.
Naudinga konsolės funkcija yra galimybė tiesiogiai vykdyti "JavaScript" kodą. Jei kode nustatysite pertraukos tašką, galite naudoti esamą konsolės kontekstą kintamiesiems rodyti arba operacijoms atlikti. Konsolėje galite lengvai įvesti kintamuosius, pavyzdžiui, masyvą, ir rodyti jų turinį.
Dar viena pavyzdinė konsolės funkcija - galimybė vykdyti kelių eilučių kodo fragmentus. Pavyzdžiui, jei norite sukurti funkciją setTimeout(), galite tai padaryti. Įrašykite savo kodą, tada paspauskite "Return" ir stebėkite vykdymą konsolėje.
Stebėti kintamuosius, kai naršote po kodą, naudojant "DevTools" ypač intuityvu. Pasiekę pertraukos tašką, konsolėje galite pateikti užklausą kintamiesiems ir peržiūrėti jų vertes, todėl daug lengviau pašalinti trikdžius.
Jei programoje yra keli rėmai arba iRėmeliai, per konsolę galite pasirinkti kontekstą ir dirbti su įvairiais lango objektais. Tai reiškia, kad galite efektyviai dirbti ir sudėtingose skaičių sistemose.
Konsolėje siūlomi įvairūs sąveikos su DOM metodai. Pristatę pagrindines parinktis, galite tęsti darbą šiomis papildomomis komandomis, kad darbas būtų dar efektyvesnis.
Apibendrinimas
Šiame vadove apžvelgtos svarbiausios "Chrome Developer Tools" konsolės funkcijos. Dabar jau žinote, kaip generuoti žurnalo išvestis, kaip filtruoti skirtingus žurnalo lygius ir kaip tiesiogiai vykdyti "JavaScript" kodą. Naudokitės šiomis funkcijomis, kad optimizuotumėte kūrimo darbą ir efektyviai taisytumėte klaidas.
Dažniausiai užduodami klausimai
Kaip atidaryti konsolę? Konsolę galite atidaryti naudodamiesi skirtuku "Console" arba sparčiuoju klavišu "Escape".
Kuo skiriasi console.log() ir console.error()?console.log() rodo bendrą žurnalo išvestį, o console.error() raudonai rodo klaidų pranešimus.
Kaip galima filtruoti žurnalo lygius konsolėje? Filtravimo parinktyse galite pritaikyti žurnalo lygius, kad būtų rodomi tik tam tikri išvesties tipai.
Ar konsolėje taip pat galiu vykdyti kelių eilučių kodą?Taip, konsolėje galite rašyti ir vykdyti kelių eilučių kodą, naudodami atitinkamus skliaustelius ir spausdami "Return".
Į ką turėčiau atsižvelgti gamykliniame kode, susijusiame su konsole? Gamykliniame kode turėtumėte kuo mažiau naudoti console.log() ir panašias funkcijas, kad išlaikytumėte našumą.
