Jak zobrazit zdrojový kód stránky v prohlížeči Google Chrome? Jak rychle otevřít kód stránky v prohlížeči, i když je kopírování zakázáno

Ctrl+U

Jak zobrazit zdrojový kód prvku?

Klepněte pravým tlačítkem myši na prvek stránky, který vás zajímá.

Google Chrome: "Zobrazit kód prvku"

Opera: "Zkontrolovat prvek"

Firefox: "Analyzovat prvek"

V jiných prohlížečích vyhledejte podobnou položku nabídky.

Ahoj všichni!

Zejména na začátku článku jsem položil celou pointu, pro ty, kteří hledají rychlou odpověď.

Tyto informace mohou být mnohým známy, ale protože píšu pro začínající blogery, webové programátory a další těžaře, tento článek nápovědy musí být přítomen.

V budoucnu si určitě prostudujete zdrojový kód stránek a jednotlivých prvků.

Podívejme se na konkrétní příklad, jak můžete použít zobrazení zdroje stránky.

Chceme například vidět, jaká klíčová slova se používají pro konkrétní stránku. Přejdeme na webovou stránku, která nás zajímá, a stiskneme Ctrl + U. Zdrojový kód této stránky se otevře v samostatném okně nebo na samostatné kartě. Stiskněte Ctrl+F k vyhledání části kódu. V tomto případě zadáme do vyhledávacího pole slovo „ klíčová slova“. Budete automaticky přesměrováni na úryvek kódu s touto metaznačkou a hledané slovo bude zvýrazněno.

Analogicky můžete vyhledávat a studovat další úryvky kódu.

Prohlížení celého zdrojového kódu stránky není ve většině případů příliš pohodlné, takže ve všech prohlížečích je možné zobrazit kód jednoho prvku nebo fragmentu.

Použijme konkrétní příklad k zobrazení kódu prvku. Podívejme se například, zda má odkaz atribut nofollow. Klikneme pravým tlačítkem na odkaz, který nás zajímá, a v rozevíracím kontextovém menu klikneme levým tlačítkem na položku "Zobrazit kód prvku" nebo podobně (v závislosti na vašem prohlížeči). Níže ve speciálním okně pro analýzu kódu dostaneme něco podobného.

Vidíme, že v kódu odkazu je přítomen . To znamená, že tento odkaz nebude „unikat“ a PR. O tom budeme hovořit podrobněji v dalších článcích. Prozatím je důležité, že nyní víte, jak zobrazit zdrojový kód stránky a zdrojový kód jednotlivého prvku.

Dnes se tedy podíváme na několik užitečných nástrojů pro webového průvodce, které usnadňují život při rozvržení webu. Začněme konzolí pro webmastery v prohlížeči Google Chrome. A pojďme si projít otázky, které nejčastěji vyvstávají ze strany webmastera při layoutu webu.

Chcete-li se dostat do konzole, otevřete svůj web v prohlížeči Google Chrome, klepněte pravým tlačítkem myši kamkoli na webovou stránku a z kontextové nabídky vyberte Zobrazit kód stránky nebo vyberte konkrétní prvek, který chcete prozkoumat, výběrem Zobrazit prvek kódu.

V horní části bude uvedeno několik záložek. Dnes budeme hovořit o záložce "Prvky". , který prezentuje prvky webové stránky se zvýrazněním tagů, vlastností, zvýrazněním vnoření prvků, reprezentující hierarchii prvků ve stromu DOM (nápověda dole, od kořenového rodiče po aktuální zkoumaný), možnost editace prvků, seznam jejich vlastností, zvážit vyhledávání podle prvků a také Seznámíme se s prohlížením css stylů spojených s prvky atd..

Jak zobrazit všechny styly, které jsou spojeny s konkrétním prvkem? Který se teď používá? V jakých souborech jsou?

Není tedy nic jednoduššího! Otevřeme prohlížeč Google Chrome, otevřeme naši stránku – zdroj otázek, klikneme pravým tlačítkem na požadovaný prvek, pokud je v kontextu stránky viditelný, a v kontextovém menu vybereme položku „Zobrazit kód prvku“.

Ve spodní části máme konzolu se zvýrazněnou záložkou vlevo „ Prvky“A všechny styly spojené 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 záložka sbalená.

Nás ale zajímá pod ní nasazená 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. Pokud je zároveň pravidlo css přeškrtnuté, znamená to, že bylo předefinováno dříve/následně (což usnadňuje sledování, které z pravidel css je prioritní a v tomto případě je 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řenového 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 určité třídy, názvu, vlastnosti, typu?

Otevřete web 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: class="vycpávka") a procházet seznamem nalezených výsledků a současně prohlížet všechny styly spojené s požadovanými prvky na pravé straně stránky.

Jak zobrazit html kód prvku (prvků) načítaného dynamicky (například: od Ajaxu)

Čeká se na načtení stránky v prohlížeči Google Chrome. Provádíme nezbytné akce, aby Ajax fungoval. Klikneme pravým tlačítkem myši na stažená data, v kontextovém menu vybereme „Zobrazit kód prvku“, výsledek prozkoumáme v konzoli 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 akcí č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 kartě Prvky.

Interaktivní pohled na dopad css pravidel na prezentaci html tagů

Google Chrome poskytuje interaktivní konzoli pro styly CSS. A to znamená, že můžete nejen vidět, které styly jsou na prvek použity, ale také přesunout kurzor myši na určitou vlastnost css, povolit ji pomocí vyskakovacího zaškrtnutí vpravo nebo ji deaktivovat zrušením zaškrtnutí příznaku a zobrazením výsledný výsledek na stránce.

Strukturu prezentace html prvků měníme za běhu (přímo v prohlížeči)

Už jsme se tedy naučili, jak prozkoumat strukturu webového dokumentu v prohlížeči Google Chrome, nyní se pojďme rychle podívat na editační prvky za běhu. Do konzole jdeme jakýmkoli způsobem, který nám vyhovuje. Požadovaný prvek najdeme na kartě „Prvky“, klikněte na něj pravým tlačítkem myši, čímž vyvoláte místní nabídku:

Přidat atribut- Přidá atribut k určenému prvku. 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í Upravitatributy. Klikněte, 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 na prvek s heslem, klikněte na "Zobrazit kód prvku" , v konzole na levé straně záložky Elementy klikněte pravým tlačítkem na atribut type="password", klikněte levým tlačítkem na Upravitatributy, změnit atribut type="Heslo" na type="text", a zde již máme stejné heslo ve formě textu místo hvězdiček.

Upravithtml- klikněte pravým tlačítkem myši na prvek v konzole Elementy, Vybrat Upravithtml, změňte kód podle svého.
kopírovattak jakoHTML- zkopírujte část HTML, kterou potřebujeme pro další výzkum, řekněme do poznámkového bloku nebo pro jiné účely, kde potřebujeme použít přesně stejné rozložení. Šetříme čas.
kopírovatXPATH– 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 Elementyčitelnější.

V následujících článcích se budeme nadále věnovat nástrojům pro webmastery a zejména se seznámíme se zbytkem záložek nástrojů pro webmastery v Google Chrome a také zvažte ladění chyb javascriptu pomocí různých prohlížečů

Pravděpodobnost pohledu do iniciály kód web stránky, který prohlížeč obdrží jako výsledek požadavku na server, je ve skutečnosti 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 v tom, jakou metodou a v jaké formě vám bude předložen počáteční kód .

Návod

1. V prohlížeči Mozilla FireFox rozbalte z nabídky 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. Povolena je i klávesová zkratka 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ý jste si v nastavení prohlížeče přiřadili k zobrazení iniciály kód A. Při kliknutí stránky pravým tlačítkem myši vyskočí kontextové menu, které má i položku umožňující otevření iniciály 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 pravděpodobně budete preferovat položku „Počáteční“ v podsekci „Nástroje pro vývoj“. kód“ nebo položka „Initial kód rám". Tomuto výběru jsou přiřazeny klávesové zkratky CTRL+U a CTRL+SHIFT+U. V kontextové nabídce připojené ke kliknutí stránky klikněte pravým tlačítkem myši, je zde také položka „Počáteční kód". Opera open source 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 procházení iniciály kód A. Kliknutím pravým tlačítkem na stránku můžete preferovat 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 upřednostnit ve stejné nabídce řádek "Zobrazit kód prvek“ a prohlížeč na stejné kartě otevře dva další rámce, ve kterých můžete zkontrolovat HTML a CSS - kód jakýkoli prvek stránky. Prohlížeč bude reagovat na pohyb kurzoru přes řádky 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 řádek „Zobrazit HTML kód A". V nabídce, která se zobrazí po klepnutí pravým tlačítkem na otevřít stránky, odpovídající položka se nazývá "Zobrazit zdroj". K této akci byly přiřazeny klávesové zkratky CTRL + ALT + U. kód se otevře v samostatném okně prohlížeče.

Když se podíváte na nespočet stránek na internetu, můžete najít ty, které se nám velmi líbí. Okamžitě vyvstává řada otázek. Je stránka vytvořena pomocí vlastního kódu nebo nějakého CMS? Jaké jsou jeho styly CSS? 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 stránky webu. Pravé tlačítko myši ale máme vždy po ruce. Použijeme to na příkladu mého webu.

Jak zobrazit kód stránky?

Chcete-li zobrazit zdrojový kód webové stránky, musíte přesunout kurzor myši 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;
Znovu načíst;
uložit jako;
těsnění;
překládat do ruštiny;
zobrazení kódu stránky;
zobrazit kód.

Musíme kliknout zobrazení kódu stránky, a otevře se před námi html kód stránky webu.

Zobrazení kódu stránky: co hledat?

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 znaků, musíte rozlišovat mezi různými částmi kódu.

Například řádky kódu nalezené uvnitř značky head obsahují informace pro vyhledávače a webmastery. Nejsou zobrazeny na webu. Zde vidíte, na jaká klíčová slova je tato stránka propagována, jak je napsán její název a popis. Můžete zde také najít odkaz, kliknutím na který se dozvíme o rodině google fontů 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 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 zabalen do komentovaného tagu s textem:

/Počítadlo Yandex.Metrika

Shrnutí

Po provedení poměrně povrchní analýzy kódu hlavní stránky webu můžeme dojít k závěru, že pomocí jakých nástrojů 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čitadlo metrik Yandex.

Nyní je princip analýzy html kódu stránky webu zcela jasný. Zkoumanou stránku není nutné mít v prohlížeči otevřenou. 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.

Možnost „zobrazit zdrojový kód stránky“ byla pro mě dlouho zbytečná a nezajímavá. Učení HTML na Codecademy a budování vlastních stránek se zatím v můj nový koníček nerozrostlo. Zde vyvstala otázka: kde najít skutečné případy a půjčit si zajímavá řešení pro vaše „prasátko“? Odpověď byla překvapivě jednoduchá, jako každý génius: zobrazit zdrojový kód stránky v prohlížeči Google Chrome! Podělím se s vámi o své skromné poznatky.

Co je zdrojový kód stránky

Pokud stejně jako já právě děláte své první kroky v programování HTML, nebude zbytečné vědět, jaký je zdrojový kód stránky.

Zdrojový kód, známý také jako HTML kód stránky, je text v jazyce HTML (Hyper Text Markup Language). Zahrnuje skutečný obsah stránky (text, tabulky) a značky. Ty hrají roli pokynů pro prohlížeč: jak zobrazit obsah, jaké formátování použít, kam vložit hypertextový odkaz nebo mediální soubor. No, pro nás, začínající programátory, je zdrojový kód tím nejlepším cvičištěm: najdeme zajímavý web a nakoukneme, uložíme, použijeme úspěšné fragmenty. Jak?

Jak zobrazit zdrojový kód na stránce prohlížeče Google Chrome

Najděte stránku, která se vám líbí. Zaujal mě například design menu stránek. Zdrojový kód lze v prohlížeči Google Chrome otevřít třemi způsoby:

Klikněte na ikonu Jídelní lístek v pravém horním rohu prohlížeče a vyberte "Další nástroje". Mimo jiné je zde možnost „Zobrazit zdrojový kód“. Upřímně řečeno, tuto metodu používám jen zřídka: hodně zbytečných pohybů. Dá se to ještě zjednodušit.
Stiskněte kombinaci kláves Ctrl+U- otevře nové okno se zdrojovým kódem;
Pro fanoušky kontextového menu: klikněte pravým tlačítkem na stránku a vyberte možnost „Zobrazit kód stránky“.

Poradili jsme si s úkolem zobrazit HTML kód stránky v prohlížeči. Přecházíme k nejzajímavější fázi.

Jak upravit a uložit zdrojový kód

K tomu, abyste se naučili vytvářet webové stránky, nestačí číst cizí HTML kód. Je potřeba si s tím hrát, experimentovat, provádět změny a kontrolovat výsledek. Můžete dokonce začít sestavením několika úspěšných vzorků. Jak upravit a uložit zdrojový kód?

Možnost 1. "Ručně"

Po otevření zdrojového kódu stránky vyvoláme kontextové menu a vybereme možnost "Uložit jako" a soubor uložíme na pevný disk. Soubor upravíme v programu Poznámkový blok nebo Poznámkový blok, uložíme změny a otevřeme prostřednictvím prohlížeče. Výsledky našich změn (úspěšných i ne tak dobrých) se projeví v okně prohlížeče.

Možnost 2. Pro profesionály

Když si každý den „hrajete“ se zdrojovým kódem, je proces „uložit – otevřít – změnit – uložit – zkontrolovat“ únavný. Pro sebe jsem našel řešení v podobě instalace pluginu pro Google Chrome – Firebug Lite. Umožňuje vám upravovat a ukládat zdrojový kód, aniž byste opustili okno prohlížeče.