Kako podesiti pametne telefone i računare. Informativni portal
  • Dom
  • Iron
  • Korištenje JavaScript Developer Console. Pogodne funkcije Chrome Developer Console za koje možda niste znali

Korištenje JavaScript Developer Console. Pogodne funkcije Chrome Developer Console za koje možda niste znali

Zdravo dragi prijatelji. Panel programera (konzola) u pretraživaču je nezamjenjiv alat za svakog vlasnika stranice, pomoću kojeg možete brzo pregledati html kod stranice i css stilove. Također saznajte o greškama koje su se dogodile prilikom učitavanja stranice i provjerite da li web lokacija odgovara.

Danas ćemo razmotriti rad sa html kodom, css stilovima i prilagodljivošću na panelu programera. Ovo su alati koji su potrebni za većinu zadataka.

Za opće razumijevanje slike, dajmo primjer kada će vam možda trebati panel za programere.

Recimo da dođete na moj blog i da vas zanima koji font koristim ili boju i tako dalje. Općenito, to može biti bilo koji element na web mjestu. I vi ste htjeli da uradite isto na svom sajtu.

Zatim pogledate kroz panel programera u pretraživaču traženi element, gdje možete vidjeti html kod i css stilove za njega.

Drugi slučaj upotrebe panela je kada želite da uradite nešto na sajtu, ali još ne znate kako će to izgledati.

U ovom slučaju možete koristiti i panel programera i vidjeti kako će vaša ideja izgledati u pretraživaču. Uostalom, sve što radite na panelu za programere vidljivo je samo vama. A da bi posjetitelji mogli vidjeti vaše eksperimente, morat ćete prenijeti stilove i kodove u datoteke stranice.

Otvaranje webmaster panela i upoznavanje sa interfejsom

Panel za programere je prisutan u svakom modernom pretraživaču. Da biste ga otvorili, potrebno je da pritisnete taster F12 na tastaturi.

Interfejs panela će se razlikovati u različitim pretraživačima, ali principi rada su slični.

Više mi se sviđa panel u Firefox pretraživaču.

Sama ploča je podijeljena na dvije polovine i sadrži jezičke i alate za rad.

U panelu možete vidjeti HTML kod stranice i urediti ga upravo tamo. Da biste to učinili, odaberite željeni element, pritisnite desnu tipku miša i odaberite iz izbornika „Uredi kakoHTML (UrediasHTML) ".


Da biste radili sa stilovima, morate otići u odjeljak CSS panela, gdje možete dodati stilove ili onemogućiti postojeće uklanjanjem potvrdnog okvira nasuprot njih. Možete promijeniti sve.

Ovdje također možete saznati u kojoj se datoteci nalaze stilovi i na kojoj liniji.

Kako raščlaniti html element na sajtu i saznati njegove css stilove

Pogledajmo primjer na mom, koji se nalazi u svakom članku.

Da biste analizirali traženi element, potrebno je da kliknete na njega desnom tipkom miša i odaberete stavku menija .


Čitav princip rada sa kodom, u panelu, je da u lijevom prozoru morate odabrati html kod, au desnom će biti stilovi za ovaj element.

A ako je sve prilično jednostavno sa stilovima, onda kada radite s html kodom morate razumjeti njegov integritet. Odnosno, svaki element ima oznake u kojima se nalazi. To mogu biti odlomci, veze, slike i tako dalje. Najčešće su to DIV blokovi koji imaju oznaku otvaranja < div> i zatvaranje div>... A na panelu je sve jasno vidljivo.


Prilikom kopiranja ili uređivanja, važno je razumjeti gdje blok počinje i gdje se završava. I najmanja greška ovdje može slomiti cijeli izgled predloška.

U video tutorijalu, detaljnije ću se zadržati na ovoj tački. A ako želite brzo savladati osnovna znanja html-a i css-a, savjetujem vam da odete na stranicu "je besplatno" i preuzmite kurseve Evgenija Popova.

Kako kopirati html kod sa panela na fajlove sajta

Može biti mnogo ideja za korištenje panela za programere. Nakon eksperimentiranja na panelu, dobiveni rezultat mora se prenijeti u datoteke web mjesta. I ovdje postoji određena poteškoća. Činjenica je da panel prikazuje html kod, a većina modernih sajtova, uključujući i one na WordPress platformi, kreirana je pomoću PHP programskog jezika. A ovo je kao nebo i zemlja.

Dakle, pogledajmo primjer kopiranja banera s mog bloga i prijenosa na drugu stranicu.

Da biste to učinili, morate otvoriti panel programera, pregledavajući željeni element. Nakon što ste odredili početak DIV bloka, pritisnite desnu tipku prednjeg nišana i odaberite stavku menija "Kopiraj eksternoHTML "


Kôd je kopiran u međuspremnik i sada ga trebate zalijepiti tamo gdje želite da vidite ovaj baner.

Ovaj proces je prilično teško opisati, pa predlažem da pogledate video tutorijal u kojem je sve detaljno opisano i prikazano.

Kako prenijeti stilove s panela za programere u datoteke stranice

Nakon što se odlučite za kod i stilove, možete početi da ih prenosite u fajlove sajta. Sve dok su sve ove promjene vidljive samo vama u pretraživaču i ako osvježite stranicu, sve promjene će nestati.

, meni je to zgodnije. Budući da pri radu u Notepad ++ postoji isticanje koda i numerisanje redova. A to mnogo pomaže kada nije lako kopirati stilove, već napraviti izmjene u postojećim. Ove stilove je lako pronaći po broju reda.

Kako provjeriti odziv predloška na panelu za programere

Da biste panel prebacili u responzivni režim, potrebno je da pritisnete kombinaciju tastera CTRL + SHIFT + M ili dugme na panelu za programere, koje se nalazi različito u različitim pretraživačima.



Zaključak

U ovom članku nisam razmatrao sve alate panela za programere, već samo one koji mogu biti korisni i koje mnogi webmasteri najčešće koriste.

Korištenje panela i vještine u radu sa kodom i stilovima su nezamjenjivi pri radu sa stranicama i partnerskim programima.

Uzmite alat u službu, bit će vam koristan mnogo puta.

Ako imate bilo kakvih pitanja, rado ću odgovoriti na njih u komentarima.

Prijatelji, zelim vam uspeh. Vidimo se u novim člancima.

Srdačan pozdrav, Maxim Zaitsev.

Ako vam je procjena učinkovitosti sadržaja na stranici aplikacije u trgovini mračna šuma, pogledajte Google Play Developers Console. Objasniću vam kako se radi sa ovim alatom.

Šta je Google Play Developers Console?

Kada je apk fajl vaše aplikacije spreman, potrebno ga je dodati u trgovinu aplikacija Google Play.

Broj novih korisnika nije jednak broju instalacija u istom periodu.

U izvještaju su dostupna dva kriterija: podaci o izvorima prometa i podaci o zemlji. Možete generirati izvještaj za dan, sedmicu ili mjesec, nažalost, ne možete proizvoljno odabrati period.

Izvještaj je predstavljen kao lijevak.

  1. Jedinstveni posjetitelji stranice aplikacije u trgovini.
  2. Broj korisnika koji su nakon pregleda instalirali aplikaciju.
  3. Broj kupaca.
  4. Ponovljeni kupci.

Podaci se generišu u obliku kohorte, odnosno samo oni korisnici koji su posjetili stranicu i instalirali aplikaciju tokom ovog vremenskog perioda biće uključeni u izvještaj za odabrani vremenski raspon. Pisali smo o tome šta je kohortna analiza i zašto je važna za marketinško istraživanje.


metrika Play trgovine je rezultat vašeg ASO-a, odnosno rezultati optimizacije stranice i indeksiranja u trgovini aplikacija.

U osnovi, to su jedinstveni korisnici koji su došli na stranicu vaše aplikacije kao rezultat pretraživanja ili pregleda aplikacija u Play Store-u.

3. Odjeljak "Ocjene i recenzije"

Pododjeljak "Ocjene" je izvještaj koji vam omogućava da vidite dinamiku ocjena po danima, sedmicama, mjesecima i procijenite kako su korisnici doživjeli uvođenje nove funkcije.

"Recenzije" je polje za aktivnosti vašeg menadžera reputacije, SMM stručnjaka ili bilo koje druge osobe koja je odgovorna za komunikaciju sa korisnicima koji vam pišu zahtjeve/pritužbe u recenzijama u trgovini.

U ovom odjeljku, sistem Google Play Developers Console dobrovoljno-obavezno traži od vas nešto i pokazuje vam šta ste već uradili. Na primjer, dodajte snimke ekrana za tablete ako vaša aplikacija podržava takve uređaje.

5. Odjeljak "Podaci za Google Play"

Ovaj odeljak dopunjuje prethodni izveštaj, jer pokazuje šta je prikazano na stranici prodavnice - jezik, kratak opis, pun opis, ikona, grafika.

Veoma je preporučljivo dodati promo video na Google Play stranicu, jer to utiče na atraktivnost vaše stranice za trgovinu i korisnika.

zaključci

Google Play Developers Console je alat koji se može i treba koristiti prilikom marketinga mobilne aplikacije. Ako razumijete Google Play Developers Console, razumjet ćete:

  • kako prodavnica doživljava vašu aplikaciju;
  • kako trgovina pokazuje učinkovitost vašeg sadržaja na stranici aplikacije.

U stvari, to je važna veza između razvijača proizvoda i njegovih korisnika.

Prva ilustracija je fotografija Fredija Fabrisa iz serije Renesansa.

|

Moderni pretraživači pružaju ugrađene razvojne alate za JavaScript i druge tehnologije. Ovi alati uključuju konzolu, koja je slična interfejsu ljuske, kao i alate za DOM inspekciju, otklanjanje grešaka i analizu mrežnih aktivnosti.

Konzola se može koristiti za evidentiranje informacija kao dio procesa razvoja JavaScripta. Konzola vam takođe omogućava interakciju sa web stranicom izvršavanjem JavaScript izraza u kontekstu stranice. U osnovi, konzola pruža mogućnost pisanja JavaScript koda i manipulisanja njime po potrebi.

Ovaj vodič će vas naučiti kako koristiti JavaScript konzolu u vašem pretraživaču i upoznati vas sa drugim ugrađenim razvojnim alatima koji bi vam mogli biti korisni.

Rad sa JavaScript konzolom u pretraživaču

Većina modernih web pretraživača koji podržavaju HTML i XHTML podrazumevano omogućavaju pristup konzoli za programere, gde možete da radite sa JavaScript-om u interfejsu nalik terminalnoj ljusci. U ovom odjeljku ćete naučiti kako pristupiti konzoli u Firefoxu i Chromeu.

Firefox pretraživač

Ovi alati vam omogućavaju da pregledate i uređujete DOM elemente, kao i da pretražujete HTML objekte povezane sa određenom stranicom. DOM može naznačiti da li dio teksta ili slika ima ID atribut i može odrediti vrijednost tog atributa.

Dodatno, na bočnoj traci ili ispod DOM panela, možete pronaći CSS stilove koji se koriste u HTML dokumentu ili listi stilova.

Da biste uredili DOM u realnom vremenu, dvaput kliknite na odabrani element. Na primjer, možete pokušati okrenuti oznaku

v

.

Ponovo, nakon osvježavanja, stranica će se vratiti na prethodni izgled.

Mreža kartica

Kartica Mreža vam omogućava praćenje i snimanje mrežnih zahtjeva. Ova kartica prikazuje mrežne zahtjeve pretraživača, uključujući zahtjeve za učitavanje stranice, vrijeme potrebno za posluživanje zahtjeva i detalje o svakom od njih. Ovi podaci se mogu koristiti za optimizaciju performansi učitavanja stranice i upite za otklanjanje grešaka.

Karticu Mreža možete koristiti u kombinaciji sa JavaScript konzolom. Na primjer, možete započeti otklanjanje grešaka na stranici pomoću konzole, a zatim otvoriti karticu Mreža i pogledati mrežnu aktivnost bez ponovnog učitavanja stranice.

Responsivan dizajn

Responzivne web stranice brzo prilagođavaju svoj izgled i dojam na različitim uređajima: mobilnim telefonima, tabletima, desktopima i laptopima. Veličina ekrana, gustina piksela i odziv na dodir su faktori koje treba uzeti u obzir pri dizajniranju responzivnih web stranica. Također je važno uzeti u obzir principe responzivnog dizajna kako bi web stranica bila dostupna i efikasna, bez obzira na uređaju na kojem je otvorena.

Moderni pretraživači (uključujući Firefox i Chrome) pružaju modele za pridržavanje principa responzivnog dizajna pri razvoju web stranica i aplikacija. Ovi modeli oponašaju ponašanje određenog uređaja, što vam omogućava da testirate i analizirate sve funkcije stranice.

Više o tome možete pročitati u vodičima za preglednik:

  • Responzivni način dizajna u Firefoxu

Zaključak

Ovaj vodič pruža brzi pregled rada sa JavaScript konzolom u modernim web pretraživačima. Ovdje također možete pronaći informacije o drugim korisnim razvojnim alatima.

Ako ste ljubitelj kompjuterskih igrica, onda ste najvjerovatnije čuli da postoji određena konzola za programere. Ali šta je to? Kako ga koristiti? Ispostavilo se da ne postoji samo u kompjuterskim igricama: na primjer, može se naći u svakom internet pretraživaču. I može biti nevjerovatno korisna ne samo za programere kojima je prvobitno bila namijenjena. U ovom članku ćete naučiti, kao programer, šta možete učiniti s njim, kao i koje prednosti može donijeti igračima.

Šta je to?

Dakle, prije svega, naravno, vrijedi razgovarati o tome šta je konzola za programere. To je namjenski alat za programere softvera, odnosno. Kada pozovete takvu konzolu, imate priliku da unesete određene komande koje uveliko proširuju vaše mogućnosti. Stoga, da biste ga pravilno koristili, morate znati tačno kako ga pozvati, kako ga koristiti, kao i koje naredbe se tu mogu napisati i koje radnje izvršiti. Na prvi pogled može izgledati da je konzola za programere prilično jednostavan alat za korištenje, ali u stvarnosti nije. Trebat će vam puno vježbe da savladate konzolu i brzo dobijete željene rezultate. Ali šta bi trebao biti rezultat?

Vrijeme je da razgovaramo o tome zašto uopće postoji konzola za programere. Njegov glavni cilj je otklanjanje grešaka u softveru koji je kreirao programer. To znači da pomoću ove konzole možete pronaći greške u programu i popraviti ih, kao i natjerati program da radi ono što želite da provjeri apsolutno sve njegove aspekte prije nego što ga pustite u prodaju. Shodno tome, ova konzola igra veoma važnu ulogu u radu softverskog inženjera.

Najčešće možete naići na takvu konzolu u kompjuterskim igrama i internet preglednicima, a o njima će biti riječi kasnije u našem članku. Prvo ćete naučiti kako otvoriti konzolu za programere u internet pretraživaču i shvatiti šta vam ona može dati, a zatim ćete shvatiti koliko je važno biti u kompjuterskoj igrici.

Kako da otvorim konzolu u pretraživaču?

Naravno, radujete se trenutku kada ćete moći da saznate zašto vam je potrebna ova konzola u internet pretraživaču koji svakodnevno koristite, ali prvo treba da proučite kako se tačno otvara. Ispostavilo se da je dostupan u svim pretraživačima i da se skoro svuda otvara isto. To se radi ili korištenjem kombinacije tipki Ctrl, Shift i I, ili pritiskom samo tipke F12. Trebalo bi da pokušate sami da otvorite konzolu, a kada uspete, možete preći na dalje čitanje članka.

Šta daje konzola pretraživača?

Kada pozovete konzolu pretraživača na ekran, u početku ćete se možda iznenaditi svime što vidite. Poenta je da je konzola veoma multifunkcionalni alat i da će vam biti ponuđen širok izbor funkcija. Na primjer, možete vidjeti cijeli kod stranice, pogledati svaki element, pogledati njegove stilove, pa čak i JavaScript koji se koristi za svaki od elemenata koji vas zanimaju. Svaki web developer koji je kreirao web stranice barem nekoliko mjeseci zna za takvu konzolu i aktivno je koristi, jer tamo možete čak i pronaći greške u kodu i pokušati ih popraviti. Alternativno, možete pokušati promijeniti stilove i sadržaj i vidjeti kako to izgleda prije nego što napravite bilo kakve konačne promjene. Međutim, ova konzola može biti korisna za obične korisnike zbog svoje svestranosti, ali to se ne događa tako često. U kompjuterskim igrama, konzola programera može vam biti korisna mnogo češće. "The Witcher 3", "Minecraft", "Contra" i mnoge druge popularne igre imaju konzole koje možete koristiti, a o tome će biti riječi u nastavku.

Konzola u kompjuterskim igrama

Svi znaju za postojanje varalica u mnogim kompjuterskim igrama u koje možete unijeti da biste dobili pristupačnost. Zašto sada razmišljati o varanju? Činjenica je da u nekim slučajevima ulogu varalica igra konzola programera, jer vam otvara nove mogućnosti koje sama igra ne pruža. Ali kako takva konzola završava u igrama? Kao u svakom softveru! Uostalom, igre su i programi, programeri su ih kreirali na isti način, koristeći sve alate koji su im dostupni. Tako su koristili konzolu da testiraju sve funkcije i karakteristike igre prije nego što su objavili da je rad na njoj završen. U nekim slučajevima programeri ostavljaju konzolu u igri kao bonus, u drugim joj uskraćuju pristup kako igrači ne bi koristili napredne funkcije. O oba slučaja biće reči kasnije.

Korištenje konzole u igricama

Jedan od najjasnijih primjera kompjuterske igre koja ima direktan pristup konzoli programera je Contra. Ovaj timski pucač danas je uzoran primjer u svom žanru. A uz pomoć konzole ovdje možete promijeniti boju, veličinu i oblik križa, dodati botove i promijeniti mnoge druge funkcije. Neki od njih su svuda dozvoljeni, drugi su zabranjeni, tako da ih možete koristiti samo ako kreirate igru ​​i aktivirate korištenje vara putem konzole. Konzola programera radi na približno isti način u Minecraft-u i mnogim drugim popularnim igrama.

Modifikacije

Međutim, ne pružaju sve igre programerima pristup konzoli za programere. "The Witcher (1.31 verzija) 3" je najjasniji primjer kako su programeri igre, koristeći funkcije ovog alata za testiranje i otklanjanje grešaka u igri, potpuno zatvorili pristup njoj. Srećom, bilo je ljudi koji su uspjeli vratiti ovaj pristup i objavili posebnu modifikaciju, nakon preuzimanja i instaliranja na svoje računalo, možete koristiti konzolu programera, što će značajno proširiti vaše mogućnosti.

Kako mogu koristiti konzolu za programere da pretvorim Google Chrome u nešto poput uređivača teksta? Koja je poenta u tome dobija ikonu koja je mnogima poznata iz jQueryja $ ? Kako izvesti skup vrijednosti na konzolu u obliku sasvim pristojne tablice? Ako vam odgovori na ova pitanja ne padaju odmah na pamet, onda tab Konzola iz Chrome alata za razvojne programere još vam se nije otkrio u svom svom sjaju.

Na prvi pogled imamo pred sobom sasvim običnu JavaScript konzolu, koja je pogodna samo za prikazivanje dnevnika odgovora servera ili promenljivih vrednosti u nju. Inače, koristio sam ga tako kada sam tek počeo da programiram. Međutim, s vremenom sam stekao iskustvo, malo učio i neočekivano otkrio da Chrome konzola može puno stvari za koje nisam znao. Želim vam reći o tome danas. Da, ako sada ne čitate na mobilnom telefonu, možete odmah isprobati sve.

1. Odabir DOM elemenata

Ako ste upoznati sa jQueryjem, nije na meni da vam govorim o važnosti konstrukcija kao što su $ ('. Klasa') i $ ('Id')... Za one koji nisu upoznati, objasnit ću da vam omogućavaju da odaberete DOM elemente tako što ćete specificirati klase i ID-ove koji su im dodijeljeni. Konzola za programere ima sličnu funkcionalnost. Ovdje "$", međutim, nema nikakve veze sa jQueryjem, iako u suštini radi istu stvar. Ovo je pseudonim za funkciju document.querySelector ().

Pogledajte komande $ ('TagName'), $ ('. Klasa'), $ ('# Id') i $ (‘. Class #id’) vrati prvi DOM element koji odgovara selektoru. Istovremeno, ako je jQuery dostupan u dokumentu, njegov "$" će nadjačati ovu funkcionalnost konzole.

Ovdje je još jedna konstrukcija: $$ ... Njegova upotreba izgleda kao $$ ('tagName') ili $$ ('. Klasa')... Omogućava vam da odaberete sve DOM elemente koji odgovaraju selektoru i postavite ih u niz. Rad s njim se ne razlikuje od ostalih nizova. Da biste odabrali određenu stavku, možete je pozvati indeksom.

Na primjer, naredba $$ (‘. ClassName’)će nam dati niz svih elemenata stranice sa navedenim imenom klase kada ga pozovemo. Komande $$ (‘. ClassName’) i $$ (‘. ClassName’)će dati pristup, redom, prvom i drugom elementu rezultirajućeg niza.



Eksperimentisanje sa komandama $ i $$

2. Pretvaranje pretraživača u uređivač teksta

Jeste li se ikada uhvatili kako mislite da bi bilo lijepo urediti tekst debagovane web stranice direktno u pretraživaču? Ako jeste, onda će vam se svidjeti naredba prikazana ispod.

Document.body.contentEditable = istina

Nakon izvršenja u konzoli, dokument otvoren u pretraživaču može se uređivati ​​bez potrebe za traženjem željenog fragmenta u HTML kodu.

3. Pronalaženje rukovatelja događaja vezanih za element

Dok otklanjate greške, možda ćete želeti da pronađete rukovaoce događajima koji su prikačeni elementima. To je vrlo lako učiniti pomoću konzole. Dovoljno je koristiti sljedeću naredbu:

GetEventListeners ($ ('selektor'))

Kao rezultat njegovog izvršenja, izdat će se niz objekata koji sadrži listu događaja na koje element može reagirati.



Obrađivači događaja

Da biste pronašli rukovaoca za određeni događaj, možete koristiti sljedeću konstrukciju:

GetEventListeners ($ ('selektor')). EventName.listener

Ova naredba će prikazati kod funkcije rukovatelja događajima. Evo eventName Je niz koji sadrži sve događaje određenog tipa. Na primjer, u praksi to može izgledati ovako:

GetEventListeners ($ ('# ime')). Click.listener

Kao rezultat, dobit ćemo kod funkcije povezane s događajem kliknite element sa id ime.

4. Praćenje događaja

Ako želite da posmatrate pojavu događaja vezanih za određeni DOM element, konzola vam može pomoći u tome. Evo nekoliko naredbi koje možete koristiti za praćenje događaja.

  • Zapovjedi monitorEvents ($ ('selektor')) omogućava vam da nadgledate sve događaje povezane sa elementom koji selektor odgovara. Kada dođe do događaja, unos se vrši u konzoli. Na primjer, naredba monitorEvents ($ ('# ime'))će omogućiti evidentiranje svih događaja povezanih s elementom čiji je identifikator - ime.
  • Zapovjedi monitorEvents ($ ('selektor'), 'eventName') slično prethodnom, ali cilja na određeni događaj. Ovdje se, pored selektora elemenata, funkciji prenosi i naziv događaja. Takva komanda će prikazati informacije o pojavi jednog događaja na konzoli. Na primjer, naredba monitorEvents ($ ('# ime'), 'klik')će prikazati informacije samo po događaju kliknite element sa id ime.
  • Zapovjedi monitorEvents ($ ('selektor'), ['eventName1', 'eventName3",….]) omogućava praćenje nekoliko odabranih događaja. Ovdje se niz nizova prosljeđuje funkciji, koja sadrži imena događaja. Na primjer, naredba poput ove: monitorEvents ($ ('# ime'), ['klik', 'fokus'])će ispisati informacije o događaju na konzoli kliknite i fokus za element sa id ime.
  • Zapovjedi unmonitorEvents ($ ('selektor')) omogućava vam da zaustavite praćenje i evidentiranje događaja u konzoli.

5. Mjerenje vremena izvršenja dijela koda

Funkcija obrasca dostupna je u Chrome konzoli console.time ('labelName') koji uzima oznaku kao argument i pokreće tajmer. Druga funkcija, console.timeEnd ('labelName'), zaustavlja tajmer kojem je dodijeljena oznaka koja mu je proslijeđena. Evo primjera korištenja ovih funkcija:

Console.time ("myTime"); // Pokreće tajmer s oznakom myTime console.timeEnd ("myTime"); // Zaustavlja tajmer označen kao myTime // Izlaz: myTime: 123,00 ms

Gornji primjer vam omogućava da znate vrijeme između pokretanja i zaustavljanja tajmera. Isto možete učiniti unutar JavaScript programa i pronaći vrijeme izvršenja dijela koda.

Recimo da moram shvatiti trajanje petlje. Možete to učiniti ovako:

Console.time ("myTime"); // Pokreće tajmer s oznakom myTime for (var i = 0; i< 100000; i++){ 2+4+5; } console.timeEnd("mytime"); // Останавливает таймер с меткой myTime //Вывод - myTime:12345.00 ms

6. Prikaz vrijednosti varijabli u obliku tabela

Pretpostavimo da imamo niz objekata poput ovog:

Var myArray = [(a: 1, b: 2, c: 3), (a: 1, b: 2, c: 3, d: 4), (k: 11, f: 22), (a: 1 , b: 2, c: 3)]

Ako ga prikažete u konzoli, dobićete hijerarhijsku strukturu u obliku, zapravo, niz objekata. Ovo je korisna karakteristika, grane strukture se mogu proširiti gledanjem sadržaja objekata. Međutim, s ovim pristupom, teško je razumjeti, na primjer, kako su svojstva sličnih elemenata povezana. Kako bi rad s takvim podacima bio praktičniji, oni se mogu pretvoriti u tabelarni oblik. Da biste to učinili, koristite sljedeću naredbu:

Console.table (variableName)

Omogućava vam da prikažete varijablu i sva njena svojstva u obliku tabele. Ovako to izgleda.



Prikaz niza objekata kao tabela

7. Pogledajte šifru artikla

Možete brzo skočiti na šifru stavke sa konzole koristeći sljedeće naredbe:

  • Zapovjedi pregledati ($ ('selektor')) omogućava vam da otvorite kod elementa koji odgovara selektoru na panelu Elementi Google Chrome alati za programere. Na primjer, naredba pregledati ($ ('# ime'))će vam omogućiti da vidite kod elementa sa id ime... Zapovjedi pregledati ($$ ('a'))će otvoriti kod za četvrti link koji je prisutan u DOM-u.
  • Pogledajte komande $0 , $1 , $2 omogućavaju vam da brzo skočite na nedavno pregledane stavke. Na primjer, $0 će otvoriti kod za posljednju pregledanu stavku, i tako dalje.

8. Popis svojstava elementa

Ako trebate pogledati listu svojstava elementa, konzola će vam pomoći i u tome. Evo naredbe poput ove:

Dir ($ ('selektor'))

Vraća objekt koji sadrži svojstva povezana sa navedenim DOM elementom. Kao iu drugim sličnim slučajevima, sadržaj ovog objekta može se istražiti gledanjem njegove strukture stabla.

9. Pozivanje posljednjeg primljenog rezultata

Konzola se može koristiti kao kalkulator, što svi vjerovatno znaju. Ali činjenica da ima ugrađene alate koji vam omogućavaju da koristite rezultate prethodnih proračuna u naredbama malo je poznato. Po konstrukciji $_ možete dohvatiti rezultat prethodnog izraza iz memorije. Ovako to izgleda:

2 + 3 + 4 9 // - Rezultat sumiranja - 9 $ _ 9 // Prikazuje se posljednji primljeni rezultat $ _ * $ _ 81 // Pošto je zadnji rezultat 9, dobijamo 81 Math.sqrt ($ _) 9 // Kvadratni korijen iz posljednjeg rezultata, koji je bio $81 _ 9 // Opet dobijamo 9 - rezultat prethodnog izračuna

10. Brisanje konzole i memorije

Ako trebate očistiti konzolu i memoriju, koristite ovu jednostavnu naredbu:

Nakon što pritisnete Enter, prazna konzola će biti spremna za nove eksperimente.
To je sve.

11, 12, 13, 14…

Iskreno govoreći, ovo nije sve. Pokazao sam samo neke od neočiglednih karakteristika Google Chrome konzole. Zapravo, ima ih mnogo više. Siguran sam da možete proširiti moju listu svojim nalazima.

Nadam se da vam je moja priča pomogla da naučite nešto korisno, što štedi vrijeme i korisno o Chrome konzoli, što vrijedi da postanete dio svakodnevnog arsenala web programera.

Top srodni članci