Nemohu zobrazit kód stránky. Google Chrome – nástroje pro webmastery
Dnes se tedy podíváme na několik užitečných nástrojů pro webmastery, které usnadňují život při navrhování webu. Začněme konzolí pro webmaster v Google Chrome. A pojďme si projít otázky, které webmastera nejčastěji vyvstávají při návrhu webu.
Chcete-li se dostat do konzole, otevřete svůj web v prohlížeči Google Chrome, klikněte pravým tlačítkem myši kamkoli na webovou stránku a v kontextové rozbalovací nabídce vyberte možnost „Zobrazit kód stránky“ nebo vyberte konkrétní prvek, který chcete prostudovat, výběrem možnosti „Zobrazit kód“ živel".
V horní části bude uvedeno několik záložek. Dnes budeme hovořit o záložce „Prvky“. , který představuje prvky webové stránky se zvýrazněním značek, vlastností, zvýrazněním vnoření prvků, znázorněním hierarchie prvku ve stromu DOM (nápověda dole, od kořenového rodiče po aktuální), možnost upravovat prvky, seznam jejich vlastností, zvážit vyhledávání podle prvků a také Seznámíme se s prohlížením css stylů atd., spojených s prvky.
Jak mohu zobrazit všechny styly, které jsou přidruženy ke konkrétnímu prvku? Která se nyní používá? V jakých souborech se nacházejí?
Takže nic nemůže být jednodušší! Otevřete prohlížeč Google Chrome, otevřete naši webovou stránku – zdroj otázek, klikněte pravým tlačítkem na požadovaný prvek, pokud je viditelný v kontextu stránky, a v kontextové nabídce vyberte „Zobrazit kód prvku“.
Ve spodní části máme konzolu se zvýrazněnou záložkou vlevo „ Elements“ a všemi styly spojenými s prvkem vpravo, kde: Vypočítané styly– jedná se o obecné „souhrnné“ styly, které byly prvku přiřazeny z css pravidel a nastavení prohlížeče uživatele (jeho prostředí) a zároveň je karta sbalená.
Nás ale zajímá pod ní rozbalená záložka „Styles“, která postupně uvádí všechny styly přiřazené prvku a také soubory, kde jsou tato pravidla pro tento prvek specifikována jeho typem, id, třídou, názvem, vlastností. , atribut atd. Navíc, pokud je pravidlo css přeškrtnuté, znamená to, že bylo předefinováno dříve/později (což usnadňuje sledování, které z pravidel css má prioritu a je v tomto případě aplikováno na prvek).
Pod konzolou je řádek, který ukazuje prvek v hierarchii dokumentu, což vám umožňuje snadno zobrazit celý seznam nadřazených prvků od kořene po vybraný prvek. Něco jako „strouhanka“.
Html značka není viditelná v kontextu stránky? Nebo potřebujete najít všechny tagy např. podle konkrétní třídy, názvu, vlastnosti, typu?
Otevřete stránku v Google Chrome, klikněte pravým tlačítkem, vyvolejte kontextovou nabídku, vyberte « Zobrazit kód stránky » . Stiskněte současně kombinaci kláves „CTRL + F“, zadejte frázi, kterou potřebujeme ( Například: třída=”vycpávka") a procházejte seznam nalezených výsledků a současně prohlížejte všechny styly spojené s požadovanými prvky na pravé straně stránky.
Jak zobrazit html kód prvku (prvků) načítaných dynamicky (například: přes Ajax)
Čekáme na načtení stránky v prohlížeči Google Chrome. Provádíme nezbytné akce, aby Ajax fungoval. Klikněte pravým tlačítkem myši na načtená data, v kontextové nabídce vyberte „Zobrazit kód prvku“ a prohlédněte si výsledek v konzole na kartě „Prvky“ vlevo.
Zobrazte změny stylu css v reálném čase
Mimochodem, je také vhodné v případě potřeby sledovat, jaké styly jsou prvku přiřazeny za běhu, například při procházení galerií a dalších událostech časovače. Všechny styly přiřazené pomocí javascriptu v reálném čase se zobrazí ve vlastnosti styl vybraný prvek v okně na záložce „Prvky“.
Interaktivně si prohlédněte dopad css pravidel na prezentaci html tagů
Google Chrome poskytuje interaktivní konzoli pro styly CSS. To znamená, že můžete nejen zobrazit, které styly jsou na prvek použity, ale také přesunout kurzor myši na konkrétní vlastnost css, povolit ji pomocí vyskakovacího zaškrtávacího pole vpravo nebo ji zakázat zrušením příznaku a zobrazit výsledný výsledek na stránce.
Strukturu prezentace html prvků měníme za chodu (přímo v prohlížeči)
Už jsme se tedy naučili, jak prozkoumat strukturu webového dokumentu v Google Chrome, nyní se krátce podíváme na editační prvky za běhu. Do konzole jdeme jakýmkoli způsobem, který je pro nás vhodný. Požadovaný prvek najdeme na kartě „Prvky“, klikneme na něj pravým tlačítkem myši, čímž vyvoláme vyskakovací kontextovou nabídku:
- Přidat atribut– přidá atribut pro zadaný prvek. Jakmile se kurzor stane aktivním, začneme nastavovat požadovanou vlastnost. Například: napíšeme name="itemImage", který bude okamžitě přidán do našeho prvku.
- Upravit atribut– pokud kliknete pravým tlačítkem na atribut prvku, položka se zpřístupní upravitatribut. Klikněte a upravte.
Příklad použití: Zapomněli jsme heslo uložené pod hvězdičkami v prohlížeči Google Chrome (pokud bylo heslo uloženo v tomto prohlížeči). Klikněte pravým tlačítkem myši na prvek se zadaným heslem, klikněte na „Zobrazit kód prvku“ , v konzole na levé záložce Prvky klikněte pravým tlačítkem na atribut type="password", klikněte levým tlačítkem na Upravitatribut změnit atribut typ=”heslo" na typ=”text", a nyní se místo hvězdiček zobrazuje stejné heslo v textové podobě.
- Upravithtml– klikněte pravým tlačítkem myši na prvek v konzole Prvky, vyberte Upravithtml, změňte kód podle svého.
- KopiejakoHTML– část HTML, kterou potřebujeme pro další výzkum, zkopírujeme, řekněme, do poznámkového bloku nebo pro jiné účely, kde potřebujeme použít přesně stejné rozložení. Šetříme čas.
- KopieXPATH– zkopíruje reprezentaci XPATH struktury z kořene nadřazeného prvku do vybraného prvku.
- Vymazatuzel– pokud potřebujete odstranit aktuálně vybraný prvek a všechny jeho potomky z kontextu webové stránky a zobrazit výsledek.
- Slovozabalit– vykreslí zobrazení webové stránky v kontextu konzoly Prvkyčitelnější.
V následujících článcích se budeme nadále zabývat nástroji pro webmastery a zejména se seznámíme se zbývajícími záložkami nástrojů pro webmastery v Google Chrome a také zvažte ladění chyb javascriptu pomocí různých prohlížečů
Když si prohlédnete nespočet stránek na internetu, můžete narazit na takové, které se nám opravdu líbí. Okamžitě vyvstává řada otázek. Byl web vytvořen pomocí domácího kódu nebo nějakého CMS? Jaké má CSS styly? Jaké jsou jeho meta tagy? A tak dále.
Existuje mnoho nástrojů, které lze použít k získání informací o kódu webové stránky. Pravé tlačítko myši ale máme vždy po ruce. To je to, co použijeme, jako příklad použijeme můj web.
Jak zobrazit kód stránky?
Chcete-li zobrazit zdrojový kód stránky webu, musíte najet myší na jakoukoli oblast webové stránky (kromě obrázků a odkazů). Poté klikněte pravým tlačítkem myši. Otevře se před námi okno s několika možnostmi (v různých prohlížečích se mohou mírně lišit). V prohlížeči Google Chrome jsou to například tyto příkazy:
- zadní;
- vpřed;
- restartovat;
- uložit jako;
- pečeť;
- překládat do ruštiny;
- zobrazit kód stránky;
- zobrazit kód.
Musíme kliknout zobrazit kód stránky, a otevře se před námi html kód stránky webu.
Zobrazení kódu stránky: na co si dát pozor?
Html kód stránky je tedy očíslovaný seznam řádků, z nichž každý nese informaci o tom, jak je tento web vytvořen. Abyste se rychle naučili rozumět tomuto obrovskému množství znaků a speciálních symbolů, musíte rozlišovat mezi různými částmi kódu.
Například řádky kódu uvnitř značky head obsahují informace pro vyhledávače a webmastery. Nejsou zobrazeny na webu. Zde můžete vidět, na jaká klíčová slova je tato stránka propagována, jak je napsán její název a popis. Také zde naleznete odkaz, pomocí kterého se dozvíme o rodině písem Google používaných na webu.
Pokud je web vytvořen na CMS WordPress nebo Joomla, bude to zde také vidět. Tato oblast například zobrazuje informace o tématu WordPress nebo šabloně webu Joomla. Můžete to vidět přečtením obsahu odkazů zvýrazněných modře. Jeden odkaz zobrazuje šablonu webu.
Například:
//fonts.googleapis.com/css?family=Source+Sans+Pro%3A400%2C400italic%2C600&ver=4.5.3
Uvidíme CSS styly písem stránky. V tomto případě je použito písmo. To lze vidět zde - rodina písem: 'Source Sans Pro'.
Tato stránka je optimalizována pomocí pluginu Yoast SEO. To lze vidět z této komentované části kódu:
Tento web je optimalizován pomocí pluginu Yoast SEO v3.4.2 – https://yoast.com/wordpress/plugins/seo/
Všechny informace obsažené uvnitř značky body jsou zobrazeny prohlížečem na obrazovce monitoru. Zde vidíme html kód stránky a úplně dole je kód skriptu Yandex Metrics. Je obklopena komentovanou značkou s textem:
/Počítadlo Yandex.Metrika
Pojďme si to shrnout
Po provedení poměrně povrchní analýzy kódu hlavní stránky webu můžeme vyvodit závěr o tom, s jakými nástroji byla tato stránka vytvořena. Viděli jsme na něm:
- CMS WordPress;
- Font Google Source Sans Pro;
- Téma WordPress – Sydney;
- pluginy Yoast;
- Počítadlo metrik Yandex.
Nyní je princip analýzy html kódu webové stránky zcela jasný. Není vůbec nutné mít v prohlížeči otevřenou stránku, kterou zkoumáte. Kód stránky můžete uložit do počítače pomocí kombinace kláves ctrl+a, ctrl+c, ctrl+v. Vložte jej do libovolného textového editoru (nejlépe Notepad++) a uložte s příponou html. Kdykoli ji tak můžete prostudovat hlouběji a najít pro sebe další užitečné informace.
Vydali jsme novou knihu Social Media Content Marketing: Jak se dostat do hlavy svých následovníků a přimět je, aby se zamilovali do vaší značky.
Zdrojový kód webu je sbírka značek HTML, stylů CSS a skriptů JavaScript, které prohlížeč přijímá z webového serveru.
Více videí na našem kanálu - naučte se internetový marketing se SEMANTICOU
Dá se to přirovnat k sadě příkazů, které vojákům dává velitel. Představte si, že publikum šéfa nevidí ani neslyší. Z jejich pohledu armáda provádí akce samostatně. V našem případě je velitelem prohlížeč, příkazy jsou zdrojovým kódem a pochodující vojáci jsou konečným výsledkem.
Stránka je uložena na webovém serveru, který stránku odešle na žádost uživatele. Požadavek je zadáním adresy URL do adresního řádku, kliknutím na odkaz nebo kliknutím na tlačítko Odeslat ve formuláři. Nezáleží na tom, v jakém jazyce jsou webové stránky napsány nebo zda obsahují nějakou softwarovou komponentu. Konečným výsledkem jakéhokoli algoritmu na straně serveru je sada html značek a textu.
Zdrojový kód stránky je sada dat, která zahrnuje:
- html označení;
- styly nebo odkaz na soubor;
- programy napsané v JavaScriptu nebo odkazy na soubory s kódem.
Tyto tři sekce zpracovává prohlížeč. Pro server je to jednoduše text, který je třeba odeslat jako odpověď na požadavek.
Proč bychom mohli potřebovat studovat zdrojový kód
Vše, co vidíme, můžeme analyzovat a aplikovat na řešení určitých problémů, které se vyskytnou při práci s webem, zejména při jeho optimalizaci. Když se podíváme na zdrojový kód, můžeme:
- Podívejte se na metaznačky svého webu nebo webu někoho jiného a analyzujte je.
- Podívejte se na přítomnost nebo nepřítomnost určitých prvků na webu: čítače, identifikační kódy v různých systémech, určité skripty a další věci.
- Zjistěte parametry prvků: velikosti, barvy, fonty.
- Najděte cestu k fotografiím a dalším prvkům umístěným na stránce.
- Prozkoumejte odkazy ze stránky.
- Najděte problémy s kódem, které narušují proces optimalizace webu: styly, které nejsou umístěny v samostatných souborech, skripty, neplatný kód.
Toto jsou základní funkce, ale ve skutečnosti tím, že umíte číst kód, se můžete o stránce dozvědět mnohem více.
Jak zobrazit zdrojový kód webu
Nebude to možné provést úplně ve formě, ve které je to zveřejněno na serveru z prohlížeče. Všechny značky však můžete zobrazit kliknutím pravým tlačítkem na stránku. Zde a níže na příkladu Google Chrome.
Vyberte možnost „Zobrazit kód stránky“ a získejte úplný seznam na samostatné kartě.
Je to jen text, který musíte analyzovat, abyste mu porozuměli. Ale můžete získat interaktivní kód pomocí vývojářských nástrojů.
Jak najít zdrojový kód webové stránky
Klikněte na ikonu nabídky v prohlížeči. Nejčastěji je vpravo a vypadá jako tři tečky nebo pruhy.
V části Další nástroje vyberte „Nástroje pro vývojáře“.
Otevře se okno zobrazující aktivní stav kódu. To znamená, že po kliknutí na značku se vedle ní objeví styl prvku a na stránce se zvýrazní vybrané bloky.
Na záložce „Zdroj“ můžete zobrazit obsah některých souborů: skripty, písma, obrázky.
Na kartě „Zabezpečení“ můžete zkontrolovat certifikát webu.
Záložka „Audits“ vám pomůže zkontrolovat zdroj zveřejněný na hostingu.
Pokud je umístění panelu napravo nepohodlné, můžete kliknout na tři tečky a změnit jej výběrem požadované položky.
Jak zobrazit meta tagy
Každý HTML dokument obsahuje tagy struktury. Zde jsou některé z nich:
- Html – celý dokument.
- Head – sekce servisních hlaviček.
- Titulek – název stránky (zobrazuje se na kartě).
- Tělo – tělo dokumentu.
- H1-H6 – nadpisy textu stránky.
- Článek – článek.
- Sekce - sekce.
- Menu – menu.
- Div – blok.
- Span – řetězec.
- P – odstavec.
- Stůl – stůl.
Prvky jsou navrženy tak, aby v případě potřeby logicky vymezovaly sekce na stránce, jsou navrženy pomocí stylů. Obsahují text, který je na stránce nějak vidět. Štítek Head však obsahuje informace o službě. K označení se používají meta tagy. Vše, co je v nich napsáno, je určeno pro server a vyhledávače.
Jejich obsah nelze zjistit jiným způsobem.
Věnujme pozornost tagu Link. S jeho pomocí jsou specifikovány odkazy na externí zahrnuté soubory. V případě potřeby můžete zobrazit obsah a uložit na disk. Chcete-li to provést, přesuňte ukazatel na adresu a stiskněte RMB. Vyberte „Otevřít na nové kartě“.
Zadaný soubor se otevře na nové kartě, kterou můžete zobrazit nebo uložit.
Jak zobrazit zdrojový kód stránky pro ladění skriptu
V tomto případě je nejvhodnější otevřít stránku na místním počítači. Pokud potřebujete pouze opravit označení, styly a skripty, lze to provést přímo ze složky. HTML kód je zobrazen stejným způsobem. Chyby kódu JavaScript však lze vidět na kartě „Konzola“. Zobrazuje popis chyby a číslo řádku, kde k chybě došlo.
Syntaxi lze vidět přímo v kódu. K tomu slouží záložka „Zdroj“.
Jak zobrazit kód konkrétního prvku
U velkých stránek s mnoha prvky je obtížné najít potřebný kód ve všech označeních. V tomto případě byste měli použít speciální příkaz kontextové nabídky. Najeďte myší na fragment a stiskněte RMB. Vyberte příkaz „Zobrazit kód“.
Otevře se stejné okno, ale se zaměřením na vybraný objekt.
Resumé
Řekli jsme vám, jaký je zdrojový kód stránky. Stačí zvládnout základní znalosti HTML a CSS a pomocí pohodlných vývojářských nástrojů budete schopni ladit své vlastní HTML dokumenty.
Přezkoumání kódu zdrojů na internetu vám umožní učit se nejen z vlastních zkušeností, ale také používat skutečné pracovní příklady. A pro SEO specialisty se budou hodit meta tagy, jejichž informace mohou o webu mnohé napovědět.
Pravděpodobnost pohledu do iniciály kód web stránky, který prohlížeč obdrží jako výsledek požadavku na server, je dostupný prakticky v každém internetovém prohlížeči. Přístup k odpovídajícímu příkazu je organizován přibližně identicky, existují však značné rozdíly ve způsobu a formě iniciály kód .
Instrukce
1. V prohlížeči Mozilla FireFox rozbalte v nabídce sekci „Zobrazit“ a klikněte na „Počáteční“ kód stránky" Stejná položka je také v kontextové nabídce, která se zobrazí po kliknutí pravým tlačítkem na text stránky. Můžete také použít kombinaci kláves CTRL + U. Mozilla FireFox nepoužívá externí programy - počáteční kód stránky se zvýrazněním syntaxe se otevře v samostatném okně prohlížeče.
2. V aplikaci Internet Explorer klikněte na nabídku Soubor a vyberte Upravit v poznámkovém bloku. Místo názvu Poznámkový blok lze napsat jiný program, který máte v nastavení prohlížeče přiřazen k zobrazení iniciály kód A. Při kliknutí stránky pravým tlačítkem myši se objeví kontextová nabídka, která má také položku, která umožňuje otevřít iniciálu kód stránky v externím programu – „Zobrazit HTML kód A".
3. V prohlížeči Opera otevřete nabídku, přejděte do sekce „Stránka“ a budete mít možnost vybrat položku „Start“ v podsekci „Nástroje pro vývoj“ kód"nebo položka "Počáteční kód rám." K tomuto výběru jsou přiřazeny klávesové zkratky CTRL + U a CTRL + SHIFT + U. V kontextové nabídce vázané na kliknutí stránky klikněte pravým tlačítkem myši, je zde také položka „Initial kód" Opera otevírá zdroj stránky v externím programu, který je přiřazen v OS nebo v nastavení prohlížeče pro úpravu HTML souborů.
4. Prohlížeč Google Chrome má bezpochyby nejlepší organizaci pro prohlížení iniciály kód A. Kliknutím pravým tlačítkem na stránku můžete zvolit zobrazení kód A stránky"a poté se zdrojový kód se zvýrazněním syntaxe otevře na samostatné kartě. Nebo můžete dát přednost řádku „Zobrazit“ ve stejné nabídce kód element“ a prohlížeč na stejné kartě otevře dva další rámce, ve kterých můžete zkontrolovat HTML a CSS kód každý prvek stránky. Prohlížeč bude reagovat na pohyb kurzoru po řádcích kód a zvýraznění prvků na stránce, které odpovídají této části HTML kód A.
5. V prohlížeči Apple Safari rozbalte sekci Zobrazit a vyberte Zobrazit HTML kód A". V nabídce, která se zobrazí po kliknutí pravým tlačítkem otevřít stránky, odpovídající položka se nazývá „Zobrazit zdroj“. Této akci jsou přiřazeny klávesové zkratky CTRL + ALT + U. Počáteční kód se otevře v samostatném okně prohlížeče.
Pokud otevřete jakoukoli webovou stránku, bude obsahovat typické prvky, které se nemění v závislosti na typu a zaměření webu. Příklad 4.1 ukazuje kód pro jednoduchý dokument obsahující základní značky.
Příklad 4.1. Zdrojový kód webové stránky
Záhlaví
První odstavec.
Druhý odstavec.
Zkopírujte obsah tohoto příkladu a uložte jej do složky c:\www\ jako example41.html. Poté spusťte prohlížeč a otevřete soubor pomocí položky nabídky Soubor > Otevřít soubor (Ctrl+O). V dialogu pro výběr dokumentu vyberte soubor example41.html. V prohlížeči se otevře webová stránka zobrazená na obr. 1. 4.1.
Rýže. 4.1. Výsledek spuštění příkladu
Živelje určen k označení typu aktuálního dokumentu - DTD (definice typu dokumentu, popis typu dokumentu). To je nutné, aby prohlížeč pochopil, jak interpretovat aktuální webovou stránku, protože HTML existuje ve více verzích, navíc existuje XHTML (EXtensible HyperText Markup Language), který je podobný HTML, ale liší se od něj syntaxí. Aby se prohlížeč „nezpletl“ a pochopil, podle jakého standardu má webovou stránku zobrazovat, je nutné v prvním řádku kódu nastavit .
Existuje několik typů, liší se v závislosti na verzi HTML, na kterou cílí. V tabulce 4.1. Jsou uvedeny hlavní typy dokumentů s jejich popisy.
| DOCTYPE | Popis |
|---|---|
| HTML 4.01 | |
| Přísná syntaxe HTML. | |
| Přechodná syntaxe HTML. | |
| HTML dokument používá rámce. | |
| HTML 5 | |
| Tato verze HTML má pouze jeden doctype. | |
| XHTML 1.0 | |
| Přísná syntaxe XHTML. | |
| Přechodná syntaxe XHTML. | |
| Dokument je napsán v XHTML a obsahuje rámce. | |
| XHTML 1.1 | |
| Vývojáři XHTML 1.1 očekávají, že postupně nahradí HTML. Jak vidíte, tato definice nemá žádné rozdělení na typy, protože syntaxe je stejná a řídí se jasnými pravidly. | |
Rozdíl mezi přísným a přechodným popisem dokumentu je odlišný přístup k psaní kódu dokumentu. Strict HTML vyžaduje přísné dodržování HTML specifikace a je neúprosné k chybám. Transitional HTML je o některých chybách v kódu uvolněnější, proto je v určitých případech vhodnější použít tento typ.
Například v přísných HTML a XHTML je přítomnost značky vyžadována
Štítek