Svaki preglednik ima svoj razvojni alat je ono što mnogi jednostavno nazivaju "konzola", razmislite o konzoli Chrome preglednik. Ovako izgleda:

Zapravo, Konzola u pregledniku Chrome je alat s kojim možete ne samo pregledati sadržaj stranice koju preglednik prikazuje, već i postojeće greške(što testeri najčešće rade), ali je i puno lakše i brže ispravljati te greške (što programeri najčešće rade), mjeriti razne pokazatelje i manipulirati stranicom.

Kako otvoriti konzolu u pregledniku Chrome:

- tipka F12;

- istovremeno pritiskanje Tipke Ctrl+ Shift + I;

— RMB na elementu stranice –> Pregled koda;

- izbornik preglednika -> Dodatni alati–> Alati za razvojne programere.

Može se nalaziti pri dnu stranice ili sa strane, ili se može otkvačiti u zasebnom prozoru. Dakle, pogledajmo svaku karticu otvorene konzole zasebno.

Ukupno ima 8 kartica od kojih svaka prikazuje određene podatke:

1 – Elementi(sadrži sav html/css kod stranice i omogućuje odabir elemenata za istraživanje, kao i njihovo uređivanje)

2 – Konzola(prikazuje prisutnost/odsutnost grešaka/upozorenja u kodu)

3 – Izvori(omogućuje izvođenje operacija na kodu stranice)

4 – Mreža(prati vrijeme izvršenja određene zahtjeve i sami zahtjevi)

5 – Vremenska Crta(mjeri vrijeme učitavanja stranice)

6 – Profili(omogućuje vam stvaranje JavaScript, CPU profila)

7 – Resursi ( omogućuje pregled određenih spremljenih podataka)

8 – revizije(provjerava određene parametre)

Sada prođimo svaki od njih zasebno i detaljnije:

Ploča Elementi

Ploča Elementi prikazuje izgled stranice točno onako kako bi se prikazao u pregledniku. Možete vizualno promijeniti sadržaj stranice promjenom html/css koda na ploči elemenata. Kao što ste vjerojatno primijetili (ili možda niste), lijevi prozor prikazuje html dokument, a desni prozor prikazuje css. Izvođenjem jednostavnih manipulacija s podacima možete promijeniti sadržaj i dizajn otvorene stranice. Na primjer, možete promijeniti tekst u prozoru ako ga uredite u html tijelu, a također možete promijeniti font stranice promjenom njegove vrijednosti u css polju. Ali to neće spremiti unesene podatke, već će jednostavno pomoći u vizualnoj procjeni primijenjenih promjena. Osim toga, možete vidjeti kôd određenog elementa stranice. Da biste to učinili, desnom tipkom miša kliknite na njega i odaberite naredbu "View code".

Ploča Elements ima jednu vrlo zgodnu značajku. Možete vidjeti kako bi to izgledalo otvorena stranica na nekom uređaju s drugim proširenjem zaslona. Klikom na ikonu telefona lijevo od kartice Elements otvara se prozor u kojem možete mijenjati veličinu željenog zaslona te tako oponašati određeni uređaj i upravljati prikazom stranice na njemu. Ovako izgleda:

Kada kliknete gumb Odaberi model, pojavit će se padajući izbornik s veliki izbor uređaja. Odaberite ono što vam treba - i voila! Stranica se prikazuje kao da je uređaj. Na taj se način ploča Elements može koristiti ne samo za pregled ili uređivanje stranice, već i za oponašanje uređaja za prikaz. Sve je objedinjeno i dostupno u Chromeu!

Ploča Konzola

Najpopularnija kartica za testere, jer ovdje vidimo greške pronađene u kodu prilikom izvršavanja skripte. Ova ploča također prikazuje razne vrste upozorenja i preporuka (kao na gornjoj slici). Sve poruke prikazane na kartici mogu se filtrirati. Pogreška također prikazuje svoju lokaciju i klikom na nju bit ćete preusmjereni na karticu Izvori, gdje će se pogreška prikazati u općem dizajnu stranice.

Možete očistiti polje kartice Konzola (u slučaju da trebate izbrisati poruke o prethodnim pogreškama) klikom na ikonu prekriženog kruga. Možete filtrirati poruke u konzoli prema vrsti - pogreške, upozorenja, informacije, standardni izlaz, poruke programa za ispravljanje pogrešaka, ispravljeno - odabirom jedne od dostupne opcije konzole.

Ploča Izvori

U pravilu, ova kartica je mjesto gdje programeri otklanjaju pogreške koda. Ima 3 prozora (s lijeva na desno):

1. Zona izvorne datoteke. Sadrži sve datoteke povezane sa stranicom, uključujući JS/CSS.
2. Područje teksta. Sadrži tekst datoteka.
3. Zona informacija i kontrole.

U području izvornih datoteka odaberite neophodan element, u tekstualnoj zoni se izravno ispravljaju greške, au informacijskoj i kontrolnoj zoni možete pokrenuti/zaustaviti otklonjeni kod.

Ploča Mreža

Glavna funkcija ove kartice je snimanje mrežnog dnevnika. Omogućuje uvid u tražene i učitavane resurse u stvarnom vremenu. Možete identificirati koji se resursi učitavaju i obrađuju velika količina vremena kako bi naknadno znali gdje i na koji način se stranica može optimizirati.

Također je vrijedno napomenuti da je u ovoj kartici u Veliki način rada retke zahtjeva možete vidjeti zahtjeve koji su poslani poslužitelju, kao i odgovore koji dolaze s njega, njihov sadržaj i karakteristike.

Ploča izvedbe

Ova kartica se koristi ako je potrebno puni pregled potrošeno vrijeme. Na što je potrošeno, koliko je bilo potrebno za ovaj ili onaj proces. Ovdje se prikazuju apsolutno sve aktivnosti, uključujući učitavanje resursa i izvršavanje Javascripta.

Ova ploča omogućuje profiliranje vremena izvršavanja i upotrebe memorije web aplikacije ili stranice, čime pomaže razumjeti gdje se točno troši mnogo resursa i kako se kôd može optimizirati.

CPUprofiler pruža informacije o vremenu provedenom u izvršavanju Javascripta.

Heap profiler prikazuje raspodjelu memorije.

JavaScript profil detalji gdje je točno vrijeme potrošeno prilikom izvršavanja skripti.

Dizajniran za ispitivanje opterećenih elemenata. Omogućuje vam interakciju s HTML5 bazom podataka, lokalnom pohranom, kolačićima, AppCacheom itd. U ovoj kartici možete izbrisati kolačiće tako da otvorite ovu karticu i kliknete na ikonu prekriženog kruga

Ploča revizije

Ova ploča funkcionira kao analizator stranice dok se učitava. Kao rezultat revizije, čini se da su preporuke za optimiziranje učitavanja stranice i povećanje brzine odgovora. Primjeri metoda optimizacije mogu se vidjeti u prozoru ispod.

Sigurnosna ploča

Sigurnosna ploča prikazuje informacije o svakom zahtjevu i ističe one zbog kojih stranica ne prima željenu zelenu ikonu u statusu.

Osim toga, možete dobiti sljedeće informacije:

• o provjeri certifikata, je li stranica potvrdila svoju autentičnost TLS certifikatom;
• TLS veza, koja pokazuje koristi li vaša stranica moderne sigurne protokole;
• sigurnost učitanih sekundarnih izvora.

Zapravo, alati za programere (Konzola u pregledniku Chrome) su vrlo korisna stvar koja nama, testerima, često može dobro doći. Još više korisna informacija na web stranici https://developers.google.com/web/tools/chrome-devtools/

Ako vam je procjena učinkovitosti sadržaja na stranici aplikacije u trgovini mračna šuma, obratite pozornost na Google Play Konzola za razvojne programere. Reći ću vam kako raditi s ovim alatom.

Što je Google Play Developers Console?

Nakon što je apk datoteka vaše aplikacije spremna, trebate je dodati u trgovinu Googleove aplikacije Igra.

Broj novih korisnika nije jednak broju instalacija u istom razdoblju.

U izvješću su dostupna dva kriterija: podaci prema izvoru prometa i podaci prema zemlji. Izvješće možete generirati za dan, tjedan ili mjesec, ali nažalost ne možete proizvoljno odabrati razdoblje.

Izvješće se prikazuje u obliku lijevka.

1. Jedinstveni posjetitelji stranice aplikacije u trgovini.
2. Broj korisnika koji su instalirali aplikaciju nakon što su je pogledali.
3. Broj kupaca.
4. Stalni kupci.

Podaci se generiraju u obliku kohorte, odnosno izvješće za odabrano vremensko razdoblje obuhvatit će samo one korisnike koji su u tom razdoblju posjetili stranicu i instalirali aplikaciju. Što je kohortna analiza i zašto je važna Marketing istraživanje, napisali smo.

Indeks Trgovina igračaka- ovo su rezultati vašeg ASO-a, odnosno rezultati optimizacije stranice i njezinog indeksiranja u trgovini aplikacija.

U biti, to su jedinstveni korisnici koji su došli na stranicu vaše aplikacije kao rezultat pretraživanja ili pregledavanja aplikacija u Trgovini Play.

3. Odjeljak "Ocjene i recenzije"

Pododjeljak "Ocjene" je izvješće koje vam omogućuje da vidite dinamiku ocjena po danu, tjednu, mjesecu i procijenite kako su korisnici percipirali implementaciju nove značajke.

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

U ovom odjeljku Google sustav Play Developers Console dobrovoljno i prisilno traži od vas da nešto učinite i pokazuje vam što ste već učinili. Na primjer, dodajte snimke zaslona za tablete ako vaša aplikacija podržava takve uređaje.

5. Odjeljak "Podaci za Google Play"

Ovaj odjeljak nadopunjuje prethodno izvješće jer pokazuje što je prikazano na stranici trgovine - jezik, Kratki opis, Potpuni opis, ikona, grafički materijali.

Na Google stranica Igrajte, vrlo je poželjno dodati promotivni video, jer to utječe na privlačnost vaše stranice za trgovinu i korisnika.

zaključke

Google Play Developers Console - alat koji se može i treba koristiti za marketing Mobilna aplikacija. Nakon što shvatite Google Play Developers Console, razumjet ćete:

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

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

Prva ilustracija je fotografija Freddyja Fabricea iz projekta “The Renaissance Series”.

• Prijevod

Kako koristiti konzolu za razvojne programere za uključivanje Google Chrome u sličnosti uređivač teksta? Koje značenje ima ikona, mnogima poznata iz jQueryja? $ ? Kako mogu prikazati skup vrijednosti u konzoli, formatiran kao prilično pristojna tablica? Ako vam odgovori na ova pitanja ne padnu odmah na pamet, onda tab Konzola Chrome razvojnih alata još vam se nije otkrio u punom sjaju.

Na prvi pogled pred sobom imamo sasvim običnu JavaScript konzolu, koja je prikladna samo za prikaz dnevnika odgovora poslužitelja ili vrijednosti varijabli. Usput, tako sam ga koristio kad sam tek počeo programirati. Ipak, s vremenom sam stekao iskustvo, naučio malo više i neočekivano otkrio da Chrome konzola može puno toga o čemu nisam imao pojma. Želim razgovarati o ovome danas. Da, ako sada ne čitate na mobitelu, možete sve ovo isprobati odmah.

1. Odabir DOM elemenata

Naredbe obrasca $('tagName'), $('.class'), $('#id') I $('.class #id') vrati prvi DOM element koji odgovara selektoru. Štoviše, ako je jQuery dostupan u dokumentu, funkcija ove konzole nadjačat će njegov "$".

Postoji još jedan dizajn ovdje: $$ . Njegova uporaba izgleda $$('tagName') ili $$('.class'). Omogućuje vam odabir svih DOM elemenata koji odgovaraju selektoru i njihovo postavljanje u niz. Rad s njim ne razlikuje se od drugih polja. Za odabir određenog elementa možete mu pristupiti pomoću indeksa.

Na primjer, naredba $$('.className') pružit će nam niz svih elemenata stranice s imenom klase navedenim prilikom pozivanja. Timovi $$('.className') I $$('.className') dat će pristup prvom i drugom elementu rezultirajućeg niza.

Eksperimentiranje s naredbama $ I $$

2. Pretvorite preglednik u uređivač teksta

Document.body.contentEditable=true
Nakon izvođenja u konzoli, dokument otvoren u pregledniku moguće je uređivati ​​bez potrebe za pretraživanjem željeni fragment u HTML kodu.

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

GetEventListeners($('selector'))
Kao rezultat njegovog izvođenja proizvest će se niz objekata koji će sadržavati popis događaja na koje element može odgovoriti.

Rukovatelji događajima

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

GetEventListeners($('selector')).eventName.listener
Ova naredba će ispisati kod funkcije rukovatelja događajima. Ovdje eventName je niz koji sadrži sve događaje specifičan tip. Na primjer, u praksi to može izgledati ovako:

GetEventListeners($('#firstName')).click.listener
Kao rezultat toga, primit ćemo kod funkcije povezane s događajem klik element s id ime.

4. Praćenje događaja

• Tim monitorEvents($('selektor')) omogućuje organiziranje praćenja svih događaja povezanih s elementom kojem selektor odgovara. Kada se dogodi događaj, unosi se u konzolu. Na primjer, naredba monitorEvents($('#firstName')) omogućit će vam bilježenje svih događaja povezanih s elementom čiji je identifikator ime.
• Tim monitorEvents($('selektor'),'eventName') sličan prethodnom, ali je usmjeren na određeni događaj. Ovdje se uz selektor elementa funkciji prosljeđuje i naziv događaja. Ova naredba će vam omogućiti prikaz podataka o pojavi jednog događaja na konzoli. Na primjer, naredba monitorEvents($('#firstName'),'click') prikazat će informacije samo o događaju klik element s id ime.
• Tim monitorEvents($('selektor'),['eventName1','eventName3",….]) omogućuje vam praćenje više odabranih događaja. Ovdje se funkciji prosljeđuje niz znakova koji sadrži nazive događaja. Na primjer, ova naredba: monitorEvents($('#firstName'),['klik','fokus']) ispisat će informacije o događaju na konzolu klik I usredotočenost za element s id ime.
• Tim unmonitorEvents($('selektor')) omogućuje vam da zaustavite praćenje i bilježenje događaja u konzoli.

5. Mjerenje vremena izvršenja fragmenta koda

Console.time("myTime"); //Pokreće mjerač vremena s oznakom myTime console.timeEnd("myTime"); //Zaustavlja mjerač vremena s oznakom myTime //Izlaz: myTime:123.00 ms
Gornji primjer vam omogućuje da saznate vrijeme između pokretanja i zaustavljanja mjerača vremena. Istu stvar možete učiniti unutar JavaScript programa i pronaći vrijeme izvršenja dijela koda.

Recimo da trebam saznati trajanje petlje. Možete to učiniti ovako:

Console.time("myTime"); // Pokreće mjerač vremena 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 tablice

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, ispast će hijerarhijska struktura u obliku, zapravo, niza objekata. ovo - korisna prilika, grane strukture mogu se proširiti pregledom sadržaja objekata. Međutim, s ovim pristupom teško je razumjeti, na primjer, kako se odnose svojstva sličnih elemenata. Kako bi rad s takvim podacima bio praktičniji, oni se mogu pretvoriti u tablični prikaz. Da biste to učinili, koristite sljedeću naredbu:

Console.table(variableName)
Omogućuje prikaz varijable i svih njezinih svojstava u obliku tablice. Evo kako to izgleda.

Prikaz niza objekata kao tablice

7. Pregledajte šifru elementa

• Tim pregledaj($('selektor')) omogućuje vam otvaranje koda elementa koji odgovara selektoru na ploči Elementi alata Google programer Krom. Na primjer, naredba pregledaj($('#firstName')) omogućit će vam pregled koda elementa s identifikatorom ime. Tim pregledaj($$('a'))će otvoriti kod za četvrtu vezu koja je prisutna u DOM-u.
• Naredbe obrasca $0 , $1 , $2 Omogućuje brzu navigaciju do nedavno pregledanih stavki. Na primjer, $0 otvorit će kod posljednjeg pregledanog elementa, i tako dalje.

8. Prikaz popisa svojstava elementa

Dir($('selektor'))
Vraća objekt koji sadrži svojstva povezana s danim DOM element. Kao iu drugim sličnim slučajevima, sadržaj ovog objekta može se ispitati pregledom strukture stabla.

9. Pozivanje zadnjeg primljenog rezultata

2+3+4 9 //- Rezultat zbrajanja je 9 $_ 9 // Prikazuje se posljednji dobiveni rezultat $_ * $_ 81 // Budući da je zadnji rezultat 9, dobivamo 81 Math.sqrt($ _) 9 // Korijen od zadnjeg rezultata, koji je bio 81 $_ 9 // Opet dobivamo 9 - rezultat prethodni izračun

10. Čišćenje konzole i memorije

Čisto()
Nakon pritiska na Enter, čista konzola će biti spremna za nove eksperimente.
To je sve.

11, 12, 13, 14…