Šajā norādījumā es vēlos tuvināt pamata funkcijas konsolē Chrome Developer Tools. Konsole ir spēcīgs programmētāja rīks, kas ļauj tev izpildīt JavaScript kodu, parādīt žurnāla ziņojumus un uzraudzīt kļūdas. Sākot vai jau būdams pieredzējis web lietotņu izstrādātājs, šis konsoles pārskats palīdzēs tev efektīvāk un produktīvāk strādāt.
Svarīgākie secinājumi
- Konsolē ir daudzfunkcionāls rīks JavaScript izpildei, kā arī žurnāla un kļūdu rādīšanai.
- Tu vari izmantot dažādus ziņojumu veidus, piemēram, console.log(), console.error() un console.warn().
- Filtrēt un kontrolēt, ko parāda konsolē, ir svarīgi, lai saglabātu pārskatu.
- Tu vari strādāt tieši ar iezemējumu kontekstos un atkārtoti piekļūt mainīgajiem un to vērtībām kļūdu meklēšanai.
Pēc soļiem norādījumi
Lai strādātu ar Chrome Developer Tools konsoli, sekot šiem soļiem:
Kad atveri konsoli pirmo reizi, svarīgi zināt, kā piekļūt tai. Tu vari atvērt konsoli, noklikšķinot uz cilnes "Konsole" vai izmantojot saīsni "Escape". Alternatīvi, tu vari atvērt konsoli caur izvēlnes punktu "Rādīt konsoles sortimentu". Tas parādīs konsoli apakšējā ekrāna malā.
Pēc konsoles atvēršanas vari veikt pirmos žurnāla ierakstus. Izmanto console.log(), lai parādītu ziņojumus konsolē. Tu vari nodot jebkuru skaitu parametru, un tie tiks attiecīgi formatēti.
Viens noderīgs cienīt konsolē ir automātiska pilnveides funkcija. Kad tu raksti kaut ko, vienkārši nospied taustiņu Tab, lai iegūtu ieteikumus. Tas attiecas ne tikai uz console.log(), bet arī uz citām funkcijām, piemēram, console.error() vai console.warn().
Ar console.error() vari izveidot kļūdu ziņojumus, kas parādās sarkanā krāsā. Tas palīdz identificēt problēmas tavi kodā ātrāk. Tāpat arī vari parādīt brīdinājumus, izmantojot console.warn(), kas parādās dzeltenā krāsā.
Kad esi izveidojis daudz žurnāla ierakstu, var kļūt neapskaužami. Tāpēc konsole piedāvā iespēju filtrēt rādītos žurnāla līmeņus. Tu vari pielāgot rādīšanu, lai redzētu tikai kļūdas, brīdinājumus vai informāciju. Iestatiet filtru, piemēram, uz "Kļūda", lai redzētu tikai kļūdu ziņojumus.
Rūpējies, lai console.log() un līdzīgas funkcijas radoši tiek minimizētas produkcionālajā kodā. Svarīgi, lai žurnāla ierakstu apjoms neietekmētu lietojumprogrammas veiktspēju. Taču izstrādes laikā tas ir noderīgi, lai novērstu kļūdas.
Viens no noderīgākajiem konsoles elementiem ir iespēja tieši izpildīt JavaScript kodu. Ja iestata izpildes punktu kodā, vari izmantot esošo kontekstu konsolei, lai parādītu mainīgos vai veiktu darbības. Tu vari ļoti viegli ievadīt mainīgos, piemēram, masīvu konsolei un rādīt to saturu.
Vēl viens konsoles uzplaukums ir spēja izpildīt vairāklīnijas kodu fragmentus. Ja, piemēram, vēlies izveidot funkciju ar setTimeout(), to vari izdarīt. Ieraksti savu kodu, nospied pēc tam "Return" un novēro izpildi konsoļu.
Mainīgo uzraudzība, pārvietojoties pa kodu, ir īpaši intuītīva ar DevTools. Kad esi sasniedzis izpildes punktu, vari pārbaudīt mainīgos konsolei un redzēt to vērtības, kas ievērojami atvieglo kļūdu atklāšanu.
Jebkuram IFrame lietojumprogrammās tu vari atlasīt kontekstu caur konsoli un strādāt ar variantiem Window objektiem. Tas ļauj efektīvi strādāt arī sarežģītos skaitļu sistēmos.
Konzole piedāvā dažādas metodes DOM interakcijai. Pēc pamata iespēju iepazīšanas vari turpināt darbu ar šiem papildu komandiem, lai padarītu savu darbu vēl efektīvāku.
Kopsavilkums
Šajā instrukcijā esi ieguvis pārskatu par galvenajām Chrome Developer Tools Konsoles funkcijām. Tagad zini, kā radīt žurnāla izvades, kā filtrēt dažādos žurnāla līmeņus un kā tieši izpildīt JavaScript kodu. Izmanto šīs funkcijas, lai optimizētu savu attīstības darbu un efektīvi novērstu kļūdas.
Bieži uzdotie jautājumi
Kā es varu atvērt konsoles logu?Tu vari atvērt konsoles logu, noklikšķinot uz cilnes "Console" vai arī izmantojot īsceļu "Escape".
Kāda ir atšķirība starp console.log() un console.error()?console.log() parāda vispārīgas izvades, kamēr console.error() parāda kļūdu paziņojumus sarkanā krāsā.
Kā es varu filtrēt žurnāla līmeņus konsoļu?Tu vari pielāgot žurnāla līmeņus filtrēšanas opcijās, lai redzētu tikai konkrētas veidu izvades.
Vai es varu izpildīt arī vairāku rindkopu kodu konsoļu?Jā, tu vari rakstīt un izpildīt vairāku rindkopu kodu konsoļu, izmantojot attiecīgās iezīmes un nospiežot "Enter".
Ko es varu ņemt vērā ražošanas kodā attiecībā uz konsoļu?Ražošanas kodā tev vajadzētu minimizēt console.log() un līdzīgu funkciju izmantošanu, lai saglabātu veiktspēju.
