Komandējot Javascript konsoli

Komandējot Javascript konsoli

Noderīgi triki atkļūdošanai, formatēšanai un efektivitātei

Konsole ir viens no pirmajiem rīkiem, par kuriem izstrādātāji uzzina. Konsole ir rīks, ko izstrādātāji izmanto, atkļūdojot savas lietojumprogrammas. Instrumenta likums nosaka, ka pārmērīgu pašpārliecinātību pazīstamā rīkā ir viegli attīstīt.

"Es domāju, ka ir vilinoši, ja vienīgais jūsu rīcībā esošais rīks ir āmurs, izturēties pret visu kā pret naglu." -Maslova

To pašu ideju var attiecināt uz konsoli. Ekosistēmā, kur solītie zemes instrumenti, īsinājumtaustiņi un API, piemēram, piens un medus, plūst, ir grūti attaisnot jauna āmura paņemšanu, kad jūsu vecais darbojas lieliski. Uzticieties man par šo, lai arī tie, kas ir jūsu āmura aizmugurē, nav tikai naglu izvilkšana.

Tālāk ir minēti daži vienkāršākie triki, kurus esmu atradis atkļūdošanai konsolē.

# 1: Argumentu iesaiņošana

Ja iesaiņojat argumentu, kas ievadīts console.log{}, jūs objekta formā izvadīsit datus, kurus reģistrējat. Objektam būs jauks nosaukums, lai pateiktu, kas tas bija, ko jūs mēģinājāt izvadīt.

Tā vietā, lai konsolē redzētu veselu virkni objektu ar līdzīgiem laukiem, piemēram, ID un nosaukums, rīkojieties šādi:

Jūs saņemsiet mainīgā nosaukumu pirms datiem, kas tiek drukāti šādi:

# 2: datu kopēšana uz starpliktuvi

Konsolē reģistrētos datus varat kopēt uz datora starpliktuvi. Tas man šķiet noderīgi, ja vēlaties manipulēt ar objektu REPL vai izvilkt datus, kurus atkļūdojat.

Ar peles labo pogu noklikšķiniet blakus datiem, kurus vēlaties kopēt, un atlasiet “Saglabāt kā globālo mainīgo”. Tādējādi dati tiks saglabāti kā mainīgais konsolē ar pagaidu nosaukumu. (Ja konsoles logā to darāt pirmo reizi, tas tā būs temp1.) Tad kā argumentu varat izmantot copy()komandu , kas ievieto vārdu temp1. Tādējādi tiek kopēti saglabātie dati uz starpliktuvi, kurus varat ielīmēt tāpat kā visu citu, ko kopējat.

Tas ir īpaši noderīgi, ja datu bāzes vaicājums neatgriež datus tādā formātā, kas atbilst tam, kā jūsu dati tiek apstrādāti priekšējā daļā. Jūs varat parādīt, kā dati tiek pārveidoti vai pārveidoti.

# 3: īssavienojuma izteicieni

Ja īssavienojat izteiksmi ar a, ||jūs varat daudz ātrāk pārveidot kodu vai pievienot atkļūdošanas paziņojumu. Tas ir īpaši noderīgi ar vienas rindas tauku bultiņas funkcijām, kurās vēlaties redzēt, kādus datus jūs saņemat kā argumentu.

// THISsomeFunction = data => ( )
// BECOMES...someFunction = data => console.log(data) || ( )
// RATHER THAN...someFunction = data => { console.log(data) return ( )}

Jūs izlaižat visas funkcijas iesaiņošanu cirtainās lencēs un atgriešanās pievienošanu. Tas liekas, ka tas nav tik liels darījums, kamēr jūs optimizējat veiktspēju un darāt to tūkstoš reižu, cenšoties noskaidrot, ko jūs esat izdarījis.

# 4: žurnāls, kļūda, brīdinājums

Papildus console.log()konsolei ir vairākas citas funkcijas, lai drukātu datus konsolē dažādos iepriekš noteiktos formātos. Starp tiem ir:

  • console.log()
  • console.warn()
  • console.error()

# 5: Pielāgots konsoles izejas formatējums

Jūs varat izdarīt vairāk nekā tikai īstenot iebūvēto formatēšanai console.log, warnun error. Jūs varat spēlēt mākslinieka lomu tur, kur konsole ir jūsu audekls!

Varbūt mēģiniet izdrukāt jauku tableti ap izvadi, kuru vēlaties uzsvērt:

Šis ir fragments:

Varat arī uzglabāt CSS, lai mainīgajos mainītos kā stili. Jūs varat nopelnīt savus kolēģus ar varavīksnes šļakatām, lai izsekotu visu jūsu izdoto. Ja vēlaties, lai visam sekotu humungiskas varavīksnes, izmēģiniet šo:

# 6: JSON drukāšana kā tabula

Daudziem nemanot, konsolē ir iebūvēta metode tabulas datu drukāšanai tabulas formātā. Tas var būt lieliski, lai ātri iepazītos ar JSON datiem.

# 7: Viegla skaitīšana

console.count()Metode var padarīt sekotu, cik reizes jūs esat hit punktu savā kodā patiešām vienkārši. Jums vairs nav jāturpina kods, palielinot mainīgos.

Pro padoms: “skaitli” varat aizstāt ar etiķeti no mainīgā, un tas skaitīs, cik reizes ir sasniegta skaitīšanas metode ar šo etiķeti.

Es uzskatu, ka tas ir noderīgi, mēģinot atkļūdot sacīkšu apstākļus vai nevajadzīgu atkārtotu renderēšanu lietotnē React.

# 8: DOM elementu izmantošana

Cilnē Elementi varat atlasīt DOM elementu un pēc tam piekļūt ar $0. Pārlūkprogramma faktiski saglabās vēsturi, kurā $0attēlota pašreizējā izvēle. $1apzīmē iepriekšējo atlasi. $2otrā pēdējā atlase un tā tālāk līdz 5 elementiem.

Jūs varat sev uzdot jautājumu: kad es kādreiz vēlētos mainīt savas lietotnes iekšējo HTML no konsoles? Un atbilde, iespējams, būtu tikai tad, kad emuāra ziņai vēlaties patiešām vienkāršu GIF piemēru. Bet arī tam ir savi lietošanas gadījumi.

# 9: Atkļūdotāja paziņojums

Ja esat kādreiz pievienojis konsoli.log, pārlūkprogrammas rīkos un pievienojis pārtraukumpunktu, lai redzētu, kas notiek, kad tas nonāk pie šī koda, atbrīvojiet sevi ar debuggerpaziņojumu.

Ja debuggerJavascript pievienojat rindiņu, pārlūks apstāsies un atvērs atkļūdošanas rīkus un apturēs izpildi.

Lai gan tā nav konsoles funkcija, to ir lieliski zināt. Informācijas reģistrēšana konsolē nav tik efektīva vai efektīva kā pārlūkprogrammās iebūvētie atkļūdošanas rīki (piemēram, Chrome cilne Avoti vai Firefox cilne Atkļūdotāji). Lai vēl vairāk uzlabotu atkļūdošanu, izpētiet resursus, kuros tiek izmantoti šie rīki.

Tomēr konsole joprojām ir patiešām ātrs un efektīvs veids, kā redzēt lietojumprogrammu plūsmu lietotnēs, kurās tiek aktivizētas daudzas dažādas dzīves cikla metodes un atkārtoti renderēti, un arī to izmantošanas uzlabošana padarīs jūs par labāku izstrādātāju.

Paldies, ka lasījāt!

Ja jums ir savi padomi, lūdzu, dalieties! Es labprāt dzirdētu no jums šeit komentāros, čivināt vai pa e-pastu.

Ja jums šķita, ka lasītais ir interesants vai noderīgs, laipni lūdzam atstāt vienu vai divus aplaudus, abonēt turpmākos atjauninājumus vai retvītot / kopīgot šo tvītu:?