Co je konzole pro vývojáře. Konzole v počítačových hrách. Sekce „Data pro Google Play“

Rozhraní API příkazového řádku Chrome DevTools obsahuje velký počet pohodlné funkce pro provádění jednoduchých úkolů: výběr a kontrola prvků DOM, zobrazení dat v čitelném formátu, spuštění a testování profileru a sledování událostí DOM.

Poznámka: toto API je dostupné pouze uvnitř konzole. Ze skriptů na stránce nemůžete přistupovat k příkazovému řádku API.

$_

$_ vrátí hodnotu posledního provedeného výrazu.

Níže uvedený příklad se vyhodnotí jako jednoduchý výraz (2 + 2). Poté se provede $_ a je mu přiřazena stejná hodnota:

V tomto příkladu provedený výraz obsahoval pole názvů. Spuštění $_.length dá délku pole a samotný výraz $_ bude mít hodnotu posledního provedeného výrazu, což je 4:

$0 – $4

Příkazy $0 , $1 , $2 , $3 a $4 fungují jako odkazy na posledních 5 prvků DOM, které byly zobrazeny v panelu Prvky, nebo na posledních 5 objektů JS z haldy, které byly vybrány v panelu Profily. $0 vrátí prvek nebo objekt vybraný jako poslední, $1 vrátí prvek nebo objekt před ním atd.

V níže uvedeném příkladu je v panelu Prvky vybrán prvek média třídy. V konzoli mělo 0 $ stejnou hodnotu:

Na obrázku níže je vybrán další prvek na stejné stránce. $0 nyní odkazuje na tento prvek a $1 na předchozí:

$ (selektor)

$(selektor) vrací odkaz na první prvek DOM se zadaným selektorem CSS. Tato funkce je zkratkou pro funkci document.querySelector().

Klikněte pravým tlačítkem na výsledek a vyberte „Odhalit na panelu prvků“, chcete-li prvek vyhledat v DOM, nebo „Posunout k zobrazení“, chcete-li jej zobrazit na stránce.

Poznámka: Pokud používáte knihovny jako jQuery, které používají symbol $, použije se funkce této knihovny.

$$ (selektor)

$$(selektor) vrátí pole prvků obsahující zadaný selektor. Tento příkaz je ekvivalentní volání document.querySelectorAll() .

Následující příklad používá $$() k vytvoření pole všech prvků v dokumentu a vrátí vlastnost src každého prvku:

Var obrázky = $$("img"); pro (každý v obrázcích) ( console.log(images.src); )

Poznámka: Stisknutím Shift + Enter v konzole přejdete na nový řádek bez provedení skriptu.

$x(cesta)

$x(cesta) vrací pole prvků, které odpovídají danému výrazu XPath.

Tento příklad vrátí všechny prvky

$x("//p")

A tohle jsou všechny prvky

Obsahující prvek :

$x("//p[a]")

Průhledná()

clear() vymaže historii konzole.

Průhledná();

kopírovat (objekt)

copy(object) zkopíruje řetězcovou reprezentaci zadaného objektu do schránky.

Kopírovat($0);

ladit (funkce)

Když je tato funkce volána, je volán debugger, který vám umožňuje provést ji krok za krokem v panelu Zdroje.

Debug(getData);

Použijte undebug(fn) k ukončení ladění nebo rozhraní k odstranění všech zarážek.

dir (objekt)

dir(object) zobrazí seznam všech vlastností zadaného objektu. Tato metoda je náhradou za metodu console.dir().

Následující příklad ukazuje rozdíl mezi voláním document.body na příkazovém řádku a použitím dir() k zobrazení stejného prvku:

Dokument.tělo; dir(dokument.tělo);

Další informace najdete v sekci console.dir() rozhraní API konzoly.

dirxml (objekt)

dirxml(object) vypíše reprezentaci XML zadaného objektu. Tato metoda je ekvivalentní metodě console.dirxml().

prohlédnout (objekt/funkce)

inspect(objekt/funkce) se otevře a vybere zadaný prvek nebo objekt v příslušném panelu: Prvky nebo Profily.

Tento příklad otevře document.body na panelu Prvky:

Inspect(document.body);

Když předáte funkci, otevře se dokument v panelu Zdroje.

getEventListeners(objekt)

getEventListeners(object) vrátí všechny posluchače událostí vázané na zadaný objekt. Vrácená hodnota je objekt obsahující pole pro všechny nalezené typy událostí (například „click“ nebo „keydown“). Prvky každého pole jsou objekty, které popisují posluchače každého typu. Například následující příklad vytiskne všechny posluchače událostí objektu dokumentu:

GetEventListeners(dokument);

Pokud má objekt připojen více než jeden posluchač, pole obsahuje prvky pro každý z nich. Zde jsou například dva posluchače události "mousedown" připojené k prvku #scrollingList:

Můžete zobrazit vlastnosti každého z těchto objektů:

klíče (objekt)

keys(object) vrací pole názvů vlastností objektu. Chcete-li získat hodnotu vlastností, použijte value() .

Řekněme, že vaše aplikace deklaruje následující objekt:

Var player1 = ( "name": "Ted", "level": 42)

Nechte hráče1 deklarovat globálně, pak klíče (hráč1) a hodnoty (hráč1) vypíší následující:

monitor (funkce)

Když zavoláte zadanou funkci, v konzole se zobrazí zpráva, že tato funkce byla volána s příslušnými argumenty.

Funkce sum(x, y) ( return x + y; ) monitor(sum);

Pro zrušení použijte unmonitor(function) .

monitorEvents(objekt, )

Když na zadaném objektu dojde k jedné ze zadaných událostí, objekt Event se zapíše do konzoly. Můžete zadat konkrétní událost, pole událostí nebo jeden z „typů“ událostí. Příklady níže.

Následující dotaz sleduje všechny změny velikosti objektu okna.

MonitorEvents(okno, "změna velikosti");

Tento dotaz monitoruje všechny události „změna velikosti“ a „posouvání“ v objektu okna:

MonitorEvents(okno, ["změnit velikost", "posun"])

Můžete také určit jeden z dostupných „typů“ událostí z tabulky níže:

Tento dotaz například monitoruje všechny události typu „klíč“ na vybraném prvku na panelu Prvky:

MonitorEvents($0, "klíč");

Zde je příklad výstupu po zadání znaků do textového pole:

profile() a profileEnd()

Chcete-li spustit profilování:

Profil ("Můj profil")

Dokončit:

ProfileEnd("Můj profil")

Profily lze také vnořit:

Profil("A"); profil("B"); profileEnd("A"); profileEnd("B");

Výsledek:

Poznámka: Profilery mohou běžet souběžně a nemusí se zavírat v pořadí, v jakém byly vytvořeny.

tabulka (data, )

Výstup objektových dat ve formátu tabulky. Chcete-li například zobrazit seznam jmen, musíte provést následující:

Jména var = ( 0: ( jméno: "John", příjmení: "Smith" ), 1: ( jméno: "Jane", příjmení: "Doe" ) ); tabulka(jména);

odladit (funkce)

undebug(function) zastaví ladění zadané funkce.

Undebug(getData);

unmonitor (funkce)

unmonitor(funkce) přestane sledovat zadanou funkci.

Unmonitor(getData);

unmonitorEvents(object, )

unmonitorEvents(object, ) přestane monitorovat zadaný objekt a události:

UnmonitorEvents(okno);

Můžete také zastavit sledování jednotlivých událostí:

MonitorEvents($0, "myš"); unmonitorEvents($0, "mousemove");

hodnoty (objekt)

value(object) vrací pole obsahující hodnoty všech vlastností zadaného objektu.

Vývojářská konzole umožňuje přidávat své aplikace pro Android do Google.Play, sledovat jejich statistiky, měnit popis a přijímat finanční zprávy o prodeji placených aplikací. Samotná konzole je k dispozici na https://play.google.com/apps/publish

Pokud se do konzole přihlašujete poprvé, můžete začít s nastavením, kde nastavíte jméno vývojáře a přístupová práva dalších lidí.

Jméno vývojáře je veřejné jméno, které se zobrazuje v popisu každé z vašich aplikací na Google.Play. I když to lze snadno změnit, je lepší volit název zodpovědně, mnoho uživatelů spojuje aplikace se jménem vývojáře.

Musí tam být uvedena i e-mailová adresa a telefonní číslo. Nejsou publikovány a jsou potřebné pro interní účely.

V sekci „Účty a přístupová práva“ můžete pozvat libovolný počet dalších vývojářů a definovat jejich práva. Aby se uživatelé mohli přihlásit do konzole, musí mít účet Google. Protokol činnosti umožňuje sledovat aktivity všech uživatelů.

Finanční zprávy jsou dostupné pouze pro placené aplikace. Nejprve musíte kliknout na odkaz „Založit účet prodejce“, uvést své celé jméno a parametry bankovního účtu nebo karty, kam budou zasílány vydělané peníze. Časové rozlišení se vyskytuje v dolarech a převádí se, když je dosaženo prahu 100 USD. Proto je lepší získat dolarovou bankovní kartu, to lze provést v jakékoli bance, získat údaje o kartě od stejné banky a uvést je ve svém profilu prodejce. Nebudete tak závislí na směnných kurzech a obdržíte přesně takovou částku, kterou vám Google připsal.

Pro Rusko je minimální cena za aplikaci 30 rublů, maximum je 6 tisíc rublů. Pro Ukrajinu se ceny pohybují od 8 do 1650 hřiven. Pamatujte také, že Google si z každého prodeje bere 30% provizi, takže ze stanovené minimální ceny 30 rublů dostanete ve skutečnosti jen 21 rublů. To je třeba vzít v úvahu při výpočtu zisku.

Pro přehled možností konzole.

Obsah

Tisk v konzole

Textový vstup do konzole je dostupný ze všech modulů a je řízen pomocí Tier(). Existují 3 další příkazy Msg() , DevMsg() a Warning(), které podporují výstup formátovaného řetězce jako sprintf():

DevMsg (char const* pMsg, ...) - pouze v režimu vývojáře Msg(char const* pMsg, ...) - vždy, bílý text Warning(char const *pMsg, ...) - vždy, červený text

Pro zpětnou kompatibilitu s HL1 byly zachovány příkazy Con_Printf() a Con_DPrintf().

Provádění příkazů

Motor používá serverové a klientské rozhraní k provádění příkazů (řetězců). Server používá rozhraní IVEngineServer::ServerCommand():

Engine->ServerCommand("changelevel de_dust\n");

Klient používá rozhraní IVEngineClient a vybírá si mezi dvěma příkazy, které určují, zda bude příkaz spuštěn jako první na klientovi nebo odeslán přímo na server:

Engine->ServerCmd("pozdravit\n"); // odeslání příkazu na server

Engine->ClientCmd("ahoj\n"); // spusťte příkaz na klientovi

Přidávání nových příkazů a proměnných

Vývojářská konzole je subsystém Source enginu, který umožňuje přístup k různým modulům prostřednictvím rozhraní ICvar (viz \public\icvar.h). Toto rozhraní registruje nové příkazy a vyhledává stávající. Toto rozhraní je přístupné prostřednictvím globální proměnné CVAR v kódu klient-server (cv v kódu motoru). Příkazy konzoly patří do třídy ConCommand a proměnné konzoly patří do třídy ConVar, přičemž obě pocházejí ze základní třídy ConCommandBase (viz \public\convar.h).

Přidávání nových příkazů a proměnných je poměrně jednoduché a lze je použít pro serverové i klientské (stejné pro celý engine) moduly. Konstruktor těchto tříd automaticky zaregistruje nový příkaz/proměnnou v konzolovém systému. Tento krátký příklad kódu přidává nový příkaz my_function a novou proměnnou my_variable inicializovanou na 42:

#zahrnout ConVar my_variable("moje_proměnná", "42", FCVAR_ARCHIVE, "Moje oblíbené číslo"); void MyFunction_f(void) ( Msg("Toto je moje funkce\n"); ) ConCommand my_function("moje_funkce", MyFunction_f, "Zobrazuje zprávu.", FCVAR_CHEAT);

Toto je běžné použití, když jsou jméno objektu a příkaz stejné a proměnné jsou použity pouze v jednom zdrojovém kódu a jsou popsány jako statické.

Pomocí třídy ConVar

Nejprve se podívejme na nejpoužívanější konstruktor ConVar:

ConVar(char const *pName, char const *pDefaultValue, int příznaky, char const *pHelpString)

První argument pName je název proměnné (bez mezer), další pDefaultValue je vždy řetězec, a to i pro ConVar "s s číselnými hodnotami. Příznaky definují speciální vlastnosti proměnné, všechny deklarace příznaku začínají FCVAR_*, ​​​​ale o tom později Je velmi dobré použít pHelpString, aby uživatelé pochopili, k čemu tato proměnná je, nejsou omezeny na konkrétní typ, jejich hodnota může být celé číslo nebo reálná hodnota nebo řetězec a můžete ji použít. jak chcete, pokud máte samotný objekt ConVar nebo ukazatel na něj, můžete se podívat a změnit jeho hodnotu přímo.

If (my_variable.GetInt() == 42) DoSomething(); if (my_variable.GetFloat() == 42.0f) DoSomething(); if (strcmp(my_variable.GetString(), "42")==0) DoSomething();

Chcete-li nastavit hodnotu ConVar, musíte použít funkci SetValue() pomocí jakýchkoli datových typů:

My_variable.SetValue(42); moje_proměnná.SetValue(42.0f); moje_proměnná.SetValue("42");

Hodnotu ] můžete kdykoli resetovat zpět na její výchozí hodnotu pomocí funkce Revert().

Pokud je ConVar vytvořen v různých modulech, pak se v rozhraní ICvar použije funkce FindVar() k získání ukazatele na objekt, pokud je nastaven název proměnné. Zde je jednoduchý příklad, který zkontroluje, zda je nainstalován ConVar sv_cheats definovaný v modulu motoru:

ConVar *pCheats = cvar->FindVar("sv_cheats"); if (pCheats && pCheats->GetInt() == 1) AllowCheating();

Rozsah platných hodnot lze pro numerické ConVars určit pomocí jiného konstruktoru. Poté je ConVar automaticky zkontrolován konzolovým systémem při každé ruční změně. Pokud je zadané číslo mimo rozsah, zaokrouhlí se na další správnou hodnotu. Nastavení rozsahu správných hodnot od 1 do 100:

ConVar my_variable("moje_proměnná", "42", 0, "text nápovědy", pravda, 1, pravda, 100);

Někdy chcete být upozorněni, když uživatel nebo jiný subsystém změní hodnotu vašeho ConVar , takže lze nastavit funkci zpětného volání:

Static void OnChangeMyVariable (ConVar *var, char const *pOldString) ( DevMsg("ConVar %s byl změněn z %s na %s\n", var->GetName(), pOldString, var->GetString()); ) ConVar my_variable("moje_proměnná", "42", 0, "Moje oblíbené číslo", OnChangeMyVariable);

Použití třídy ConCommand

Třída ConCommand je jednodušší než ConVar a má pouze jeden konstruktor:

ConCommand(char const *pName, FnCommandCallback callback, char const *pHelpString = 0, int flags = 0, FnCommandCompletionCallback completeFunc = 0);

Stejně jako ConVar, pName určuje název příkazu (bez mezer!). callback je funkce, která se provede, když uživatel provede tento příkaz, pHelpString a příznaky mají stejné funkce jako v ConVar. ConCommands podporuje automatické doplňování prvního parametru, zejména při použití pro zpracování souborů. Například použijete příkaz loadtext lt;textfilegt ; který předpokládá jako vstup soubor .txt, konzola vyhledává všechny dostupné soubory .txt a umožňuje uživateli vybrat jeden ze seznamu. Je-li správná, completeFunc projde, je volána pokaždé, když konzolový systém potřebuje seznam dostupných argumentů.

Když je provedena funkce zpětného volání, parametry zadané v konzole Ne jsou dodávány jako argumenty funkce. Funkce zpětného volání se musí zeptat motoru, kolik argumentů bylo přijato pomocí funkce rozhraní motoru Cmd_Argc() . Jednotlivé argumenty pak můžete získat pomocí Cmd_Argv(index) , kde index 1 je první argument. Argumenty jsou vždy vráceny jako řetězce.

Void MySay_f (void) ( if (engine->Cmd_Argc()< 1) { Msg(""Usage: my_say \n"); return; ) Msg("Říkám: %s\n", engine->Cmd_Argv(1)); ) ConCommand my_say("my_say", MySay_f, "řekni něco", 0);

Toto je příklad toho, jak vytvořit jednoduchý seznam automatického dokončení. Neúplný parametr zde není použit; obsahuje znaky zadané tak dávno (včetně samotného názvu příkazu):

Static int MySayAutoComplete (char const *partial, char commands[ COMMAND_COMPLETION_MAXITEinMS ][ COMMAND_COMPLETION_ITEM_LENGTH ]) ( strcpy(příkazy, "ahoj"); strcpy(příkazy, "sbohem"); return 2 (můj a počet položek") my_say", MySay_f, "řekni něco", 0, MySayAutoComplete);

FCVAR_flags

Příkazy/proměnné konzoly používají příznaky, které mají určité vlastnosti a je třeba s nimi zacházet opatrně. Tyto příznaky používá konstruktor a lze je změnit pomocí ConCommandBase::AddFlags() (nepoužívá se příliš často). Je nemožné změnit tyto příznaky jinak než ve zdrojových kódech, aby nedošlo k cheatům. Některé příznaky musí být nastaveny ručně, jiné jsou nastavovány automaticky konzolovým systémem:

FCVAR_LAUNCHER, FCVAR_GAMEDLL, FCVAR_CLIENTDLL, FCVAR_MATERIAL_SYSTEM, FCVAR_STUDIORENDER

Tyto příznaky se nastavují během procesu registrace a ukazují na modul, kde je příkaz vytvořen (nemusíte je nastavovat). Následující příznaky je nutné nastavit ručně:

FCVAR_CHEAT
Používají se pro ladění a nejsou odstraněny z vydání, protože mohou být vyžadovány vývojáři modů a map. Bohužel nemůžeme dovolit normálním hráčům používat tyto ladicí nástroje, protože by to bylo nefér vůči ostatním hráčům (podvádění). Je dobrým pravidlem přidat FCVAR_CHEAT jako první ke všem novým příkazům konzole, které přidáte, pokud to pro hráče není definitivní a legální možnost. Zkušenosti ukazují, že i ty nejnebezpečnější ladicí příkazy lze tak či onak použít jako cheat.

Instalací sv_cheatů herní server rozhodne, zda jsou cheaty povoleny nebo ne. Pokud se klient připojil k serveru, kde jsou cheaty zakázány (mělo by to být výchozí nastavení), všechny proměnné klientské konzole označené FCVAR_CHEAT se vrátí na výchozí hodnotu a nelze je změnit, dokud klient zůstane připojen. Nelze provést ani příkazy konzoly označené FCVAR_CHEAT.

FCVAR_USERINFO
Některé proměnné konzoly obsahují informace o klientovi, o kterých server potřebuje vědět, jako jsou uživatelská jména nebo nastavení uživatelských jmen. Tyto proměnné musí být označeny příznakem FCVAR_USERINFO, poté budou potvrzeny serveru a aktualizovány pokaždé, když je uživatel změní. Když uživatel změní tyto proměnné, motor oznámí kód serveru pomocí ClientSettingsChanged() . Server se pak může dotazovat motoru na nastavení jednotlivých klientů pomocí GetClientConVarValue() .
FCVAR_REPLICATED
Herní server a klient používají stejný kód, takže je důležité, aby obě strany sledovaly stejnou cestu pomocí stejných dat (například předpověď pohybu/zbraně, pravidla hry). Pokud tento kód používá konzolové proměnné, musí mít na obou stranách stejné hodnoty. Příznak FCVAR_REPLICATED zajišťuje odesílání hodnot všem klientům. Během připojení nemohou klienti tyto hodnoty měnit, protože budou používat hodnoty serveru.
FCVAR_ARCHIVE
Některé proměnné konzoly obsahují uživatelská nastavení, která je chceme obnovit při každém spuštění hry (jako název nebo síťová_rychlost). Pokud je proměnná konzole označena FCVAR_ARCHIVE , uloží se po skončení hry do souboru config.cfg a načte se při příštím spuštění. (Příkaz host_writeconfig také uloží všechny hodnoty FCVAR_ARCHIVE do souboru.)
FCVAR_NOTIFY
Pokud je proměnná konzoly označena FCVAR_NOTIFY , server odešle zprávu všem klientům, kdykoli se proměnná změní. To by mělo být použito pro proměnné měnící hru, které jsou důležité pro všechny hráče (například mp_friendlyfire).
FCVAR_PROTECTED
Toto je konzolová proměnná obsahující soukromé informace (například heslo), nechceme, aby byla viditelná pro ostatní uživatele. Chcete-li to provést, musí být nastaven příznak FCVAR_PROTECTED, aby byly tyto informace označeny jako důvěrné.
FCVAR_SPONLY
Někdy může být provedení příkazu nebo změna proměnné správné pouze v režimu pro jednoho uživatele, poté příkaz označte jako FCVAR_SPONLY .
FCVAR_PRINTABLEONLY
Některé důležité proměnné jsou těžké nebo vysílající (například pravidla hry) a je důležité, aby obsahovaly pouze tisknutelné znaky (například žádné řídicí znaky).
FCVAR_NEVER_AS_STRING
Tento příznak říká motoru, aby nikdy nevydával tuto proměnnou jako řetězec, protože obsahuje sekvenci řídicích znaků.
FCVAR_DEMO
Když začnete nahrávat ukázkový soubor, je třeba k nahrávce přidat některé proměnné konzoly, aby se zajistilo správné přehrávání.
FCVAR_DONTRECORD
Toto je opak FCVAR_DEMO, některé proměnné konzoly by se neměly zapisovat do demo souborů.

Pokud je pro vás posuzování efektivity obsahu na stránce aplikace v obchodě temným pralesem, věnujte pozornost Vývojářské konzoli Google Play. Řeknu vám, jak s tímto nástrojem pracovat.

Co je Google Play Developers Console?

Jakmile bude soubor APK vaší aplikace připraven, musíte jej přidat do obchodu s aplikacemi Google Play.

Počet nových uživatelů se nerovná počtu instalací za stejné období.

V přehledu jsou k dispozici dvě kritéria: údaje podle zdroje návštěvnosti a údaje podle země. Report si můžete vygenerovat za den, týden nebo měsíc, bohužel nelze vybrat období libovolně.

Zpráva je prezentována ve formě trychtýře.

  1. Unikátní návštěvníci stránky aplikace v obchodě.
  2. Počet uživatelů, kteří si aplikaci nainstalovali po jejím zobrazení.
  3. Počet kupujících.
  4. Opakující se zákazníci.

Data jsou generována ve formě kohorty, to znamená, že přehled za zvolené časové období bude zahrnovat pouze ty uživatele, kteří navštívili stránku a nainstalovali aplikaci během tohoto časového období. Psali jsme o tom, co je kohortová analýza a proč je důležitá pro marketingový výzkum.


Indikátor Obchodu Play jsou výsledky vašeho ASO, tedy výsledky optimalizace stránky a její indexování v obchodě s aplikacemi.

V podstatě se jedná o unikátní uživatele, kteří se dostali na stránku vaší aplikace v důsledku hledání nebo procházení aplikací v Obchodě Play.

3. Sekce „Hodnocení a recenze“

Podsekce „Hodnocení“ je přehled, který vám umožňuje vidět dynamiku hodnocení podle dne, týdne, měsíce a vyhodnotit, jak uživatelé vnímali implementaci nové funkce.

„Recenze“ je pole pro činnost vašeho reputačního manažera, specialisty SMM nebo jakékoli jiné osoby, která je zodpovědná za komunikaci s uživateli, kteří vám píší požadavky/stížnosti do recenzí v obchodě.

V této sekci vás systém Google Play Developers Console dobrovolně požádá, abyste něco udělali, a ukáže vám, co jste již udělali. Přidejte například snímky obrazovky pro tablety, pokud vaše aplikace taková zařízení podporuje.

5. Sekce „Data pro Google Play“

Tato sekce doplňuje předchozí zprávu, protože ukazuje, co se zobrazuje na stránce obchodu – jazyk, krátký popis, úplný popis, ikona, grafika.

Je velmi vhodné přidat na stránku Google Play propagační video, protože to ovlivňuje atraktivitu vaší stránky pro obchod a uživatele.

závěry

Google Play Developers Console je nástroj, který lze a měl by být používán při marketingu mobilní aplikace. Jakmile porozumíte Vývojářské konzoli Google Play, pochopíte:

  • jak obchod vnímá vaši aplikaci;
  • jak obchod ukazuje efektivitu vašeho obsahu na stránce aplikace.

V podstatě jde o důležité spojení mezi vývojářem produktu a jeho uživateli.

První ilustrace je fotografie Freddyho Fabriceho z projektu „The Renaissance Series“.

Dobrý den, drazí přátelé. Vývojářský panel (konzole) v prohlížeči je nepostradatelným nástrojem pro každého majitele webu, pomocí kterého můžete rychle zobrazit html kód a styly css stránky. A také zjistěte chyby, které se vyskytly při načítání webu, a zkontrolujte přizpůsobivost webu.

Dnes budeme zvažovat práci s html kódem, css styly a přizpůsobivostí ve vývojářském panelu. Toto jsou nástroje, které jsou nutné k řešení většiny problémů.

Pro obecné pochopení obrázku uveďme příklad, kdy byste mohli potřebovat panel vývojáře.

Řekněme, že jste přišli na můj blog a zajímalo vás, jaké používám písmo nebo barvu a podobně. Obecně to může být jakýkoli prvek na webu. A totéž jste chtěli udělat na svém webu.

Poté se podíváte přes vývojářský panel v prohlížeči na požadovaný prvek, kde můžete vidět html kód a css styly pro něj.

Další možností použití panelu je, když chcete na webu něco udělat, ale ještě nevíte, jak to bude vypadat.

V tomto případě můžete také použít vývojářský panel a podívat se, jak bude váš nápad vypadat v prohlížeči. Koneckonců, vše, co děláte na vývojářském panelu, vidíte pouze vy. A aby vaše experimenty viděli návštěvníci, budete muset přenést styly a kódy do souborů webu.

Otevření panelu webmastera a seznámení se s rozhraním

Vývojářský panel je přítomen v každém moderním prohlížeči. Chcete-li jej otevřít, musíte stisknout klávesu F12 na klávesnici.

Rozhraní panelu se bude v různých prohlížečích lišit, ale principy fungování jsou podobné.

Preferuji panel v prohlížeči Firefox.

Samotný panel je rozdělen na dvě poloviny a obsahuje záložky a nástroje pro práci.

V panelu si můžete prohlédnout HTML kód stránky a upravit jej přímo tam. Chcete-li to provést, vyberte požadovaný prvek, klepněte pravým tlačítkem myši a vyberte z nabídky "Upravit jakoHTML (Upravittak jakoHTML)".


Chcete-li pracovat se styly, musíte přejít do části panelu CSS, kde můžete přidat styly nebo deaktivovat stávající odstraněním zaškrtávacího políčka vedle nich. Všechno se dá změnit.

Zde můžete zjistit, ve kterém souboru jsou styly umístěny a na jakém řádku.

Jak analyzovat html prvek na webu a zjistit jeho css styly

Podívejme se na můj příklad, který se nachází v každém článku.

Chcete-li analyzovat požadovaný prvek, musíte na něj kliknout pravým tlačítkem a vybrat položku nabídky .


Celý princip práce s kódem v panelu spočívá v tom, že v levém okně je potřeba vybrat html kód a v pravém budou styly pro tento prvek.

A pokud je vše se styly docela jednoduché, pak při práci s html kódem musíte pochopit jeho integritu. To znamená, že každý prvek má značky, ve kterých se nachází. Mohou to být odstavce, odkazy, obrázky a tak dále. Nejčastěji se jedná o bloky DIV, které mají otevírací značku < div> a zavírání div>. A to vše je na panelu jasně vidět.


Při kopírování nebo úpravách je důležité pochopit, kde blok začíná a kde končí. Udělat sebemenší chybu zde může narušit celé rozložení šablony.

Ve video tutoriálu se tomuto bodu budu věnovat podrobněji. A pokud si chcete rychle osvojit základní znalosti html a css, doporučuji přejít na stránku "Zdarma" a stáhněte si kurzy Evgeniy Popova.

Jak zkopírovat html kód z panelu do souborů webu

Nápadů na použití vývojářského panelu může být mnoho. Po experimentování v panelu musí být výsledek přenesen do souborů webu. A je zde určitá obtíž. Faktem je, že panel zobrazuje html kód a většina moderních stránek, včetně těch na platformě WordPress, je vytvořena pomocí programovacího jazyka PHP. A to je jako nebe a země.

Podívejme se tedy na příklad zkopírování banneru z mého blogu a jeho přenesení na jiný web.

Chcete-li to provést, musíte otevřít panel vývojáře a prozkoumat požadovaný prvek. Po určení začátku bloku DIV stiskněte pravé tlačítko mušky a vyberte položku nabídky „Kopírovat externěHTML"


Kód byl zkopírován do schránky a nyní jej musíte vložit na místo, kde chcete vidět tento banner.

Tento proces je poměrně obtížné popsat, proto doporučuji zhlédnout video tutoriál, ve kterém je vše podrobně vysvětleno a ukázáno.

Jak přenést styly z panelu vývojáře do souborů webu

Jakmile se rozhodnete pro kód a styly, můžete je začít přenášet do souborů webu. Protože zatím všechny tyto změny vidíte pouze vy v prohlížeči, a pokud stránku obnovíte, všechny změny zmizí.

, pro mě je to pohodlnější. Vzhledem k tomu, že při práci v programu Notepad++ existuje zvýraznění kódu a číslování řádků. A to hodně pomáhá, když nepotřebujete pouze kopírovat styly, ale provádíte změny ve stávajících. Tyto styly lze snadno najít podle čísla řádku.

Jak zkontrolovat odezvu šablony na vývojářském panelu

Pro přepnutí panelu do adaptivního režimu je potřeba stisknout kombinaci kláves CTRL+SHIFT+M nebo tlačítko ve vývojářském panelu, které je v různých prohlížečích umístěno různě.



Závěr

V tomto článku jsem se nepodíval na všechny nástroje vývojářského panelu, ale pouze na ty, které mohou být užitečné a používají je nejčastěji mnozí webmasteri.

Používání panelu a dovednosti v práci s kódem a styly jsou nepostradatelné při práci s webovými stránkami a affiliate programy.

Vezměte nástroj do provozu, bude se vám hodit ještě mnohokrát.

Pokud máte nějaké dotazy, rád je zodpovím v komentářích.

Přátelé, přeji vám úspěch. Uvidíme se v nových článcích.

S pozdravem Maxim Zaitsev.




Horní