Javascript-konsolin komento

Javascript-konsolin komento

Hyödyllisiä temppuja virheenkorjaukseen, muotoiluun ja tehokkuuteen

Konsoli on yksi ensimmäisistä työkaluista, joista kehittäjät oppivat. Konsoli on työkalu, jota kehittäjät käyttävät omien sovellustensa virheenkorjauksessa. Instrumentin lain mukaan on helppo kehittää itseluottamusta tutussa työkalussa.

"Luulen, että on houkuttelevaa, jos ainoa työkalu sinulla on vasara, kohdella kaikkea kuin kynsiä." -Maslow

Samaa ajatusta voidaan soveltaa konsoliin. Ekosysteemissä, jossa työkalut, pikanäppäimet ja API: n virtaus, kuten maito ja hunaja, luvatussa maassa, on vaikea perustella uuden vasaran ottamista, kun vanha toimii hienosti. Luota minuun kuitenkin tästä, ne piikkiesineet vasarasi takana eivät ole vain kynsien repimiseen.

Seuraavassa on joitain yksinkertaisia ​​temppuja, jotka olen löytänyt virheenkorjauksesta konsolissa.

# 1: Argumenttien kääriminen

Jos käärit argumentin, joka välitetään console.log{}: n argumentteihin, syötät kirjaamasi tiedot objektimuodossa. Kohteella on mukava nimi kertoa sinulle, mitä yritit tuottaa.

Sen sijaan, että näkisit koko joukon esineitä, joilla on samanlaiset kentät, kuten tunnus ja nimi, konsolissasi näin:

Saat muuttujan nimen tulostettavien tietojen edessä seuraavasti:

# 2: Tietojen kopioiminen leikepöydälle

Voit kopioida konsoliin kirjatut tiedot tietokoneen leikepöydälle. Minusta tämä on hyödyllistä, kun haluat manipuloida objektia REPL: ssä tai vedä virheenkorjaamiasi tietoja.

Napsauta hiiren kakkospainikkeella kopioitavien tietojen vieressä ja valitse "Tallenna globaalina muuttujana". Tämä tallentaa tiedot muuttujaksi konsoliin väliaikaisella nimellä. (Jos se on ensimmäinen kerta, kun teet sen konsoli-ikkunassa, se tulee olemaan temp1.) Sitten voit käyttää argumenttia copy()nimeä lisäämällä olevan komennon kanssa temp1. Tämä kopioi leikepöydälle tallennetut tiedot, jotka voit liittää kuten kaikki muutkin kopioidut.

Se on erityisen hyödyllistä, kun tietokantakysely ei palauta tietoja muodossa, joka vastaa sitä, miten tietojasi käsitellään käyttöliittymässä. Voit näyttää kuinka tietoja muunnetaan tai muunnetaan.

# 3: Oikosulkuilmeet

Jos oikosuljet lausekkeen a: lla, ||voit tehdä koodin uudelleen tai lisätä virheenkorjauslausekkeen paljon nopeammin. Tämä on erityisen hyödyllistä yhden rivin rasvan nuolitoimintojen kanssa, joissa haluat nähdä argumenttina saamasi tiedot.

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

Ohitat koko toiminnon käärimisen kiharaisiksi aaltosulkeiksi ja lisäyksen lisäämisen. Tuntuu siltä, ​​että se ei ole niin iso juttu, ennen kuin optimoit suorituskyvyn ja teet sen tuhat kertaa yrittäen selvittää, minkä törkeän React synnin olet tehnyt.

# 4: Loki, virhe, varoitus

Lisäksi console.log()konsolilla on useita muita toimintoja tietojen tulostamiseksi konsoliin eri ennalta määritetyissä muodoissa. Näitä ovat:

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

# 5: Mukautettu muotoilu konsolilähdölle

Voit tehdä enemmän kuin vain toteuttaa sisäänrakennettu muotoiluja console.log, warnja error. Voit pelata taiteilijan roolia siellä missä konsoli on kankaasi!

Ehkä yritä tulostaa mukava pilleri tuotoksen ympärille, jota haluat korostaa:

Tässä katkelma:

Voit myös tallentaa CSS: n käytettäväksi tyylinä muuttujassa, jota käytetään tulosteeseen. Voit punkata työtovereidesi roiskeella sateenkaarella jäljittääksesi kaiken tuottamasi. Jos haluat, että humungous sateenkaaret seuraavat kaikkea, kokeile tätä:

# 6: JSON: n tulostaminen taulukkona

Monille tietämättä konsolissa on sisäänrakennettu menetelmä taulukkotietojen tulostamiseksi taulukkomuodossa. Tämä voi olla hieno tapa tutustua nopeasti JSON-tietoihin.

# 7: Helppo laskenta

console.count()Menetelmä voi pitää kirjaa siitä, kuinka monta kertaa olet osuma piste koodissa todella yksinkertaista. Sinun ei enää tarvitse pippuroida koodiasi muuttuvissa muuttujissa.

Pro-vinkki: voit korvata “numero” muuttujan tunnisteella ja se laskee, kuinka monta kertaa kyseiseen tunnisteeseen perustuva laskentamenetelmä on osunut.

Olen havainnut tämän olevan hyödyllinen yritettäessä debugata kilpailuolosuhteita tai tarpeetonta uudelleenhahmonnusta React-sovelluksessa.

# 8: DOM-elementtien käyttö

Voit valita DOM-elementin Elementit-välilehdeltä ja käyttää sitä sitten $0. Selain säilyttää historian, joka $0edustaa nykyistä valintaa. $1edustaa edellistä valintaa. $2toinen viimeinen valinta ja niin edelleen enintään 5 elementtiä.

Voit kysyä itseltäsi: milloin haluaisin koskaan muuttaa sovelluksen sisäistä HTML-koodia konsolista? Ja vastaus olisi todennäköisesti vain silloin, kun haluat todella yksinkertaisen GIF-esimerkin blogikirjoitukseen. Mutta myös tällä on käyttötapauksia.

# 9: Debugger-lausunto

Jos olet joskus lisännyt konsoli.login, siirtynyt selaimen työkaluihin ja lisännyt katkaisupisteen, näet mitä tapahtuu, kun se saa koodin, vapauta itsesi debuggerlauseella.

Jos lisäät debuggerrivin Javascriptiin, selain pysähtyy ja avaa virheenkorjaustyökalut ja keskeyttää suorituksen.

Vaikka se ei ole konsoliominaisuus, se on hieno asia tietää. Tietojen kirjaaminen konsoliin ei ole yhtä tehokasta kuin selaimiin sisäänrakennetut virheenkorjaustyökalut (kuten Chromen lähteet-välilehti tai Firefoxin virheenkorjaus-välilehti). Voit parantaa virheenkorjausta edelleen tutkimalla resursseja, jotka käyttävät näitä työkaluja.

Konsoli on kuitenkin todella nopea ja tehokas tapa nähdä sovellusten kulku sovelluksissa, joissa käynnistyy paljon erilaisia ​​elinkaarimenetelmiä ja uudelleenhahmontoja, ja niiden käytön parantaminen tekee sinusta paremman kehittäjän.

Kiitos lukemisesta!

Jos sinulla on omia vinkkejä, jaa! Haluaisin kuulla sinusta täällä kommenteissa, Twitterissä tai sähköpostitse.

Jos löysit lukemasi mielenkiintoisen tai hyödyllisen, voit olla tervetullut jättämään taputuksen tai kaksi, tilaamaan tulevia päivityksiä tai uudelleentwiittamaan / jakamaan tämän twiitin:?