Javascripti konsooli käskimine

Javascripti konsooli käskimine

Kasulikud nipid silumiseks, vormindamiseks ja tõhususeks

Konsool on üks esimesi tööriistu, millest arendajad teada saavad. Konsool on tööriist, mida arendajad kasutavad oma rakenduste silumisel. Instrumendi seadus ütleb, et tuttavas tööriistas on lihtne enesekindlust arendada.

"Ma arvan, et on ahvatlev, kui ainus tööriist, mis teil on, on haamer, kohelda kõike nagu naelu." -Maslow

Sama ideed saab rakendada ka konsoolil. Ökosüsteemis, kus tööriistad, kiirklahvid ja API voolavad nagu piim ja mesi lubatud maal, on raske õigustada uue haamri võtmist, kui teie vana töötab suurepäraselt. Usaldage mind siiski, need haaratsid teie haamri tagaküljel ei ole mõeldud ainult küünte välja rebimiseks.

Järgnevad on mõned lihtsamad nipid, mille konsoolist silumiseks leidsin.

# 1: Argumentide pakkimine

Kui murrate console.log{} -i sisestatud argumendi, väljastate logitavad andmed objekti kujul. Objektil on kena nimi, mis ütleb teile, mis see oli, mida proovisite väljastada.

Selle asemel, et oma konsoolis näha tervet hulka objekte, millel on sarnased väljad nagu ID ja nimi, toimige järgmiselt.

Muutuja nime saate trükitavate andmete ees järgmiselt:

# 2: andmete kopeerimine lõikelauale

Konsoolis logitud andmeid saate kopeerida oma arvuti lõikelauale. Minu arvates on see kasulik, kui soovite REPL-i objektiga manipuleerida või siluda andmeid välja tõmmata.

Paremklõpsake nende andmete kõrval, mida soovite kopeerida, ja valige käsk „Salvesta globaalse muutujana”. See salvestab andmed konsooli muutujana ajutise nimega. (Kui teete seda esmakordselt konsooliaknas, siis seda saab temp1.) Seejärel võite argumendina kasutada copy()käsku, mis paneb nime temp1. See kopeerib teie lõikelauale salvestatud andmed, mille saate kleepida nagu kõik muud, mida kopeerite.

See on eriti kasulik, kui andmebaasi päring ei tagasta andmeid vormingus, mis vastab teie andmetega eesservas manipuleerimisele. Saate näidata, kuidas andmeid muteeritakse või teisendatakse.

# 3: lühisvõrgu väljendid

Kui ühendate avaldisega lühise a-ga, ||saate koodi taastada või silumislause lisada palju kiiremini. See on eriti kasulik ühe rea rasva noole funktsioonide puhul, kus soovite näha, milliseid andmeid te argumendina saate.

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

Jätate vahele kogu funktsiooni lokkis traksidega pakkimise ja tagastuse lisamise. See tundub, et see pole nii suur probleem enne, kui optimeerite jõudlust ja tehke seda tuhat korda, püüdes välja selgitada, millise ränga React patu olete toime pannud.

# 4: Logi, tõrge, hoiatus

Lisaks sellele console.log()on konsoolil mitmeid muid funktsioone andmete printimiseks konsooli erinevates etteantud vormingutes. Nende hulgas on:

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

# 5: konsooli väljundi kohandatud vormindamine

Seda saab teha rohkem kui lihtsalt rakendada sisseehitatud vormindamiseks console.log, warnja error. Kunstniku rolli saate mängida seal, kus konsool on teie lõuend!

Võib-olla proovige printida kena pill selle väljundi ümber, mida soovite rõhutada:

Siin on see jupp:

Võite ka CSS-i salvestada, et seda kasutada muutujana stiilidena, et seda väljundile rakendada. Saate oma kaastöötajaid vikerkaarega pritsida, et jälgida kõike, mida väljastate. Kui soovite, et humungous vikerkaar järgiks kõike, proovige seda:

# 6: JSON-i printimine tabelina

Paljudele teadmata on konsoolil sisseehitatud meetod tabelandmete tabelivormingus printimiseks. See võib olla suurepärane JSON-i andmete kiireks tutvumiseks.

# 7: lihtne loendamine

console.count()Meetod võib teha jälgida, kui palju kordi olete tabanud punkti koodis tõesti lihtne. Te ei pea enam koodi muutujate arvu suurendama.

Pro näpunäide: saate "number" asendada muutuja sildiga ja see loeb, mitu korda selle sildiga loendamismeetod on tabatud.

Leidsin, et see on kasulik, kui proovite React'i rakenduses võistlustingimusi siluda või asjatut ümber renderdamist.

# 8: DOM-elementide kasutamine

Vahekaardil Elements saate valida DOM-elemendi ja seejärel sellele juurde pääseda $0. Brauser hoiab tegelikult ajalugu, mis $0tähistab praegust valikut. $1tähistab eelmist valikut. $2teine ​​viimane valik ja nii kuni 5 elementi.

Võite endalt küsida: millal tahaksin kunagi oma rakenduse sisemist HTML-koodi konsoolist muuta? Ja vastus oleks tõenäoliselt ainult siis, kui soovite ajaveebipostituse jaoks tõeliselt lihtsat GIF-i näidet. Kuid ka sellel on oma kasutusjuhtumid.

# 9: siluri avaldus

Kui olete kunagi lisanud konsooli.log, läinud brauseri tööriistadesse ja lisanud katkestuspunkti, siis näete, mis selle koodi juurde jõuab, vabastades selle debuggeravalduse.

Kui lisate debuggeroma Javascripti reale, peatub brauser ja avab silumisvahendid ning peatab täitmise.

Kuigi see pole konsoolifunktsioon, on see tore teadmine. Teabe konsooli sisse logimine pole nii tõhus ega tõhus kui brauseritesse sisseehitatud silumistööriistad (nt Chrome'i vahekaart Allikad või Firefoxi vahekaart Silumine). Silumisviisi täiendavaks parandamiseks uurige ressursse, mis nendesse tööriistadesse lähevad.

Kuid konsool on endiselt tõeliselt kiire ja tõhus viis näha rakenduste voogu rakendustes, kus käivitatakse palju erinevaid elutsüklimeetodeid ja -renderdusi ning nende kasutamise täiustamine muudab teid paremaks arendajaks.

Täname lugemast!

Kui teil on oma näpunäiteid, siis jagage palun! Mulle meeldiks kuulda teid siin kommentaarides, Twitteris või e-posti teel.

Kui leidsite loetu huvitavaks või kasulikuks, tundke end teretulnud, kui jätaksite ühe või kaks plaksutamist, telliksite tulevaste värskenduste jaoks või säutsuksite / jagaksite seda säutsu:?