Aplikacija za učenje angleške abecede za otroke. Prenesite brezplačne aplikacije za učenje angleščine za Android

. Toda v resnici je napisan z uporabo JavaScripta, katerega kodo lahko vidimo v zgornjem desnem kotu posnetka zaslona, ​​kjer je odprta koda strani.

S primerjavo teh razlik lahko preverite, ali indeksiranje deluje pravilno. Če želite to narediti, lahko:

• ogled različice strani, shranjene v Googlovem predpomnilniku;
• preverite, ali je besedilo prikazano v Googlovih rezultatih iskanja;
• uporabite »Google Site Scanner« v Search Console itd.

2. Oglejte si vsebino, skrito s CSS

Google ne šteje besedilne vsebine, ki je vključena v HTML strani, vendar je uporabniku skrita pod zavihki, elementi menija ali povezavami »klikni za branje«.

Eden najpogostejših načinov za skrivanje besedila je uporaba lastnosti CSS "display:none" ali "visibility:hidden". Zato je priporočljivo preveriti, ali obstajajo pomembna informacija, ki je s temi sredstvi skrita.

To lahko storite s funkcijo "Iskanje" v orodni vrstici za razvijalce. Do njega lahko dostopate z bližnjico na tipkovnici: Ctrl + Shift + F (Windows) ali Cmd + Opt + F (Mac), ko je plošča DevTools odprta.

Ta funkcija vam omogoča iskanje ne le po datoteki odprte strani, ampak tudi po vseh uporabljenih virih, vključno s CSS in JavaScript.

Če želite najti skrito besedilo, morate v iskalno vrstico vnesti zahtevane lastnosti. V tem primeru "hidden" ali "display:none". Tako lahko ugotovite, ali so vsebovane v kodi strani.

Kliknite na rezultat iskanja, da vidite celotno kodo, okoliško posest, ki ga iščete. Preglejte to kodo, da ugotovite, katero besedilo je skrito. Če gre za pomembno vsebino, preverite, ali jo Google upošteva.

3. Preverjanje nadomestnega besedila slik

Poleg preverjanja osnovnih elementov besedilne vsebine zavihek "Elementi" Ogledali si boste lahko tudi opis slik - besedilo, ki se nahaja v atributu alt. Desni klik na želeno sliko in izberite "Ogled kode":

4. Preverjanje konfiguracije oznake

Chrome DevTools lahko uporabite tudi za preverjanje tehnične konfiguracije strani. Na primer oznake in atributi. Če želite to narediti, morate vstopiti v vrstico "Iskanje" potrebne oznake in preverite, kako so implementirane.

Z orodji za razvijalce lahko preverite konfiguracijo oznak ne samo v bloku , temveč tudi v glavah HTTP. Če želite to narediti, pojdite na zavihek "omrežje" izberite želeno stran ali vir in preverite vsebino glave, vključno s prisotnostjo povezave rel=canonical v slikovni datoteki:

5. Oglejte si stanje HTTP v konfiguraciji glave

Pri preverjanju konfiguracije glav strani in virov na zavihku "omrežje" lahko si ogledate tudi status HTTP, preverite preusmeritve, ugotovite njihovo vrsto, poiščete stanja napak in omogočite druge konfiguracije (X-Robots-Tag, hreflang ali vary: user agent).

6. Preverite optimizacijo za mobilne naprave

Danes je optimizacija spletne strani za mobilne naprave sestavni del dela optimizacije za iskalnike. Mobilno konfiguracijo strani in vsebine lahko preverite z uporabo načina emulacije mobilne naprave v DevTools – « Način naprave". Če ga želite odpreti, morate klikniti ikono naprave v zgornjem desnem kotu plošče ali uporabiti bližnjico na tipkovnici: Command+Shift+M (Mac) ali Ctrl+Shift+M (Windows, Linux), ko je plošča odprto.

V načinu naprave lahko izberete odzivno vidno okno ali določeno napravo, na kateri želite preizkusiti stran. Če želene naprave ni na seznamu, jo lahko dodate z možnostjo »Uredi«.

7. Preverjanje časa nalaganja strani

Analizirajte čas nalaganja strani s posnemanjem omrežnih pogojev in naprave, ki jo uporabljate. Če želite to narediti, pojdite v meni za prilagajanje DevTools, ki se nahaja v zgornjem desnem kotu plošče, izberite "Več orodij", in potem - "Omrežni pogoji".

Na plošči, ki se odpre, boste našli polja "Predpomnilnik", "Dušenje omrežja" in "Uporabniški agent".

Ko nastavite potrebne nastavitve, znova naložite stran in pojdite na zavihek "omrežje". Tukaj boste videli ne samo polni delovni čas nalaganje strani, temveč tudi, ko je bila naložena izvorna oznaka (DOMContentLoaded). Te informacije bodo prikazane na dnu okna. Ogledali si boste lahko tudi čas nalaganja in velikost vsakega uporabljenega vira ter zabeležili te informacije s klikom na rdeči gumb na levi strani plošče.

Poleg tega lahko s to možnostjo posnamete posnetke zaslona upodabljanja strani "Filmski trak". Če kliknete ikono kamere in ponovno naložite stran, si lahko ogledate posnetke zaslona na različnih stopnjah postopka nalaganja. Tako lahko ugotovite, kaj uporabniki vidijo na vsaki stopnji.

8. Prepoznavanje virov, ki blokirajo vizualizacijo

Uporabite lahko tudi podatke o nalaganju virov na zavihku "omrežja" da vidite, kateri viri JS in CSS se nalagajo pred DOM in ga morda blokirajo. To je ena najpogostejših težav, ki vplivajo na hitrost nalaganja strani. Vire CSS ali JS si lahko ogledate s klikom na ustrezno stikalo:

9. Med prehodom na HTTPS poiščite nevarne elemente na strani

Pomagajo lahko tudi orodja za razvijalce za Chrome dobra storitev med prehodom na HTTPS. Uporaba zavihka "Varnost" nevarne elemente lahko najdete na kateri koli strani. Tukaj lahko vidite, kako varna je stran in ali ima veljaven HTTPS certifikat, preverite vrsto povezave in prisotnost mešane vsebine.

10. Preverjanje AMP

DevTools lahko uporabite tudi za testiranje strani AMP. Če želite to narediti, dodajte črto "#razvoj=1" v URL strani in nato odprite zavihek "konzola". Tukaj lahko vidite, ali so na strani kakšne napake. Videli boste tudi, v katerih elementih in vrsticah kode so bili najdeni.

Bonus: prilagodite nastavitve DevTools

Morda boste želeli prilagoditi ploščo glede na vaše želje: spremenite videz, dodajte gumbe, bližnjice itd. Vse to lahko storite v nastavitvah. Kliknite ikono menija v zgornjem desnem kotu plošče in izberite "Nastavitve».

Še en nasvet: skrajšane kode ni enostavno razčleniti. Za ogled celotna različica kodo kliknite gumb »()« na sredini spodnjega dela plošče.

• Prevajanje

Danes je Google Chrome najbolj priljubljen brskalnik med spletnimi razvijalci. S hitrim šesttedenskim ciklom izdaje in zmogljivim naborom orodij za razvijalce, ki se nenehno širi, je brskalnik postal orodje, ki ga morate imeti. Večina od vas verjetno pozna številne njegove funkcije, kot je urejanje CSS v živo s konzolo in razhroščevalnikom. V tem članku si bomo ogledali 15 vznemirljivih nasvetov in trikov, ki bodo še izboljšali vašo produktivnost.

1. Hitro spreminjanje datotek

Če ste uporabljali Sublime Text, potem verjetno ne bi mogli živeti brez "Pojdi na karkoli" ( Opomba prevajalca: Za uporabnike Idea se ta funkcija imenuje "Iskanje povsod" in je dostopna z dvojnim klikom tipke Shift). Z veseljem boste izvedeli, da obstaja podobna funkcija v orodjih za razvijalce. Pritisnite Ctrl + P (Cmd + P za uporabnike Mac), medtem ko je plošča za razvijalce odprta, da hitro poiščete in odprete katero koli datoteko v svojem projektu.

2. Iskanje v izvorni kodi

Kaj pa, če želite iskati v izvorni kodi? Za iskanje po vseh prenesenih datotekah na strani pritisnite Ctrl + Shift + F (Cmd + Opt + F). Ta način iskanja podpira tudi iskanje po regularnih izrazih.

3. Pojdite na vrstico

Ko odprete datoteko na zavihku Viri, vam orodja za razvijalce omogočajo skok na katero koli vrstico v datoteki. Če želite to narediti, pritisnite Ctrl + G za Windows in Linux (ali Cmd + L za Mac) in vnesite številko vrstice.

Drug način je, da pritisnete Ctrl + O, vendar namesto iskalnega besedila vnesete ":" in številko vrstice ( Opomba prevajalca: ali pa greste še dlje in vnesete ime datoteke in številko vrstice z ":" kot ločilo med njima, medtem ko vnos celotnega imena datoteke sploh ni potreben, to je iskanje).

4. Pridobivanje elementov DOM z uporabo konzole

Konzola orodij za razvijalce podpira več uporabnih čarobnih funkcij in spremenljivk za pridobivanje DOM:

• $() – enakovredno document.querySelector(). Vrne prvi element, ki se ujema z izbirnikom CSS, na primer $("DIV") vrne prvi element DIV na strani.
• $$() – enakovredno document.querySelectorAll(). Vrne seznam elementov ( Opomba prevajalca: in sicer NodeList), ki se ujemajo z danim izbirnikom CSS.
• $0 - $4 je zgodovina zadnjih petih elementov DOM, ki ste jih izbrali na zavihku Elementi, kjer bo $0 zadnji.

Izvedete lahko več funkcij konzole.

5. Uporaba več kazalk in izbir

Ko urejate datoteko, lahko nastavite več kazalk tako, da držite Ctrl (Cmd za Mac) in kliknete, kjer želite, tako da lahko nastavite kazalko na več mestih hkrati.

6. Ohranite dnevnik

Če omogočite možnost Ohrani dnevnik na zavihku Konzola, bodo rezultati shranjeni in ne izbrisani ob vsakem nalaganju strani. To je priročno, če si želite ogledati zgodovino napak, ki se pojavijo, preden zapustite stran.

(Opomba prevajalca: podobna lastnost je na voljo na zavihku Omrežje. Ko je omogočeno, se zgodovina poizvedb pri preklapljanju med stranmi ne izbriše več. Če pa je bila stran preusmerjena z uporabo JavaScripta in je bila vložena katera koli druga zahteva, je rezultat te zahteve skoraj vedno nemogoče videti. Ne pozabite onemogočiti takšnih lastnosti pri dolgotrajnem odpravljanju napak! Orodja za razvijalce skoraj vedno porabijo več sistemskih virov kot stran sama!)

7. Predogled pomanjšanih virov

Chromova orodja za razvijalce imajo vgrajeno "popestritev" pomanjšane izvorne kode v človeku bolj berljivo obliko. Gumb se nahaja v spodnjem levem kotu trenutno odprte datoteke v zavihku Viri.

(Opomba prevajalca: včasih ni dovolj, da to lastnost omogočite samodejno, kot je na primer storjeno v FireFoxu)

8. Način naprave

Orodja za razvijalce vključujejo zmogljiv način za razvijanje strani, optimiziranih za mobilne naprave. Ta Googlov video prikazuje večino njegovih naprednih funkcij, kot je spreminjanje ločljivosti zaslona, ​​posnemanje dotikov zaslona na dotik in posnemanje omrežnih povezav nizke kakovosti.

9. Emulirajte senzorje naprave

Druga kul lastnost načina naprave je zmožnost simulacije senzorjev mobilnih naprav, kot so zasloni na dotik in merilniki pospeška. Vnesete lahko celo svoje geografske koordinate. Predmet se nahaja na dnu zavihka Elementi v Emulacija -> Senzorji.

10. Izbira barve

Ko v urejevalniku slogov izbirate barvo, lahko kliknete barvni vzorec in prikaže se okno za izbiro barve. Ko je to okno odprto, se kazalec miške spremeni v povečevalno steklo za izbiro barv na strani z natančnostjo slikovnih pik.

11. Prisilno stanje elementa

Razvojna orodja vam omogočajo simulacijo stanj elementov CSS DOM, kot sta:hover in:focus, kar olajša pisanje slogov zanje. Ta funkcija je na voljo v urejevalniku lastnosti CSS.

12. Prikaži senco DOM

Brskalniki ustvarijo elemente, kot so vnosna polja in gumbi, iz drugih osnovnih elementov, ki so običajno skriti. Vendar pa lahko odprete Nastavitve -> Splošno in omogočite Prikaži senco DOM uporabniškega agenta, da prikažete te osnovne elemente na zavihku Elementi. Tako jih boste lahko oblikovali ločeno.

13. Izberite naslednji pojav

Če med urejanjem datotek na zavihku Viri pritisnete Ctrl + D (Cmd + D), bo naslednja pojavitev trenutne besede dodatno označena, kar vam omogoča sočasno urejanje.

14. Spreminjanje barvnega formata

S Shift + klikom na barvni vzorec se na plošči za urejanje CSS barvni format spremeni v RGBA, HSL šestnajstiško ( Opomba prevajalca: hkrati tako šestnajstiška skrajšana oblika kot polna in celo v veliki začetnici. Če vam to ne ustreza, bo brskalnik poskušal najti to barvo na seznamu standardnih barvnih konstant. Edina pomanjkljivost te funkcije je, da morate za izbiro želenega formata pogosto »klikati« skozi vse druge možne možnosti).

15. Urejanje lokalnih datotek v delovnem prostoru

Delovni prostori so zmogljivo orodje na nadzorni plošči za razvijalce, ki spremeni orodja za razvijalce v IDE. Delovni prostor vsebuje strukturo datoteke na zavihku Viri, ki se ujema s strukturo vašega lokalnega projekta, tako da lahko zdaj neposredno urejate in shranjujete, ne da bi morali kopirati in prilepiti spremembe v zunanji urejevalnik besedila.

Če želite konfigurirati delovne prostore, pojdite na zavihek Viri ( Opomba prevajalca: omogočite navigacijsko ploščo, če je skrita; za to kliknite gumb Prikaži navigator v zgornjem levem kotu zavihka) in z desno miškino tipko kliknite kjer koli v navigacijski plošči ali pa preprosto povlecite celoten zavihek projekta v ploščo za razvijalce. Zdaj bodo izbrana mapa, njeni podimeniki in vse datoteke v njih na voljo za urejanje ne glede na to, na kateri strani ste. Za še večjo priročnost lahko uporabite datoteke, ki so uporabljene na tej strani, kar vam bo omogočilo njihovo urejanje in shranjevanje.

UPD. Opomba prevajalca:

Dodana mapa bo na voljo na vseh zavihkih. Torej, če ima vaš projekt več kot eno datoteko HTML, bo dovolj, da jo odprete v naslednjem zavihku brskalnika.

Izvedete lahko več o delovnih prostorih

• Prevajanje

Kako s konzolo za razvijalce spremeniti Google Chrome v podobo urejevalnik besedil? Kakšen pomen ima ikona, ki jo mnogi poznajo iz jQueryja? $ ? Kako lahko prikažem niz vrednosti v konzoli, oblikovan kot precej spodobna tabela? Če vam odgovori na ta vprašanja ne pridejo takoj na misel, potem zavihek Konzola orodij za razvijalce Chrome se vam še ni razkrila v vsem svojem sijaju.

Na prvi pogled imamo pred seboj povsem običajno konzolo JavaScript, ki je primerna le za prikazovanje dnevnikov odzivov strežnika ali vrednosti spremenljivk. Mimogrede, tako sem ga uporabljal, ko sem prvič začel programirati. Vendar sem sčasoma pridobil izkušnje, se malo več naučil in nepričakovano odkril, da Chrome konzola zmore marsikaj, o čemer nisem imel pojma. Danes želim govoriti o tem. Da, če zdaj ne berete na mobilnem telefonu, lahko vse to poskusite takoj.

1. Izbira elementov DOM

Če poznate jQuery, ni na meni, da vam govorim o pomembnosti konstruktov, kot je $('.razred') in $('id'). Za tiste, ki ne vedo, vam omogočajo, da izberete elemente DOM tako, da določite razrede in identifikatorje, ki so jim dodeljeni. Konzola za razvijalce ima podobno funkcionalnost. Tu pa »$« nima nobene zveze z jQuery, čeprav v bistvu počne isto. To je vzdevek za funkcijo document.querySelector().

Ukazi obrazca $('tagName'), $('.razred'), $('#id') in $('.class #id') vrne prvi element DOM, ki se ujema z izbirnikom. Poleg tega, če je jQuery na voljo v dokumentu, bo ta funkcija konzole preglasila njegov »$«.

Tukaj je še en dizajn: $$ . Njegova uporaba je videti tako $$('tagName') oz $$('.razred'). Omogoča vam, da izberete vse elemente DOM, ki se ujemajo z izbirnikom, in jih postavite v matriko. Delo z njim se ne razlikuje od drugih nizov. Če želite izbrati določen element, lahko do njega dostopate z indeksom.

Na primer ukaz $$('.className') nam bo ponudil matriko vseh elementov strani z imenom razreda, podanim ob klicu. Ekipe $$('.className') in $$('.className')  bo omogočil dostop do prvega oziroma drugega elementa nastale matrike.

Eksperimentiranje z ukazi $ in $$

2. Spremenite brskalnik v urejevalnik besedil

Ste se že kdaj ujeli pri razmišljanju, da bi bilo lepo besedilo spletne strani, ki jo odpravljate, urejati neposredno v brskalniku? Če da, potem vam bo všeč ukaz, prikazan spodaj.

Document.body.contentEditable=true
Po izvedbi v konzoli lahko dokument, odprt v brskalniku, urejate, ne da bi morali iskati želeni fragment v kodi HTML.

3. Iskanje obdelovalcev dogodkov, vezanih na element

Med odpravljanjem napak boste morda morali najti obdelovalce dogodkov, ki so vezani na elemente. To je zelo enostavno narediti s konzolo. Vse kar morate storiti je, da uporabite ta ukaz:

GetEventListeners($('selektor'))
Kot rezultat njegove izvedbe bo izdelan niz objektov, ki vsebuje seznam dogodkov, na katere se element lahko odzove.

Obdelovalci dogodkov

Če želite najti obdelovalca za določen dogodek, lahko uporabite naslednjo konstrukcijo:

GetEventListeners($('selector')).eventName.listener
Ta ukaz bo natisnil funkcijsko kodo upravljalnika dogodkov. Tukaj eventName je niz, ki vsebuje vse dogodke določene vrste. Na primer, v praksi lahko izgleda takole:

GetEventListeners($('#firstName')).click.listener
Kot rezultat bomo prejeli kodo funkcije, povezane z dogodkom kliknite element z id ime.

4. Spremljanje dogodkov

Če želite opazovati pojav dogodkov, povezanih z določenim elementom DOM, vam lahko pri tem pomaga konzola. Tukaj je nekaj ukazov, ki jih lahko uporabite za spremljanje dogodkov.

• Ekipa monitorEvents($('izbirnik')) omogoča organiziranje spremljanja vseh dogodkov, povezanih z elementom, ki mu ustreza izbirnik. Ko pride do dogodka, se izvede vnos v konzolo. Na primer ukaz monitorEvents($('#firstName')) vam bo omogočilo beleženje vseh dogodkov, povezanih z elementom, katerega identifikator je ime.
• Ekipa monitorEvents($('izbirnik'),'imedogodka') podoben prejšnjemu, a je namenjen določen dogodek. Tukaj je poleg izbirnika elementa v funkcijo posredovano tudi ime dogodka. Ta ukaz vam bo omogočil, da na konzoli prikažete podatke o pojavu enega dogodka. Na primer ukaz monitorEvents($('#firstName'),'klikni') bo prikazal samo informacije o dogodku kliknite element z id ime.
• Ekipa monitorEvents($('izbirnik'),['imedogodka1','imedogodka3",….]) omogoča spremljanje več izbranih dogodkov. Tu se funkciji posreduje niz nizov, ki vsebuje imena dogodkov. Na primer ta ukaz: monitorEvents($('#firstName'),['klik','fokus']) bo izpisal informacije o dogodku v konzolo kliknite in fokus za element z id ime.
• Ekipa unmonitorEvents($('izbirnik')) vam omogoča, da ustavite spremljanje in beleženje dogodkov v konzoli.

5. Merjenje časa izvajanja fragmenta kode

Funkcija pogleda je na voljo v konzoli Chrome console.time('labelName'), ki sprejme oznako kot argument in zažene časovnik. Še ena funkcija console.timeEnd('labelName'), ustavi časovnik, ki mu je dodeljena oznaka, ki mu je bila posredovana. Tukaj je primer uporabe teh funkcij:

Console.time("myTime"); //Zažene časovnik z oznako myTime console.timeEnd("myTime"); //Ustavi časovnik z oznako myTime //Izhod: myTime:123,00 ms
Zgornji primer vam omogoča, da ugotovite čas med zagonom in zaustavitvijo časovnika. Enako lahko naredite znotraj programa JavaScript in poiščete čas izvajanja dela kode.

Recimo, da moram ugotoviti trajanje zanke. To lahko storite takole:

Console.time("myTime"); // Zažene časovnik z oznako myTime for(var i=0; i< 100000; i++){ 2+4+5; } console.timeEnd("mytime"); // Останавливает таймер с меткой myTime //Вывод - myTime:12345.00 ms

6. Prikaz vrednosti spremenljivk v obliki tabel

Recimo, da imamo niz predmetov, kot je ta:

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)]
Če ga prikažete v konzoli, dobite hierarhično strukturo v obliki pravzaprav niza objektov. to - koristna priložnost, veje strukture je mogoče razširiti z ogledom vsebine predmetov. Vendar pa je s tem pristopom težko razumeti, na primer, kako so povezane lastnosti podobnih elementov. Da bi bilo delo s takšnimi podatki bolj priročno, jih je mogoče pretvoriti v tabelarično obliko. Če želite to narediti, uporabite naslednji ukaz:

Console.table(variableName)
Omogoča prikaz spremenljivke in vseh njenih lastnosti v obliki tabele. Tako izgleda.

Izpis niza predmetov kot tabele

7. Oglejte si kodo elementa

Do kode elementa lahko hitro pridete iz konzole z naslednjimi ukazi:

• Ekipa preglej($('izbirnik')) omogoča odpiranje kode elementa, ki ustreza izbirniku na plošči Elementi Orodja za razvijalce Google Chrome. Na primer ukaz preglej ($('#firstName')) vam bo omogočilo ogled kode elementa z identifikatorjem ime. Ekipa preglej($$('a')) bo odprl kodo za četrto povezavo, ki je prisotna v DOM.
• Ukazi obrazca $0 , $1 , $2 Omogoča vam hitro navigacijo do nedavno ogledanih predmetov. na primer $0 bo odprl kodo nazadnje ogledanega elementa itd.

8. Prikaz seznama lastnosti elementa

Če si morate ogledati seznam lastnosti elementa, vam bo konzola pomagala tudi pri tem. Tu se uporablja naslednji ukaz:

Dir($('izbirnik'))
Vrne objekt, ki vsebuje lastnosti, povezane z danim elementom DOM. Kot v drugih podobnih primerih, je vsebino tega predmeta mogoče raziskati z ogledom njegove drevesne strukture.

9. Priklic zadnjega prejetega rezultata

Konzola se lahko uporablja kot kalkulator, kar verjetno vsi vedo. Toda malo ljudi ve, da ima vgrajena orodja, ki vam omogočajo uporabo rezultatov prejšnjih izračunov v ukazih. Po zasnovi $_ rezultat prejšnjega izraza lahko pridobite iz pomnilnika. Takole izgleda:

2+3+4 9 //- Rezultat seštevka je 9 $_ 9 // Prikaže se zadnji dobljeni rezultat $_ * $_ 81 // Ker je zadnji rezultat 9, dobimo 81 Math.sqrt($ _) 9 // Kvadratni koren od zadnjega rezultata, ki je bil 81 $_ 9 // Ponovno dobimo 9 - rezultat prejšnjega izračuna

10. Čiščenje konzole in pomnilnika

Če morate počistiti konzolo in pomnilnik, uporabite ta preprost ukaz:

Počisti()
Po pritisku na Enter bo čista konzola pripravljena na nove poskuse.
To je vse.

11, 12, 13, 14…

Iskreno povedano, to še ni vse. Prikazal sem samo nekatere neočitne zmožnosti konzole Google Chrome. Pravzaprav so