Komanda „Javascript“ pultui

Komanda „Javascript“ pultui

Naudingi triukai derinimui, formatavimui ir efektyvumui

Pultas yra vienas iš pirmųjų įrankių, kuriuos kūrėjai sužino. Pultas yra įrankis, kurį kūrėjai naudoja derindami savo programas. Priemonės įstatyme teigiama, kad nesunku sukurti pasitikėjimą savimi žinomoje priemonėje.

"Aš manau, kad yra viliojanti, jei vienintelis jūsų turimas įrankis yra plaktukas, viską vertinti taip, lyg tai būtų vinis". -Maslow

Tą pačią idėją galima pritaikyti ir pultui. Ekosistemoje, kur pažadėtoje žemėje įrankiai, spartieji klavišai ir API, kaip pienas ir medus, srautai, sunku pateisinti naujo plaktuko paėmimą, kai senasis veikia puikiai. Vis dėlto patikėkite manimi, kad tie plaktukai ant jūsų plaktuko galo yra skirti ne tik nagams plėšyti.

Toliau pateikiami keli paprasčiausi triukai, kuriuos radau derindama konsolėje.

# 1: argumentų apvyniojimas

Jei apvyniosite argumentą, perduodamą console.log{}, išvesite duomenis, kuriuos registruojate, objekto forma. Objektas turės gražų pavadinimą, kuris jums pasakys, ką bandėte išleisti.

Užuot savo konsolėje matę daugybę objektų su panašiais laukais, pvz., ID ir vardas, atlikite šiuos veiksmus:

Kintamojo pavadinimą gausite prieš spausdinamus duomenis taip:

# 2: Duomenų kopijavimas į mainų sritį

Pulte užregistruotus duomenis galite nukopijuoti į savo kompiuterio iškarpinę. Manau, kad tai naudinga, kai norite manipuliuoti objektu REPL arba ištraukti duomenis, kuriuos derinate.

Dešiniuoju pelės mygtuku spustelėkite šalia duomenų, kuriuos norite nukopijuoti, ir pasirinkite „Saugoti kaip visuotinį kintamąjį“. Tai išsaugos duomenis kaip konsolės kintamąjį su laikinu pavadinimu. (Jei pirmą kartą tai darote konsolės lange, tai bus temp1.) Tada kaip argumentą galite naudoti copy()komandą, įvedančią vardą temp1. Tai nukopijuoja duomenis į jūsų mainų sritį, kuriuos galite įklijuoti taip, kaip ir bet kurį kitą, kurį nukopijuosite.

Tai ypač naudinga, kai duomenų bazės užklausa negrąžins duomenų tokiu formatu, kuris atitiktų jūsų duomenų tvarkymo tvarkymą. Galite parodyti, kaip duomenys mutuojami ar transformuojami.

# 3: Trumpojo jungimo išraiškos

Jei sutrumpinsite išraišką naudodami ||žymeklį, galite daug greičiau pakeisti kodą ar pridėti derinimo sakinį. Tai ypač naudinga naudojant vienos eilutės riebalų rodyklės funkcijas, kuriose norite pamatyti, kokius duomenis gaunate kaip argumentą.

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

Jūs praleidžiate apvyniodami visą funkciją garbanotais petnešomis ir pridėdami grąžą. Tai atrodo, kad tai nėra toks didelis dalykas, kol optimizuoji našumą ir padarysi tai tūkstantį kartų bandydamas išsiaiškinti, kokią rimtą React nuodėmę padarei.

# 4: žurnalas, klaida, įspėjimas

Be to console.log(), konsolė turi keletą kitų funkcijų, leidžiančių spausdinti duomenis į konsolę skirtingais iš anksto nustatytais formatais. Tarp jų yra:

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

5: pasirinktinis konsolės išvesties formatavimas

Jūs galite padaryti daugiau nei tiesiog įgyvendinti built-in formatavimas su console.log, warnir error. Menininko vaidmenį galite atlikti ten, kur konsolė yra jūsų drobė!

Galbūt pabandykite išspausdinti gražią tabletę aplink išvestį, kurią norite pabrėžti:

Štai tas fragmentas:

Taip pat galite saugoti CSS, kad jis būtų naudojamas kaip stiliai kintamajame, kad būtų taikomas išvesties. Galite pankuoti savo bendradarbius vaivorykštės purslais, kad atsektumėte viską, ką išvedate. Jei norite, kad humungiškos vaivorykštės atitiktų viską, pabandykite tai:

# 6: JSON spausdinimas kaip lentelė

Daugeliui nežinant, pultas turi įmontuotą lentelės formato duomenų lentelių spausdinimo metodą. Tai gali būti puiku norint greitai peržiūrėti JSON duomenis.

# 7: Lengvas skaičiavimas

Šis console.count()metodas gali labai lengvai sekti, kiek kartų pasiekėte kodo tašką. Jums nebereikia pipiruoti savo kodo didinant kintamuosius.

„Pro“ patarimas: „skaičių“ galite pakeisti etikete iš kintamojo ir skaičiuosite, kiek kartų buvo pasiektas skaičiavimo metodas su ta etikete.

Manau, kad tai naudinga bandant derinti varžybų sąlygas ar nereikalingą perteikimą „React“ programoje.

# 8: DOM elementų naudojimas

Skirtuke Elementai galite pasirinkti DOM elementą ir tada jį pasiekti $0. Naršyklė iš tikrųjų išsaugos istoriją, $0atspindinčią dabartinį pasirinkimą. $1reiškia ankstesnį pasirinkimą. $2antroji paskutinė atranka ir t. t. iki 5 elementų.

Galite savęs paklausti: kada aš kada nors norėčiau iš savo pulto pakeisti savo programos vidinį HTML? Ir atsakymas turbūt būtų tik tada, kai norėtumėte tikrai paprasto GIF pavyzdžio tinklaraščio įrašui. Tačiau tai taip pat turi savo naudojimo atvejus.

# 9: Derintojo pareiškimas

Jei kada nors pridėjote „console.log“, nuėjote į naršyklės įrankius ir pridėjote lūžio tašką, kad sužinotumėte, kas vyksta, kai jis patenka į tą kodą, išsivaduokite iš debuggerpareiškimo.

Jei pridėsite debuggereilutę „Javascript“, naršyklė sustos ir atidarys derinimo įrankius ir pristabdys vykdymą.

Nors tai nėra konsolės funkcija, tai yra puikus dalykas, kurį reikia žinoti. Informacijos registravimas konsolėje nėra toks efektyvus ar efektyvus kaip naršyklėse įmontuoti derinimo įrankiai (pvz., „Chrome“ skirtukas „Šaltiniai“ arba „Firefox“ derintuvas). Norėdami toliau tobulinti derinimą, ieškokite šaltinių, kurie pasinertų į tuos įrankius.

Tačiau konsolė išlieka tikrai greitas ir efektyvus būdas matyti programų srautą programose, kuriose veikia daugybė skirtingų gyvavimo ciklo metodų ir perteikimų, o patobulinus jų naudojimą jūs tapsite geresniu kūrėju.

Ačiū, kad skaitėte!

Jei turite savo patarimų, prašome pasidalinti! Norėčiau išgirsti iš jūsų komentaruose, „Twitter“ ar el. Paštu.

Jei jums pasirodė tai, ką skaitėte, yra įdomu ar naudinga, kviečiame palikti vieną ar dvi plojimus, užsiprenumeruoti būsimus naujinius arba retweetuoti / bendrinti šį tweetą:?