Igal brauseril on oma arendaja tööriist on see, mida paljud kutsuvad lihtsalt "konsooliks", peavad konsooli selles Chrome'i brauser. See näeb välja selline:

Tegelikult on Chrome'i brauseri konsool tööriist, mille abil saate mitte ainult vaadata brauseri kuvatava lehe sisu, vaid ka olemasolevad vead(mida testijad kõige sagedamini teevad), kuid palju lihtsam ja kiirem on ka neid vigu parandada (mida arendajad kõige sagedamini teevad), erinevaid näitajaid mõõta ja lehega manipuleerida.

Konsooli avamine Chrome'i brauseris:

- klahv F12;

- üheaegselt vajutades Ctrl klahvid+ Tõstuklahv + I;

— RMB leheelemendil –> Vaata koodi;

- brauseri menüü -> Täiendavad tööriistad–> Arendaja tööriistad.

See võib asuda lehe allosas või küljel või eraldada eraldi aknasse. Niisiis, vaatame avatud konsooli iga vahekaarti eraldi.

Kokku on sellel 8 vahekaarti, millest igaüks kuvab teatud andmeid:

1 – Elemendid(sisaldab kogu lehe html/css koodi ja võimaldab valida uurimiseks elemente, samuti neid redigeerida)

2 – konsool(näitab vigade/hoiatuste olemasolu/puudumist koodis)

3 – Allikad(võimaldab teha toiminguid lehe koodiga)

4 – Võrk(jälgib täitmise aega teatud taotlusi ja taotlused ise)

5 – Ajaskaala(mõõdab lehe laadimisaega)

6 – Profiilid(võimaldab luua JavaScripti, CPU profiile)

7 – Ressursid ( võimaldab vaadata teatud salvestatud andmeid)

8 – Auditid(kontrollib teatud parameetreid)

Nüüd vaatame igaüks neist eraldi ja üksikasjalikumalt:

Paneel Elemendid

Paneel Elements näitab lehe paigutust täpselt sellisena, nagu see brauseris renderdataks. Saate visuaalselt muuta saidi sisu, muutes elementide paneelil html/css koodi. Nagu te ilmselt märkasite (või võib-olla mitte), kuvatakse vasakpoolses aknas html-dokument ja paremas aknas css. Tehes andmetega lihtsaid manipuleerimisi, saate muuta avatud lehe sisu ja kujundust. Näiteks saate muuta akna teksti, kui redigeerite seda HTML-i kehas, ja muuta ka lehe fonti, muutes selle väärtust css-väljal. Kuid see ei salvesta sisestatud andmeid, vaid aitab lihtsalt rakendatud muudatusi visuaalselt hinnata. Lisaks saate vaadata konkreetse leheelemendi koodi. Selleks paremklõpsake sellel ja valige käsk "Kuva kood".

Paneelil Elements on üks väga lahe funktsioon. Saab näha, kuidas see välja näeb avatud leht mõnes erineva ekraanilaiendiga seadmes. Klõpsates vahekaardist Elements vasakul asuval telefoniikoonil, kuvatakse aken, kus saate muuta soovitud ekraani suurust, emuleerides nii konkreetset seadet ja juhtida sellel oleva lehe kuvamist. See näeb välja selline:

Kui klõpsate nupul Vali mudel, kuvatakse rippmenüü koos tohutu valik seadmeid. Valige, mida vajate – ja voila! Leht kuvatakse nii, nagu oleks see seade. Nii saab paneeli Elements kasutada mitte ainult lehe vaatamiseks või redigeerimiseks, vaid ka kuvaseadmete emuleerimiseks. Kõik on ühtne ja Chrome'is saadaval!

Paneel konsool

Testijate kõige populaarsem vahekaart, kuna siin näeme skripti täitmisel koodis leitud vigu. Sellel paneelil kuvatakse ka erinevad hoiatused ja soovitused (nagu ülaloleval pildil). Kõiki vahekaardil kuvatavaid sõnumeid saab filtreerida. Viga kuvab ka oma asukoha ning sellele klõpsates suunatakse vahekaardile Allikad, kus viga kuvatakse lehe üldkujunduses.

Saate tühjendada vahekaardi Konsool välja (juhuks, kui peate kustutama varasemate vigade kohta teateid), klõpsates läbikriipsutatud ringiikoonil. Saate konsoolis sõnumeid filtreerida tüübi järgi – vead, hoiatused, teave, standardväljund, siluri sõnumid, parandatud – valides ühe saadaolevad valikud konsoolid.

Paneel Allikad

Reeglina siluvad programmeerijad koodi sellel vahekaardil. Sellel on 3 akent (vasakult paremale):

1. Tsoon lähtefailid. See sisaldab kõiki lehega ühendatud faile, sealhulgas JS/CSS.
2. Tekstiala. See sisaldab failide teksti.
3. Info- ja juhtimistsoon.

Valige lähtefailide alal vajalik element, tekstitsoonis silutakse otse ning info- ja juhtimistsoonis saab silumiskoodi käivitada/peatada.

Paneel Võrk

Selle vahekaardi põhifunktsioon on võrgulogi salvestamine. See annab reaalajas ülevaate taotletavatest ja laaditavatest ressurssidest. Saate tuvastada, milliseid ressursse laaditakse ja töödeldakse rohkem aega, et hiljem teada, kus ja kuidas saab lehte optimeerida.

Samuti väärib märkimist, et see on sellel vahekaardil Suur režiim päringu ridadel saab vaadata nii serverisse saadetavaid päringuid kui ka sealt tulevaid vastuseid, nende sisu ja omadusi.

Jõudluspaneel

Seda vahekaarti kasutatakse vajadusel täielik ülevaade kulutatud aeg. Millele seda kulutati, kui palju selle või teise protsessi jaoks kulus. Siin kuvatakse absoluutselt kogu tegevus, sealhulgas ressursside laadimine ja Javascripti käivitamine.

See paneel võimaldab profileerida veebirakenduse või lehe täitmisaega ja mälukasutust, aidates nii mõista, kuhu täpselt kulub palju ressursse ja kuidas saab koodi optimeerida.

CPUprofileerija annab teavet Javascripti täitmisele kulunud aja kohta.

Kuhjaprofileerija kuvab mälujaotuse.

JavaScripti profiilüksikasjad, kus täpselt skriptide täitmise aeg kulus.

Mõeldud koormatud elementide uurimiseks. Võimaldab teil suhelda HTML5 andmebaasi, kohaliku salvestusruumi, küpsiste, rakenduste vahemälu jne. Sellel vahekaardil saate küpsiseid kustutada, avades selle vahekaardi ja klõpsates läbikriipsutatud ringi ikooni

Paneel Auditid

See paneel toimib laadimise ajal leheanalüsaatorina. Auditi tulemusena ilmuvad soovitused lehe laadimise optimeerimiseks ja reageerimiskiiruse suurendamiseks. Optimeerimismeetodite näiteid näete allolevas aknas.

Turvapaneel

Turvapaneel näitab teavet iga päringu kohta ja tõstab esile need, mille tõttu sait ei saa olekus ihaldatud rohelist ikooni.

Lisaks saate järgmise teabe:

• sertifikaadi kontrollimise kohta, kas sait on kinnitanud selle autentsust TLS-sertifikaadiga;
• TLS-ühendus, mis näitab, kas teie sait kasutab kaasaegseid turvaprotokolle;
• laetud sekundaarsete allikate turvalisus.

Tegelikult on arendaja tööriistad (Chrome'i brauseris konsool) väga kasulik asi, mis võib meile, testijatele, sageli kasuks tulla. Veelgi enam kasulikku teavet veebisaidil https://developers.google.com/web/tools/chrome-devtools/

Kui poes rakenduse lehe sisu tõhususe hindamine on sinu jaoks tume mets, pööra tähelepanu Google Play Arendajate konsool. Ma ütlen teile, kuidas selle tööriistaga töötada.

Mis on Google Play Developers Console?

Kui teie rakenduse apk-fail on valmis, peate selle poodi lisama Google'i rakendused Mängi.

Uute kasutajate arv ei võrdu sama perioodi installatsioonide arvuga.

Aruandes on saadaval kaks kriteeriumi: andmed liiklusallikate kaupa ja andmed riigiti. Saate koostada aruande päeva, nädala või kuu kohta, kuid kahjuks ei saa te perioodi valida suvaliselt.

Aruanne esitatakse lehtri kujul.

1. Rakenduse lehe unikaalsed külastajad poes.
2. Kasutajate arv, kes installisid rakenduse pärast selle vaatamist.
3. Ostjate arv.
4. Korduvad kliendid.

Andmed genereeritakse kohordi kujul, see tähendab, et valitud ajavahemiku aruanne hõlmab ainult neid kasutajaid, kes selle aja jooksul lehte külastasid ja rakenduse installisid. Mis on kohordianalüüs ja miks see on oluline turundusuuringud, kirjutasime.

Näitaja Play pood- need on teie ASO tulemused, st lehe optimeerimise ja selle rakenduste poes indekseerimise tulemused.

Põhimõtteliselt on need unikaalsed kasutajad, kes jõudsid teie rakenduse lehele Play poes rakenduste otsimise või sirvimise tulemusena.

3. Jaotis "Hinnangud ja arvustused"

Alamjaotis "Hinnangud" on aruanne, mis võimaldab teil näha reitingute dünaamikat päeva, nädala, kuu lõikes ja hinnata, kuidas kasutajad uue funktsiooni kasutuselevõttu tajusid.

“Arvustused” on teie mainehalduri, SMM-spetsialisti või mõne muu isiku tegevusvaldkond, kes vastutab suhtluse eest kasutajatega, kes kirjutavad teile kaupluses arvustustesse taotlusi/kaebusi.

Selles jaotises Google'i süsteem Play Developers Console palub teil vabatahtlikult ja kohustuslikult midagi teha ja näitab teile, mida olete juba teinud. Lisage näiteks tahvelarvutite ekraanipilte, kui teie rakendus toetab selliseid seadmeid.

5. Jaotis „Google Play andmed”

See jaotis täiendab eelmist aruannet, kuna see näitab, mida poe lehel kuvatakse – keel, lühikirjeldus, täielik kirjeldus, ikoon, graafilised materjalid.

Sees Google'i leht Mängi, on väga soovitatav lisada reklaamvideo, kuna see mõjutab teie lehe atraktiivsust poe ja kasutaja jaoks.

Järeldused

Google Play Developers Console – tööriist, mida saab ja tuleks kasutada turunduseks mobiilirakendus. Kui mõistate Google Play arendajakonsooli, mõistate:

• kuidas pood teie rakendust tajub;
• kuidas pood näitab teie sisu tõhusust rakenduse lehel.

Sisuliselt on see oluline lüli tootearendaja ja selle kasutajate vahel.

Esimene illustratsioon on Freddy Fabrise foto projektist “The Renaissance Series”.

• Tõlge

Kuidas kasutada pööramiseks arendajakonsooli Google Chrome sarnasuses tekstiredaktor? Millise tähenduse omandab paljudele jQueryst tuttav ikoon? $ ? Kuidas ma saan konsoolis kuvada väärtuste komplekti, mis on vormindatud päris korraliku tabelina? Kui vastused neile küsimustele kohe meelde ei tule, siis vahekaart konsool Chrome'i arendajatööriistadest pole end teile veel täies hiilguses ilmutanud.

Meie ees on esmapilgul täiesti tavaline JavaScripti konsool, mis sobib vaid serveri vastuste logide või muutujate väärtuste kuvamiseks. Muide, just nii kasutasin seda programmeerimisega alustades. Aja jooksul sain aga kogemusi, õppisin veidi juurde ja avastasin ootamatult, et Chrome'i konsool suudab teha palju asju, millest mul aimugi polnud. Ma tahan sellest täna rääkida. Jah, kui te praegu mobiiltelefoniga ei loe, võite seda kõike kohe proovida.

1. DOM-i elementide valimine

Vormi käsud $('tagName'), $('.class'), $('#id') Ja $('.class #id') tagastab esimese valijale vastava DOM-elemendi. Lisaks, kui jQuery on dokumendis saadaval, alistab see konsooli funktsioon selle "$".

Siin on veel üks kujundus: $$ . Selle kasutamine näeb välja selline $$('tagName') või $$('.klass'). See võimaldab teil valida kõik valijale vastavad DOM-i elemendid ja paigutada need massiivi. Sellega töötamine ei erine teistest massiividest. Konkreetse elemendi valimiseks pääsete sellele juurde indeksi kaudu.

Näiteks käsk $$('.className') annab meile massiivi kõigist leheelementidest koos selle kutsumisel määratud klassinimega. Meeskonnad $$('.className') Ja $$('.className')  annab juurdepääsu tulemuseks oleva massiivi esimesele ja teisele elemendile.

Katsetamine käskudega $ Ja $$

2. Muutke brauser tekstiredaktoriks

Document.body.contentEditable=true
Pärast selle käivitamist konsoolis saab brauseris avatud dokumenti redigeerida ilma otsinguid tegemata soovitud fragment HTML-koodis.

3. Elemendiga seotud sündmuste käitlejate leidmine

GetEventListeners($('selector'))
Selle täitmise tulemusena luuakse objektide massiiv, mis sisaldab sündmuste loendit, millele element võib reageerida.

Sündmuste juhid

Konkreetse sündmuse käsitleja leidmiseks võite kasutada järgmist konstruktsiooni:

GetEventListeners($('selector')).eventName.listener
See käsk prindib sündmuste käitleja funktsiooni koodi. Siin sündmuse nimi on massiiv, mis sisaldab kõiki sündmusi konkreetne tüüp. Näiteks praktikas võib see välja näha järgmine:

GetEventListeners($('#firstName')).click.listener
Selle tulemusena saame sündmusega seotud funktsiooni koodi klõpsa element ID-ga eesnimi.

4. Sündmuste jälgimine

• Meeskond monitorEvents($('valija')) võimaldab korraldada kõikide sündmuste jälgimist, mis on seotud elemendiga, millele valija vastab. Sündmuse toimumisel tehakse konsooli kanne. Näiteks käsk monitorEvents($('#eesnimi')) võimaldab logida kõik sündmused, mis on seotud elemendiga, mille identifikaator on eesnimi.
• Meeskond monitorEvents($('valija'),'sündmuse nimi') sarnane eelmisega, kuid see on suunatud konkreetsele sündmusele. Siin edastatakse funktsioonile lisaks elemendivalijale ka sündmuse nimi. See käsk võimaldab kuvada konsoolis andmeid ühe sündmuse toimumise kohta. Näiteks käsk monitorEvents($('#eesnimi'),'klõps') kuvab teavet ainult sündmuse kohta klõpsa element ID-ga eesnimi.
• Meeskond monitorEvents($('valija'),['sündmuse nimi1','sündmuse nimi3",….]) võimaldab jälgida mitut valitud sündmust. Siin edastatakse funktsioonile stringimassiiv, mis sisaldab sündmuste nimesid. Näiteks see käsk: monitorEvents($('#eesnimi'),['klikk','fookus']) väljastab konsooli sündmuste teabe klõpsa Ja keskenduda ID-ga elemendi jaoks eesnimi.
• Meeskond unmonitorEvents($('selector')) võimaldab peatada sündmuste jälgimise ja logimise konsoolis.

5. Koodifragmendi täitmisaja mõõtmine

Console.time("minuAeg"); //Käivitab taimeri nimega myTime console.timeEnd("myTime"); //Peatab taimeri sildiga myTime //Väljund: myTime:123.00 ms
Ülaltoodud näide võimaldab teil teada saada aja taimeri käivitamise ja peatamise vahel. Sama saate teha JavaScripti programmis ja leida koodilõigu täitmisaja.

Oletame, et pean välja selgitama tsükli kestuse. Saate seda teha järgmiselt:

Console.time("minuAeg"); // Käivitab taimeri nimega myTime for(var i=0; i< 100000; i++){ 2+4+5; } console.timeEnd("mytime"); // Останавливает таймер с меткой myTime //Вывод - myTime:12345.00 ms

6. Muutujate väärtuste kuvamine tabelite kujul

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)]
Kui kuvate selle konsoolis, selgub hierarhiline struktuur tegelikult objektide massiivi kujul. see - kasulik võimalus, saab struktuuri harusid laiendada, vaadates objektide sisu. Selle lähenemisviisi puhul on aga raske mõista näiteks seda, kuidas sarnaste elementide omadused seostuvad. Selliste andmetega töötamise mugavamaks muutmiseks saab need teisendada tabelivaade. Selleks kasutage järgmist käsku:

Console.table(muutujaNimi)
See võimaldab kuvada muutujat ja kõiki selle omadusi tabeli kujul. See näeb välja järgmiselt.

Objektide massiivi kuvamine tabelina

7. Vaadake elemendi koodi

• Meeskond kontrollima($('valija')) võimaldab avada paneelil valijale vastava elemendi koodi Elemendid tööriistad Google'i arendaja Chrome. Näiteks käsk kontrollima ($('#eesnimi')) võimaldab vaadata elemendi koodi koos identifikaatoriga eesnimi. Meeskond kontrollima ($$('a')) avab DOM-is oleva neljanda lingi koodi.
• Vormi käsud $0 , $1 , $2 Võimaldab kiiresti navigeerida hiljuti vaadatud üksuste juurde. Näiteks $0 avab viimati vaadatud elemendi koodi ja nii edasi.

8. Elemendi omaduste loendi kuvamine

Dir($('valija'))
See tagastab objekti, mis sisaldab antud omadusega seotud omadusi DOM element. Nagu ka teistel sarnastel juhtudel, saab selle objekti sisu uurida, vaadates selle puustruktuuri.

9. Viimati saadud tulemuse helistamine

2+3+4 9 //- Summeerimise tulemus on 9 $_ 9 // Kuvatakse viimane saadud tulemus $_ * $_ 81 // Kuna viimane tulemus on 9, saame 81 Math.sqrt($ _) 9 // Ruutjuur viimasest tulemusest, mis oli 81 $_ 9 // Jälle saame 9 - tulemus eelmine arvutus

10. Konsooli ja mälu puhastamine

Tühjenda ()
Pärast sisestusklahvi vajutamist on puhas konsool uuteks katseteks valmis.
See on kõik.

11, 12, 13, 14…