Saat yleiskatsauksen konsolin ominaisuuksista.
Sisällys
Tulostus konsolissa
Tekstin syöttö konsoliin on saatavilla kaikista moduuleista ja sitä ohjataan Tier()-toiminnolla. Niitä on 3 lisäkomentoja Msg() , DevMsg() ja Warning(), jotka tukevat muotoiltua merkkijonotulostusta, kuten sprintf() :
DevMsg (char const* pMsg, ...) - vain kehittäjätilassa Msg(char const* pMsg, ...) - aina, valkoinen teksti Varoitus(char const *pMsg, ...) - aina, punainen teksti
varten taaksepäin yhteensopivuus Con_Printf()- ja Con_DPrintf()-komennot on säilytetty HL1:stä.
Komentojen suorittaminen
Moottori käyttää palvelin- ja asiakasliittymää komentojen (merkkijonojen) suorittamiseen. Palvelin käyttää IVEngineServer::ServerCommand() -liitäntää:
Engine->ServerCommand("muutostaso de_dust\n");
Asiakas käyttää IVEngineClient-liittymää ja valitsee kahdesta komennosta, jotka määräävät, suoritetaanko komento ensin asiakkaalla vai lähetetäänkö se suoraan palvelimelle:
Engine->ServerCmd("sano hei\n"); // lähettää komennon palvelimelle
Engine->ClientCmd("sano hei\n"); // suorittaa komennon asiakkaalle
Uusien komentojen ja muuttujien lisääminen
Kehittäjäkonsoli on lähdemoottorin alijärjestelmä, joka antaa pääsyn erilaisia moduuleja, tämä tehdään ICvar-liitännän kautta (katso \public\icvar.h). Tämä käyttöliittymä rekisteröi uudet komennot ja etsii olemassa olevia. Tämä käyttöliittymä on käytettävissä globaalin muuttujan CVAR kautta asiakas-palvelinkoodissa (cv moottorin koodissa). Konsolin komennot kuuluvat ConCommand-luokkaan ja ConVar-konsolimuuttujat, joista molemmat tulevat perusluokka ConCommandBase (katso \public\convar.h).
Uusien komentojen ja muuttujien lisääminen on melko yksinkertaista ja sitä voidaan käyttää sekä palvelin- että asiakasmoduuleissa (sama koko moottorille). Näiden luokkien rakentaja rekisteröityy automaattisesti uusi joukkue/muuttuja konsolijärjestelmässä. Tämä lyhyt esimerkki Koodi lisää uuden komennon my_function ja uuden muuttujan my_variable, joka on alustettu arvoon 42:
#sisältää
Tämä normaalissa käytössä kun objektin nimi ja komento ovat samat ja muuttujia käytetään vain yhdessä lähdekoodissa, ne kuvataan staattisiksi.
ConVar-luokan käyttäminen
Katsotaanpa ensin eniten käytettyä ConVar-konstruktoria:
ConVar(char const *pName, char const *pDefaultArvo, int liput, char const *pHelpString)
Ensimmäinen argumentti pName on muuttujan nimi (ei välilyöntejä), seuraava argumentti pDefaultValue on aina merkkijono, jopa ConVar ":lle numeerisia arvoja. Liput määrittelevät muuttujan erityisominaisuudet, kaikki lippujen kuvaukset alkavat FCVAR_*:lla, mutta siitä lisää myöhemmin. On hyvä idea käyttää pHelpStringiä, jotta käyttäjät ymmärtävät, mitä varten muuttuja on tarkoitettu. ConVars ei ole rajoitettu tiettyyn tyyppiin, niiden arvo voi olla kokonaisluku, reaaliluku tai merkkijono, ja voit käyttää sitä haluamallasi tavalla. Niin kauan kuin sinulla on itse ConVar-objekti tai osoitin siihen, voit tarkastella ja muuttaa sen arvoa suoraan. Kaikki nämä esimerkit ovat oikeita ja antavat saman tuloksen:
If (oma_muuttuja.GetInt() == 42) DoSomething(); if (oma_muuttuja.GetFloat() == 42.0f) DoSomething(); if (strcmp(oma_muuttuja.GetString(), "42")==0) DoSomething();
ConVar-arvon asettamiseksi sinun on käytettävä SetValue()-funktiota käyttämällä mitä tahansa tietotyyppejä:
Oma_muuttuja.Asetusarvo(42); oma_muuttuja.Asetusarvo(42.0f); oma_muuttuja.SetValue("42");
Voit milloin tahansa palauttaa ]-arvon takaisin oletusarvoonsa käyttämällä Revert()-funktiota.
Jos ConVar luodaan erilaisia moduuleja, silloin ICvar-rajapinnassa FindVar()-funktiota käytetään osoittimen saamiseksi objektiin, jos muuttujan nimi on asetettu. Tässä on yksinkertainen esimerkki, joka tarkistaa, onko moottorimoduulissa määritetty ConVar sv_cheats asennettu:
ConVar *pCheats = cvar->FindVar("sv_cheats"); if (pCheats && pCheats->GetInt() == 1) AllowCheating();
Kelvollisten arvojen alue voidaan määrittää numeerisille ConVars-arvoille käyttämällä toista konstruktoria. Sitten konsolijärjestelmä tarkistaa ConVarin automaattisesti aina, kun sitä muutetaan manuaalisesti. Jos syötetty luku on alueen ulkopuolella, se pyöristetään seuraavaan oikeaan arvoon. Oikeiden arvojen alueen asettaminen välillä 1 - 100:
ConVar my_variable("oma_muuttuja", "42", 0, "ohjeteksti", tosi, 1, tosi, 100);
Joskus haluat saada ilmoituksen, kun käyttäjä tai muu alijärjestelmä muuttaa ConVar-arvoa, joten takaisinsoittotoiminto voidaan määrittää:
Static void OnChangeMyVariable (ConVar *var, char const *pOldString) ( DevMsg("ConVar %s muutettiin %s:sta %s\n", var->GetName(), pOldString, var->GetString()); ) ConVar my_variable("oma_muuttuja", "42", 0, "Suosikkinumeroni", OnChangeMyVariable);
ConCommand-luokan käyttäminen
Class ConCommand on yksinkertaisempi kuin ConVar, ja siinä on vain yksi konstruktori:
ConCommand(char const *pName, FnCommandCallback callback, char const *pHelpString = 0, int liput = 0, FnCommandCompletionCallback completionFunc = 0);
Kuten ConVar, pName määrittää komennon nimen (ei välilyöntejä!). takaisinsoitto on toiminto, joka suoritetaan, kun käyttäjä suorittaa tämän komennon, pHelpStringillä ja lipuilla on samat toiminnot kuin ConVarissa. ConCommands tukee ensimmäisen parametrin automaattista täydennystä, varsinkin kun sitä käytetään tiedostojen käsittelyyn. Käytät esimerkiksi komentoa loadtext lt;textfilegt ; jossa oletetaan syötettäväksi .txt-tiedosto, konsoli etsii kaikki saatavilla olevat .txt-tiedostot ja antaa käyttäjän valita yhden luettelosta. Jos oikein, completionFunc läpäisee, sitä kutsutaan aina, kun konsolijärjestelmä tarvitsee luettelon käytettävissä olevista argumenteista.
Kun takaisinsoittotoiminto suoritetaan, parametrit syötetään konsoliin Ei toimitetaan funktion argumentteina. takaisinsoittofunktioiden on kysyttävä moottorilta, kuinka monta argumenttia on vastaanotettu moottorin käyttöliittymäfunktiolla Cmd_Argc() . Voit sitten saada yksittäiset argumentit komennolla Cmd_Argv(index) , jossa indeksi 1 on ensimmäinen argumentti. Argumentit palautetaan aina merkkijonoina.
Void MySay_f (void) ( if (engine->Cmd_Argc()< 1)
{
Msg(""Usage: my_say
Tämä on esimerkki yksinkertaisen automaattisen täydennysluettelon luomisesta. Tässä ei käytetä epätäydellistä parametria; se sisältää niin kauan sitten syötetyt merkit (mukaan lukien itse komennon nimi):
Staattinen int MySayAutoComplete (char const *osittais, char-komennot[ COMMAND_COMPLETION_MAXITEinMS ][ COMMAND_COMPLETION_ITEM_LENGTH ]) ( strcpy(komennot, "hei"); strcpy(komennot, "näkemiin"); return 2; _/ Commany(my) my_say", MySay_f, "sano jotain", 0, MySayAutoComplete);
FCVAR_liput
Konsolin komennot/muuttujat käyttävät lippuja, joilla on tietyt ominaisuudet ja joita on käsiteltävä varoen. Rakentaja käyttää näitä lippuja, ja niitä voidaan muuttaa käyttämällä ConCommandBase::AddFlags()-komentoa (ei käytetä kovin usein). Näitä lippuja ei voi muuttaa muuten kuin sisään lähdekoodeja huijausten välttämiseksi. Jotkut liput on asetettava manuaalisesti, toiset asetetaan automaattisesti konsolijärjestelmässä:
FCVAR_LAUNCHER, FCVAR_GAMEDLL, FCVAR_CLIENTDLL, FCVAR_MATERIAL_SYSTEM, FCVAR_STUDIORENDER
Nämä liput asetetaan rekisteröintiprosessin aikana ja osoittavat moduuliin, jossa komento luodaan (sinun ei tarvitse asettaa niitä). Seuraavat liput on asetettava manuaalisesti:
| FCVAR_CHEAT |
| Niitä käytetään virheenkorjaukseen, eikä niitä poisteta julkaisusta, koska mod- ja karttakehittäjät saattavat vaatia niitä. Valitettavasti emme voi sallia tavallisten pelaajien käyttää näitä virheenkorjaustyökaluja, koska se olisi epäreilua muita pelaajia kohtaan (huijaaminen). Hyvä sääntö lisää FCVAR_CHEAT kaikkien uusien lisäämiesi konsolikomentojen alkuun, ellei tämä ole viimeinen ja laillinen vaihtoehto pelaajille. Kokemus osoittaa, että kaikkein hyväntahtoisimpiakin virheenkorjauskomentoja voidaan käyttää tavalla tai toisella huijauksena. Pelipalvelin Asettamalla sv_cheats se päättää, ovatko huijaukset sallittuja vai eivät. Jos asiakas on muodostanut yhteyden palvelimeen, jossa huijaukset on poistettu käytöstä (pitäisi olla oletusarvo), kaikki asiakaskonsolin muuttujat, jotka on merkitty FCVAR_CHEAT, palautetaan oletusarvoihinsa, eikä niitä voi muuttaa niin kauan kuin asiakas on yhteydessä. Konsolikomentoja, joissa on merkintä FCVAR_CHEAT, ei myöskään voida suorittaa. |
| FCVAR_USERINFO |
| Jotkut konsolimuuttujat sisältävät asiakastietoja, joista palvelimen on tiedettävä, kuten käyttäjänimiä tai käyttäjätunnusasetuksia. Nämä muuttujat on merkittävä FCVAR_USERINFO-lipulla, jolloin ne sitoutuvat palvelimeen ja päivitetään aina, kun käyttäjä muuttaa niitä. Kun käyttäjä muuttaa näitä muuttujia, moottori ilmoittaa palvelinkoodille komennolla ClientSettingsChanged() . Palvelin voi sitten pyytää moottoria yksilöllisesti asiakasasetukset käyttäen GetClientConVarValue() . |
| FCVAR_REPLICATED |
| Pelipalvelimen ja asiakkaan käyttö yleinen koodi, joten on tärkeää, että molemmat osapuolet kulkevat samaa polkua käyttäen samoja tietoja (esim. liikkeen/aseen ennustus, pelisäännöt). Jos tämä koodi käyttää konsolimuuttujia, niillä on oltava samat arvot molemmin puolin. FCVAR_REPLICATED-lippu varmistaa, että arvot lähetetään kaikille asiakkaille. Kun yhteys on muodostettu, asiakkaat eivät voi muuttaa näitä arvoja, koska he käyttävät palvelinarvoja. |
| FCVAR_ARCHIVE |
| Jotkut konsolimuuttujat sisältävät mukautetut asetukset haluamme palauttaa ne aina, kun peli käynnistetään (nimenä tai verkkonopeudena). Jos konsolimuuttuja on merkitty FCVAR_ARCHIVE , se tallennetaan config.cfg-tiedostoon pelin päätyttyä ja ladataan seuraavan kerran, kun se käynnistetään. (Lisäksi host_writeconfig-komento tallentaa kaikki FCVAR_ARCHIVE-arvot tiedostoon.) |
| FCVAR_NOTIFY |
| Jos konsolimuuttuja on merkitty FCVAR_NOTIFY , palvelin lähettää viestin kaikille asiakkaille aina, kun muuttujaa muutetaan. Tätä tulisi käyttää kaikille pelaajille tärkeitä peliä muuttaville muuttujille (esimerkiksi mp_friendlyfire). |
| FCVAR_PROTECTED |
| Tämä on konsolimuuttuja, joka sisältää yksityisiä tietoja(esimerkiksi salasana), emme halua sen näkyvän muille käyttäjille. Tätä varten FCVAR_PROTECTED-lippu on asetettava merkitsemään nämä tiedot luottamuksellisiksi. |
| FCVAR_SPONLY |
| Joskus komennon suorittaminen tai muuttujan muuttaminen voi olla oikein vain yhden käyttäjän tilassa. Merkitse sitten komennon muotoon FCVAR_SPONLY . |
| FCVAR_PRINTABLEONLY |
| Jotkut tärkeät muuttujat ovat raskaita tai yleislähetettyjä (esimerkiksi pelisäännöt), ja on tärkeää, että ne sisältävät vain tulostettavia merkkejä (esimerkiksi ei ohjausmerkkejä). |
| FCVAR_NEVER_AS_STRING |
| Tämä lippu kertoo koneelle, ettei tämä koskaan tulosta tätä muuttujaa merkkijonona, koska se sisältää ohjausmerkkien sarjan. |
| FCVAR_DEMO |
| Kun aloitat demotiedoston tallentamisen, tallenteeseen on lisättävä joitain konsolimuuttujia sen varmistamiseksi, että se toistuu oikein. |
| FCVAR_DONTRECORD |
| Tämä on FCVAR_DEMO:n vastakohta, joitain konsolimuuttujia ei tule kirjoittaa esittelytiedostoihin. |
Hei, rakkaat ystävät. Selaimen kehittäjäpaneeli (konsoli) on välttämätön työkalu jokaiselle verkkosivuston omistajalle, jonka avulla voit tarkastella nopeasti html-koodi sivut ja css-tyylejä. Voit myös ottaa selvää sivustoa ladattaessa tapahtuneista virheistä ja tarkistaa sivuston mukautuvuuden.
Tänään harkitsemme html-koodin, css-tyylien ja mukautuvuuden käyttöä kehittäjäpaneelissa. Nämä ovat työkaluja, joita tarvitaan useimpien ongelmien ratkaisemiseen.
varten yleisesti ymmärretty Annan sinulle esimerkin siitä, milloin saatat tarvita kehittäjäpaneelia.
Oletetaan, että tulit blogiini ja kiinnostuit siitä, mitä fonttia käytän tai värjään ja niin edelleen. Yleensä tämä voi olla mikä tahansa elementti sivustolla. Ja halusit tehdä saman verkkosivustollasi.
Sitten katsot selaimen kehittäjäpaneelista haluamaasi elementtiä, josta näet sen html-koodin ja css-tyylit.
Toinen vaihtoehto paneelin käyttämiseen on, kun haluat tehdä jotain sivustolla, mutta et vielä tiedä, miltä se näyttää.
Tässä tapauksessa voit myös käyttää kehittäjäpaneelia ja katsoa, miltä ideasi näyttää selaimessa. Loppujen lopuksi kaikki kehittäjäpaneelissa tekemäsi näkyy vain sinulle. Ja jotta vierailijat näkevät kokeilusi, sinun on siirrettävä tyylejä ja koodeja sivuston tiedostoihin.
Verkkovastaavan paneelin avaaminen ja käyttöliittymään tutustuminen
Kehittäjäpaneeli on läsnä jokaisessa moderni selain. Avataksesi sen, sinun on painettava näppäimistön F12-näppäintä.
Paneelin käyttöliittymä sisään eri selaimet ovat erilaisia, mutta toimintaperiaatteet ovat samanlaiset.
Suosittelen Firefox-selaimen paneelia.
Itse paneeli on jaettu kahteen osaan ja sisältää kielekkeitä ja työkaluja työhön.
Paneelissa voit tarkastella sivun HTML-koodia ja muokata sitä siellä. Voit tehdä tämän valitsemalla haluamasi elementin ja painamalla oikea painike hiirellä ja valitse valikosta "Muokkaa nimelläHTML (MuokatakutenHTML)".
Tyylien käsittelyä varten sinun on siirryttävä CSS-paneelin osioon, jossa voit lisätä tyylejä tai poistaa olemassa olevia tyylejä poistamalla niiden vieressä olevan valintaruudun. Kaikki voidaan muuttaa.
Täältä saat selville, missä tiedostossa tyylit sijaitsevat ja millä rivillä.
Kuinka analysoida verkkosivuston html-elementtiä ja selvittää sen css-tyylit
Katsotaanpa esimerkkiäni, joka on jokaisessa artikkelissa.
Halutun elementin analysoimiseksi sinun on napsautettava sitä hiiren kakkospainikkeella ja valittava valikkokohta .
Koko periaate koodin kanssa työskentelyssä paneelissa on, että sinun on valittava html-koodi vasemmasta ikkunasta, ja oikeassa ikkunassa on tämän elementin tyylejä.
Ja jos kaikki on melko yksinkertaista tyyleillä, niin html-koodin kanssa työskennellessäsi on ymmärrettävä sen eheys. Eli jokaisella elementillä on tunnisteet, joissa se sijaitsee. Nämä voivat olla kappaleita, linkkejä, kuvia ja niin edelleen. Useimmiten nämä ovat DIV-lohkoja, joissa on avaustunniste < div> ja sulkeminen div>. Ja tämä kaikki näkyy selvästi paneelissa.
Kopioinnissa tai muokkauksessa on tärkeää ymmärtää, mistä lohko alkaa ja mihin se päättyy. Pienimmänkin virheen tekeminen tässä voi häiritä koko mallin asettelua.
Opetusvideossa käsittelen tätä asiaa yksityiskohtaisesti. Ja jos haluat oppia nopeasti perustieto html:n ja css:n osalta suosittelen menemään sivulle "Ilmaiseksi" ja lataa Jevgeni Popovin kursseja.
Kuinka kopioida html-koodi paneelista sivuston tiedostoihin
Kehittäjäpaneelin käyttämiseen voi olla monia ideoita. Paneelissa kokeilun jälkeen tulos on siirrettävä sivuston tiedostoihin. Ja tässä on vaikeuksia. Tosiasia on, että paneeli näyttää html-koodin, ja useimmat nykyaikaiset sivustot, mukaan lukien WordPress-alustalla olevat, luodaan käyttämällä kieltä PHP ohjelmointi. Ja tämä on kuin taivas ja maa.
Katsotaanpa esimerkkiä bannerin kopioimisesta blogistani ja siirtämisestä toiseen sivustoon.
Tätä varten sinun on avattava kehittäjäpaneeli ja tutkittava haluttua elementtiä. Kun olet määrittänyt DIV-lohkon alun, paina etutähtäimen oikeaa painiketta ja valitse valikkokohta "Kopioi ulkoinenHTML"
Koodi on kopioitu leikepöydälle ja nyt sinun on liitettävä se kohtaan, jossa haluat nähdä tämän bannerin.
Tätä prosessia on melko vaikea kuvata, joten suosittelen katsomaan opetusvideota, jossa kaikki selitetään ja näytetään yksityiskohtaisesti.
Kuinka siirtää tyylejä kehittäjäpaneelista sivuston tiedostoihin
Kun olet päättänyt koodin ja tyylit, voit aloittaa niiden siirtämisen sivuston tiedostoihin. Koska toistaiseksi kaikki nämä muutokset näkyvät vain sinulle selaimessa, ja jos päivität sivun, kaikki muutokset katoavat.
, minulle se on kätevämpää. Koska Notepad++:ssa työskennellessä on koodin korostus ja rivinumerointi. Ja tämä auttaa paljon, kun sinun ei tarvitse vain kopioida tyylejä, vaan tehdä muutoksia olemassa oleviin. Nämä tyylit on helppo löytää rivinumeron perusteella.
Kuinka tarkistaa mallin reagointikyky kehittäjäpaneelissa
Voit vaihtaa paneelin mukautuvaan tilaan painamalla näppäinyhdistelmää CTRL+SHIFT+M tai kehittäjäpaneelin painiketta, joka sijaitsee eri tavalla eri selaimissa.
Johtopäätös
Tässä artikkelissa en tarkastellut kaikkia kehittäjäpaneelin työkaluja, vaan vain niitä, jotka voivat olla hyödyllisiä ja joita monet verkkovastaavat käyttävät useimmiten.
Paneelin käyttö ja koodin ja tyylien kanssa työskentelyn taidot ovat välttämättömiä, kun työskentelet verkkosivustojen ja kumppaniohjelmien kanssa.
Ota työkalu käyttöön, siitä on sinulle hyötyä monta kertaa.
Jos sinulla on kysyttävää, vastaan mielelläni kommenteissa.
Ystävät, toivotan teille menestystä. Nähdään uusissa artikkeleissa.
Terveisin Maxim Zaitsev.
Jokaisella selaimella on oma kehittäjätyökalu Sitä monet kutsuvat yksinkertaisesti "konsoliksi", pitävät konsolia Chrome-selain. Se näyttää tältä:
Itse asiassa Chrome-selaimen konsoli on työkalu, jolla voit paitsi tarkastella selaimen näyttämän sivun sisältöä, myös olemassa olevia virheitä(mitä testaajat useimmiten tekevät), mutta on myös paljon helpompaa ja nopeampaa korjata nämä virheet (jota kehittäjät useimmiten tekevät), mitata erilaisia indikaattoreita ja manipuloida sivua.
Konsolin avaaminen Chrome-selaimessa:
- F12-näppäin;
-painamalla samanaikaisesti Ctrl-näppäimet+ Vaihto + I;
— RMB sivuelementissä –> Näytä koodi;
- selaimen valikko -> Lisätyökalut-> Kehittäjätyökalut.
Se voi sijaita sivun alareunassa tai sivulla tai se voidaan irrottaa erilliseen ikkunaan. Katsotaanpa siis jokaista avoimen konsolin välilehteä erikseen.
Yhteensä siinä on 8 välilehteä, joista jokainen näyttää tietyt tiedot:
1 – Elementit(sisältää koko sivun html/css-koodin ja voit valita elementtejä tutkimukseen sekä muokata niitä)
2 – Konsoli(näyttää virheiden/varoitusten olemassaolon/puuttumisen koodissa)
3 – Lähteet(sallii toimintojen suorittamisen sivukoodilla)
4 – Verkko(seuraa suoritusaikaa tiettyjä pyyntöjä ja itse pyynnöt)
5 – Aikajana(mittaa sivun latausajan)
6 – Profiilit(voit luoda JavaScript-, CPU-profiileja)
7 – Resurssit ( voit tarkastella tiettyjä tallennettuja tietoja)
8 – Tarkastukset(tarkistaa tietyt parametrit)
Käydään nyt läpi jokainen niistä erikseen ja yksityiskohtaisemmin:
Paneeli Elementit
Elementit-paneeli näyttää sivun asettelun täsmälleen sellaisena kuin se hahmonnettaisiin selaimessa. Voit muuttaa sivuston sisältöä visuaalisesti muuttamalla html/css-koodia elementtipaneelissa. Kuten luultavasti huomasit (tai ehkä et), vasemmassa ikkunassa näkyy html-dokumentti ja oikeassa ikkunassa css. Suorittamalla yksinkertaisia käsittelyjä tiedoilla voit muuttaa avoimen sivun sisältöä ja ulkoasua. Voit esimerkiksi muuttaa ikkunan tekstiä, jos muokkaat sitä html-tekstitekstissä, ja myös muuttaa sivun fonttia muuttamalla sen arvoa css-kentässä. Mutta tämä ei tallenna syötettyjä tietoja, vaan auttaa yksinkertaisesti arvioimaan tehtyjä muutoksia visuaalisesti. Lisäksi voit tarkastella tietyn sivuelementin koodia. Voit tehdä tämän napsauttamalla sitä hiiren kakkospainikkeella ja valitsemalla "Näytä koodi" -komento.
Elements-paneelissa on yksi erittäin hieno ominaisuus. Saa nähdä miltä se näyttäisi avaa sivu joissakin laitteissa, joissa on eri näytön laajennus. Napsauttamalla Elements-välilehden vasemmalla puolella olevaa puhelinkuvaketta avautuu ikkuna, jossa voit muuttaa aiotun näytön kokoa ja näin emuloida tiettyä laitetta ja ohjata sivun näyttöä sillä. Se näyttää tältä:
Kun napsautat Valitse malli -painiketta, näkyviin tulee pudotusvalikko, jossa on valtava valikoima laitteet. Valitse mitä tarvitset - ja voila! Sivu näytetään ikään kuin se olisi laite. Tällä tavalla Elements-paneelia voidaan käyttää paitsi sivun katselemiseen tai muokkaamiseen, myös näyttölaitteiden emulointiin. Kaikki on yhdistetty ja saatavilla Chromessa!
Paneeli Konsoli
Testaajien suosituin välilehti, koska täällä näemme koodista löydetyt virheet skriptiä suoritettaessa. Tämä paneeli näyttää myös erilaisia varoituksia ja suosituksia (kuten yllä olevassa kuvassa). Kaikki välilehdellä näkyvät viestit voidaan suodattaa. Virhe näyttää myös sijaintinsa ja sitä klikkaamalla pääset Lähteet-välilehdelle, jossa virhe näkyy sivun yleisessä ulkoasussa.
Voit tyhjentää Konsoli-välilehden kentän (jos sinun on poistettava aikaisemmista virheistä kertovat viestit) napsauttamalla yliviivattua ympyräkuvaketta. Voit suodattaa viestejä konsolissa tyypin mukaan - virheet, varoitukset, tiedot, vakiolähtö, virheenkorjausviestit, korjattu - valitsemalla jokin seuraavista Käytettävissä olevat vaihtoehdot konsolit.
Paneeli Lähteet
Yleensä tällä välilehdellä ohjelmoijat korjaavat koodia. Siinä on 3 ikkunaa (vasemmalta oikealle):
- Alue lähdetiedostot. Se sisältää kaikki sivulle liitetyt tiedostot, mukaan lukien JS/CSS.
- Tekstialue. Se sisältää tiedostojen tekstin.
- Tieto- ja ohjausalue.
Valitse lähdetiedostoalueelta välttämätön elementti, tekstivyöhykkeellä se suoritetaan suoraan virheenkorjausalueella, ja tieto- ja ohjausvyöhykkeellä voit käynnistää/pysäyttää virheenkorjauskoodin.
Paneeli Verkko
Tämän välilehden päätehtävä on tallentaa verkkoloki. Se tarjoaa reaaliaikaisen näkyvyyden resursseihin, joita pyydetään ja ladataan. Voit tunnistaa, mitä resursseja ladataan ja käsitellään Suuri määrä aikaa, jotta tiedämme myöhemmin, missä ja millä tavoilla sivu voidaan optimoida.
On myös syytä huomata, että se on tässä välilehdessä Suuri tila pyyntöriveillä voit tarkastella palvelimelle lähetettyjä pyyntöjä sekä sieltä tulevia vastauksia, niiden sisältöä ja ominaisuuksia.
Suorituskykypaneeli
Tätä välilehteä käytetään tarvittaessa täysi arvostelu käytetty aika. Mihin se käytettiin, kuinka paljon sitä tarvittiin tähän tai tuohon prosessiin. Tässä näytetään ehdottomasti kaikki toiminta, mukaan lukien resurssien lataaminen ja Javascriptin suorittaminen.
Tämä paneeli mahdollistaa web-sovelluksen tai sivun suoritusajan ja muistin käytön profiloinnin, mikä auttaa ymmärtämään tarkasti, mihin paljon resursseja käytetään ja miten koodia voidaan optimoida.
prosessoriprofiloija tarjoaa tietoa Javascriptin suorittamiseen käytetystä ajasta.
Kasan profiloija näyttää muistin varauksen.
JavaScript profiili yksityiskohtaiset tiedot, missä tarkalleen aika kului skriptien suorittamiseen.
Suunniteltu tutkimaan ladattuja elementtejä. Mahdollistaa vuorovaikutuksen HTML5-tietokannan, paikallisen tallennustilan, evästeiden, sovellusvälimuistin jne. kanssa. Tällä välilehdellä voit tyhjentää evästeet avaamalla tämän välilehden ja napsauttamalla yliviivattua ympyräkuvaketta
Paneeli Tarkastukset
Tämä paneeli toimii sivuanalysaattorina latautuessaan. Tarkastuksen tuloksena näyttää siltä, että suositukset sivujen lataamisen optimoimiseksi ja vastausnopeuden lisäämiseksi. Esimerkkejä optimointimenetelmistä voi nähdä alla olevassa ikkunassa.
Turvapaneeli
Turvapaneeli näyttää tiedot jokaisesta pyynnöstä ja korostaa ne, joiden vuoksi sivusto ei saa toivottua vihreää kuvaketta tilassa.
Lisäksi voit saada seuraavat tiedot:
- varmenteen tarkistamisesta, onko sivusto vahvistanut aitouden TLS-sertifikaatilla;
- TLS-yhteys, joka osoittaa, käyttääkö sivustosi nykyaikaisia suojattuja protokollia;
- ladattujen toissijaisten lähteiden turvallisuus.
Itse asiassa kehittäjätyökalut (Chrome-selaimen konsoli) ovat erittäin hyödyllinen asia, josta voi usein olla hyötyä meille, testaajille. Vielä enemmän hyödyllistä tietoa verkkosivustolla https://developers.google.com/web/tools/chrome-devtools/
Jos kaupan sovellussivun sisällön tehokkuuden arvioiminen on sinulle pimeää metsää, kiinnitä huomiota Google Play Kehittäjäkonsoli. Kerron sinulle, kuinka voit työskennellä tämän työkalun kanssa.
Mikä on Google Play Developers Console?
Kun sovelluksesi apk-tiedosto on valmis, sinun on lisättävä se kauppaan Google-sovellukset Pelata.
Uusien käyttäjien määrä ei ole sama kuin asennusten määrä samana ajanjaksona.
Raportissa on saatavilla kaksi kriteeriä: tiedot liikenteen lähteittäin ja tiedot maittain. Voit luoda raportin päivälle, viikolle tai kuukaudelle, mutta et voi valita ajanjaksoa mielivaltaisesti.
Raportti esitetään suppilon muodossa.
- Yksittäiset vierailijat sovellussivulla kaupassa.
- Niiden käyttäjien määrä, jotka asensivat sovelluksen katsottuaan sen.
- Ostajien määrä.
- Toistuvia asiakkaita.
Tiedot luodaan kohortin muodossa, eli valitun ajanjakson raportti sisältää vain ne käyttäjät, jotka vierailivat sivulla ja asensivat sovelluksen tänä aikana. Mitä kohorttianalyysi on ja miksi se on tärkeää markkinointitutkimus, me kirjoitimme.
Indeksi Pelikauppa- Nämä ovat ASO-tuloksia, eli tuloksia sivun optimoinnista ja sen indeksoinnista sovelluskaupassa.
Pohjimmiltaan nämä ovat ainutlaatuisia käyttäjiä, jotka saapuivat sovellussivullesi etsiessään tai selaamalla sovelluksia Play Kaupasta.
3. Osio "Arviot ja arvostelut"
"Arviot"-alaosio on raportti, jonka avulla voit nähdä arvioiden dynamiikan päivä-, viikko- ja kuukausikohtaisesti ja arvioida, miten käyttäjät suhtautuivat uuden ominaisuuden käyttöön.
"Arvostelut" on kenttä mainejohtajasi, SMM-asiantuntijasi tai muun henkilön toiminnalle, joka on vastuussa kommunikaatiosta käyttäjien kanssa, jotka kirjoittavat sinulle pyyntöjä/valituksia myymälän arvosteluissa.
Tässä osiossa Googlen järjestelmä Play Developers Console pyytää sinua vapaaehtoisesti ja pakollisesti tekemään jotain ja näyttää, mitä olet jo tehnyt. Lisää esimerkiksi kuvakaappauksia tableteille, jos sovelluksesi tukee tällaisia laitteita.
5. Osio "Google Playn tiedot"
Tämä osio täydentää edellistä raporttia, koska se näyttää, mitä kauppasivulla näytetään - kieli, Lyhyt kuvaus, Täysi kuvaus, kuvake, graafiset materiaalit.
Päällä Google-sivu Play, on erittäin suositeltavaa lisätä mainosvideo, koska se vaikuttaa sivusi houkuttelevuuteen kaupan ja käyttäjän kannalta.
johtopäätöksiä
Google Play Developers Console – työkalu, jota voidaan ja pitäisi käyttää markkinointiin mobiilisovellus. Kun ymmärrät Google Play -kehittäjäkonsolin, ymmärrät:
- kuinka kauppa näkee sovelluksesi;
- kuinka kauppa näyttää sisältösi tehokkuuden sovellussivulla.
Pohjimmiltaan se on tärkeä linkki tuotekehittäjän ja sen käyttäjien välillä.
Ensimmäinen kuva on valokuva Freddy Fabrisista "The Renaissance Series" -projektista.
- Käännös
Kuinka käyttää kehittäjäkonsolia kääntämiseen Google Chrome samankaltaisessa muodossa tekstieditori? Minkä merkityksen monille jQuerysta tuttu kuvake saa? $ ? Kuinka voin näyttää joukon arvoja konsolissa muotoiltuna melko kunnolliseksi taulukoksi? Jos vastaukset näihin kysymyksiin eivät heti tule mieleen, välilehti Konsoli Chromen kehittäjätyökalut eivät ole vielä paljastaneet itseään sinulle kaikessa loistossaan.
Ensi silmäyksellä edessämme on täysin tavallinen JavaScript-konsoli, joka soveltuu vain palvelimen vastauslokien tai muuttujien arvojen näyttämiseen. Muuten, niin käytin sitä, kun aloitin ohjelmoinnin. Ajan myötä sain kuitenkin kokemusta, opin vähän lisää ja huomasin yllättäen, että Chrome-konsoli pystyy tekemään monia asioita, joista minulla ei ollut aavistustakaan. Haluan puhua tästä tänään. Kyllä, jos et lue nyt matkapuhelimella, voit kokeilla kaikkea tätä heti.
1. DOM-elementtien valinta
Jos olet perehtynyt jQueryyn, ei ole minun asiani kertoa sinulle sellaisten konstruktien tärkeydestä kuin $('.class') Ja $('id'). Niille, jotka eivät tiedä, voit valita DOM-elementtejä määrittämällä niille määritetyt luokat ja tunnisteet. Kehittäjäkonsolissa on samanlaiset toiminnot. Tässä "$":lla ei kuitenkaan ole mitään tekemistä jQueryn kanssa, vaikka se tekee olennaisesti saman asian. Tämä on toiminnon alias document.querySelector().Lomakkeen komennot $('tagName'), $('.class'), $('#id') Ja $('.class #id') palauttaa ensimmäisen valitsinta vastaavan DOM-elementin. Lisäksi, jos jQuery on saatavilla asiakirjassa, tämä konsolitoiminto ohittaa sen "$".
Täällä on toinen malli: $$ . Sen käyttö näyttää $$('tagName') tai $$('.luokka'). Sen avulla voit valita kaikki valitsinta vastaavat DOM-elementit ja sijoittaa ne taulukkoon. Työskentely sen kanssa ei eroa muista matriiseista. Jos haluat valita tietyn elementin, voit käyttää sitä indeksin avulla.
Esimerkiksi komento $$('.className') tarjoaa meille joukon kaikkia sivuelementtejä, joiden luokan nimi on määritetty sitä kutsuttaessa. Joukkueet $$('.className') Ja $$('.className') antaa pääsyn tuloksena olevan taulukon ensimmäiseen ja toiseen elementtiin.
Kokeilu komentojen kanssa $
Ja $$
2. Muuta selain tekstieditoriksi
Oletko koskaan saanut itsesi ajattelemaan, että olisi mukavaa muokata virheenkorjauksen kohteena olevan verkkosivun tekstiä suoraan selaimessa? Jos kyllä, pidät alla esitetystä komennosta.Document.body.contentEditable=true
Konsolissa suorituksen jälkeen selaimessa avattua dokumenttia voidaan muokata ilman hakua haluttu fragmentti HTML-koodissa.
3. Elementtiin sidottujen tapahtumakäsittelijöiden etsiminen
Viankorjauksen aikana saatat joutua etsimään elementteihin sidottuja tapahtumakäsittelijöitä. Tämä on erittäin helppo tehdä konsolin avulla. Sinun tarvitsee vain käyttää tätä komentoa:GetEventListeners($('valitsin'))
Sen suorittamisen tuloksena tuotetaan joukko objekteja, jotka sisältävät luettelon tapahtumista, joihin elementti voi vastata.
Tapahtumanjärjestäjät
Löytääksesi käsittelijän tietylle tapahtumalle, voit käyttää seuraavaa rakennetta:
GetEventListeners($('valitsin')).eventName.listener
Tämä komento tulostaa tapahtumakäsittelijän toimintokoodin. Tässä tapahtuman nimi on taulukko, joka sisältää kaikki tapahtumat tietty tyyppi. Käytännössä se voi näyttää esimerkiksi tältä:
GetEventListeners($('#firstName')).click.listener
Tämän seurauksena saamme tapahtumaan liittyvän toiminnon koodin klikkaus elementti tunnuksella etunimi.
4. Tapahtumavalvonta
Jos haluat tarkkailla tapahtumien esiintymistä tietty elementti DOM, konsoli auttaa tässä. Tässä on joitain komentoja, joilla voit seurata tapahtumia.- Tiimi monitorEvents($('valitsin')) voit järjestää kaikkien tapahtumien seurannan, jotka liittyvät valitsinta vastaavaan elementtiin. Kun tapahtuma tapahtuu, konsoliin tehdään merkintä. Esimerkiksi komento monitorEvents($('#etunimi')) voit kirjata kaikki tapahtumat, jotka liittyvät elementtiin, jonka tunniste on etunimi.
- Tiimi monitorEvents($('valitsin'),'tapahtumannimi') samanlainen kuin edellinen, mutta se on suunnattu tiettyyn tapahtumaan. Tässä elementin valitsimen lisäksi funktiolle välitetään myös tapahtuman nimi. Tämän komennon avulla voit näyttää konsolille tiedot yhden tapahtuman esiintymisestä. Esimerkiksi komento monitorEvents($('#firstName'),'click') näyttää tiedot vain tapahtumasta klikkaus elementti tunnuksella etunimi.
- Tiimi monitorEvents($('valitsija'),['tapahtumannimi1','tapahtumannimi3",….]) voit seurata useita valittuja tapahtumia. Tässä funktiolle välitetään merkkijonotaulukko, joka sisältää tapahtumien nimet. Esimerkiksi tämä komento: monitorEvents($('#firstName'),['click', 'focus']) tulostaa tapahtumatiedot konsoliin klikkaus Ja keskittyä elementille, jolla on id etunimi.
- Tiimi unmonitorEvents($('valitsin')) voit lopettaa tapahtumien seurannan ja kirjaamisen konsolissa.
5. Koodikappaleen suoritusajan mittaaminen
Katselutoiminto on käytettävissä Chrome-konsolissa console.time('labelName'), joka ottaa tunnisteen argumenttina ja käynnistää ajastimen. Vielä yksi toiminto console.timeEnd('labelName'), pysäyttää ajastimen, jolle sille välitetty tarra on määritetty. Tässä on esimerkki näiden toimintojen käytöstä:Console.time("myTime"); //Käynnistää ajastimen, jonka nimi on myTime console.timeEnd("myTime"); //Pysäyttää myTime-tunnisteen //Output: myTime:123.00 ms
Yllä olevan esimerkin avulla voit selvittää ajastimen käynnistämisen ja pysäyttämisen välisen ajan. Voit tehdä saman JavaScript-ohjelman sisällä ja löytää koodinpalan suoritusajan.
Oletetaan, että minun on selvitettävä silmukan kesto. Voit tehdä sen näin:
Console.time("myTime"); // Käynnistää ajastimen, jonka nimi on myTime for(var i=0; i< 100000; i++){ 2+4+5; } console.timeEnd("mytime"); // Останавливает таймер с меткой myTime //Вывод - myTime:12345.00 ms
6. Muuttujien arvojen näyttäminen taulukoiden muodossa
Oletetaan, että meillä on joukko objekteja, kuten tämä:Muutt 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)]
Jos näytät sen konsolissa, se tulee näkyviin hierarkinen rakenne itse asiassa joukon esineitä muodossa. Tämä - hyödyllinen tilaisuus, rakenteen haaroja voi laajentaa tarkastelemalla objektien sisältöä. Tällä lähestymistavalla on kuitenkin vaikea ymmärtää, miten samankaltaisten elementtien ominaisuudet liittyvät toisiinsa. Jotta tällaisten tietojen kanssa työskentely olisi mukavampaa, ne voidaan muuntaa taulukkonäkymä. Voit tehdä tämän käyttämällä seuraavaa komentoa:
Console.table(muuttujanNimi)
Sen avulla voit näyttää muuttujan ja kaikki sen ominaisuudet taulukon muodossa. Tältä se näyttää.
Objektijoukon näyttäminen taulukona
7. Tarkastele elementtikoodia
Pääset nopeasti elementtikoodiin konsolista seuraavilla komennoilla:- Tiimi tarkasta($('valitsin')) voit avata paneelin valitsinta vastaavan elementin koodin Elementit työkaluja Googlen kehittäjä Kromi. Esimerkiksi komento tarkastaa($('#etunimi')) avulla voit tarkastella elementin koodia tunnisteella etunimi. Tiimi tarkastaa($$('a')) avaa koodin neljännelle linkille, joka on DOM:ssa.
- Lomakkeen komennot $0 , $1 , $2 Voit siirtyä nopeasti viimeksi katsottuihin kohteisiin. Esimerkiksi, $0 avaa viimeksi katsotun elementin koodin ja niin edelleen.
8. Elementin ominaisuuksien luettelon näyttäminen
Jos haluat tarkastella elementin ominaisuuksien luetteloa, konsoli auttaa myös tässä. Tässä käytetään seuraavaa komentoa:Dir($('valitsin'))
Se palauttaa objektin, joka sisältää annettuun liittyviä ominaisuuksia DOM-elementti. Kuten muissakin vastaavissa tapauksissa, tämän objektin sisältöä voidaan tarkastella tarkastelemalla sen puurakennetta.
9. Viimeisimmän vastaanotetun tuloksen kutsuminen
Konsolia voidaan käyttää laskimena, kuten kaikki varmaan tietävät. Mutta harvat tietävät, että siinä on sisäänrakennetut työkalut, joiden avulla voit käyttää aikaisempien laskelmien tuloksia komentoissa. Suunnittelultaan $_ voit hakea edellisen lausekkeen tuloksen muistista. Tältä se näyttää:2+3+4 9 //- Summauksen tulos on 9 $_ 9 // Viimeinen saatu tulos näytetään $_ * $_ 81 // Koska viimeinen tulos on 9, saadaan 81 Math.sqrt($ _) 9 // Neliöjuuri viimeisestä tuloksesta, joka oli 81 $_ 9 // Saamme jälleen 9 - tulos edellinen laskelma
10. Konsolin ja muistin puhdistaminen
Jos sinun on tyhjennettävä konsoli ja muisti, käytä tätä yksinkertaista komentoa:Asia selvä()
Enter-näppäimen painamisen jälkeen puhdas konsoli on valmis uusia kokeiluja varten.
Siinä kaikki.
