Efektyvus "Chrome" programuotojo įrankių naudojimas (pamoka)

Efektyvus įvykių žurnalas „Chrome“ kūrėjų įrankiuose

Visi pamokos vaizdo įrašai Efektyvus "Chrome" programuotojo įrankių naudojimas (pamoka)

Šioje pamokoje sužinosite apie įvairius būdus, kuriais galite pritaikyti ir patobulinti žurnalo išvestis "Chrome" programuotojo įrankiuose. Ypač daug dėmesio skirsime išvesties grupavimui ir stilizacijai, kad padidintume aiškumą ir išryškintume svarbią informaciją. Kuriant žiniatinklio programinę įrangą dažnai reikia tikslių derinimo priemonių , o šių metodų išmanymas gali gerokai padidinti jūsų, kaip programuotojo, efektyvumą.

Pagrindinės žinios

  • Funkcijų naudojimas konsolės išvesties tvarkymui ir grupavimui.
  • CSS stiliaus taikymo būdai žurnalo išvestims.
  • Darbas su skirtingais žurnalo lygiais ir jų vizualiai paryškintu atvaizdavimu.

Žingsnis po žingsnio vadovas

Išvalykite konsolę

Pirmiausia tikslinga išvalyti konsolę nuo ankstesnių išvedimų, kad pradėtumėte nuo švaraus rodymo. Tai galite padaryti dviem būdais: skambindami metodu .clear() arba naudodami lango funkciją clear.

Efektyvus žurnalo tvarkymas "Chrome" kūrėjo įrankiuose.

Naudojant šį metodą, pašalinamas visas konsolės turinys ir bandymus pradedate nuo tuščios būsenos. Taip pat galima naudoti mygtuką "Išvalyti konsolę" tiesiogiai konsolėje, taip pasiekiamas tas pats efektas, tačiau be pranešimo "Konsolė buvo išvalyta".

Grupės kūrimas konsolėje

Kita naudinga funkcija yra grupių kūrimas naudojant metodą console.group(). Naudodamiesi šia funkcija, išėjimus galite rodyti sugrupuotus, kad galėtumėte juos išskleisti ir sugrūsti pagal savo pageidavimą.

Efektyvus žurnalų valdymas „Chrome“ kūrėjo įrankiuose

Jei norite, kad grupės turinys pagal nutylėjimą būtų rodomas sulankstytas, galite naudoti funkciją console.groupCollapsed(). Tada grupę uždarote naudodami console.groupEnd(), kad ji taptų aiškesnė.

Galimybė įterpti grupes leidžia kurti sudėtingesnes struktūras. Tai reiškia, kad grupes galite vėl kurti grupėse ir taip sukurti dar tikslesnę hierarchiją.

Žurnalo išvestys ir jų lygiai

Kitas svarbus aspektas yra žurnalų lygių valdymas. Chrome siūlo įvairius žurnalų pranešimų išvedimo būdus: console.log(), console.warn(), console.error() ir console.debug().

Efektyvus žurnalo tvarkymas „Chrome“ kūrėjo įrankiuose

Kiekvienas iš šių metodų turi specifinį vizualinį atvaizdavimą, padedantį naudotojams greitai atskirti skirtingų tipų pranešimus. Pavyzdžiui, klaida rodoma raudoname fone, o įspėjimai pažymėti geltonai.

Svarbu pažymėti, kad tam tikri žurnalo lygiai gali būti paslėpti konsolės filtro nustatymuose. Įsitikinkite, kad filtrų sąraše pažymėjote atitinkamus langelius, jei norite matyti visų tipų žurnalo išvestis.

Žurnalo išvesties stilizavimas

Žurnalo pranešimus galite stilizuoti naudodami į CSS panašią išvesties sintaksę. Pavyzdys - prieš žurnalo pranešimą naudokite %c, o po jo - stiliaus taisykles.

Efektyvus žurnalų valdymas „Chrome“ kūrėjų įrankiuose

Čia galite, pavyzdžiui, koreguoti šrifto spalvą ir foną arba net pakeisti šrifto dydį, kad išryškintumėte svarbią išvestį.

Efektyvus žurnalo tvarkymas „Chrome“ kūrėjo įrankiuose

Įdomus šios funkcijos panaudojimas - sukurti įspėjamuosius pranešimus, kad naudotojai žinotų, jog turėtų būti atsargūs, ką rašo.

Efektyvus žurnalo valdymas „Chrome“ kūrėjų įrankiuose

Stilius yra galingas būdas vizualiai pabrėžti informaciją. Išbandykite įvairias CSS savybes, kad pasiektumėte norimą rezultatą, ir įsitikinkite, kad jūsų žurnalo išvestys yra ir patrauklios, ir informatyvios.

Grupių ir stiliaus derinimas

Dar vienas naujoviškas metodas - derinti grupavimo išvestis su emociniu patrauklumu pasitelkiant stilių. Pavyzdžiui, galite sukurti grupes ir naudoti stilių, kad pabrėžtumėte šių grupių antraštes ir susidarytumėte aiškesnį atitinkamų skyrių vaizdą.

Efektyvus žurnalo valdymas „Chrome“ kūrėjo įrankiuose

Naudokite šias parinktis sudėtingiems žurnalams kurti, kad jie būtų ir aiškūs, ir intuityviai skaitomi, nenukrypstant į pernelyg didelį sudėtingumą.

Santrauka

Šiame vadove sužinojote, kaip "Google Chrome" naršyklėje pritaikyti konsolės išvestį, kad pagerintumėte skaitomumą ir patogumą. Naudodamiesi stilių grupavimo ir pritaikymo funkcijomis galėsite greitai nustatyti ir aiškiai perduoti svarbią informaciją. Šios priemonės padės jums kontroliuoti žurnalo išvestį ir optimizuoti kūrimo procesus.

Dažniausiai užduodami klausimai

Kuo skiriasi console.group() ir console.groupCollapsed()?console.group() pagal numatytuosius nustatymus rodo grupę sulankstytą, o console.groupCollapsed() pagal numatytuosius nustatymus rodo grupę sulankstytą.

Kaip konsolės išvestyje naudoti CSS stilių? Išvesties stiliui sukurti galite naudoti %c formatą, po kurio seka stiliaus taisyklės.

Kokie yra žurnalo lygiai "Chrome" programuotojo įrankiuose? yra skirtingi žurnalo lygiai: console.log(), console.info(), console.warn(), console.error() ir console.debug().

Ar galiu kurti grupes grupėse? taip, galite kurti grupes grupėse, kad žurnalo išvestyje sukurtumėte hierarchines struktūras.

Kodėl nematau visų žurnalo pranešimų? Kartais tam tikri žurnalo lygiai yra paslėpti konsolės filtro nustatymuose. Įsitikinkite, kad atitinkami žymimieji langeliai yra pažymėti.