Jak zobrazit zdrojový kód webové stránky v prohlížeči Google Chrome

Zdrojový kód stránky je kolekce značek HTML, zobrazení CSS a skriptů JavaScript. Můžete nakreslit analogii s úkoly, které učitel dává studentům. Studenti musí splnit řadu úkolů (funkcí) k dosažení výsledku. V našem případě je učitel prohlížeč a prováděné úkoly jsou diskutovaným kódem.

V tomto článku se podíváme na to, jak otevřít kód stránky pomocí klávesových zkratek a základních nastavení prohlížeče, vývojářských nástrojů nebo banálního kliknutí pravým tlačítkem.

Co je kód stránky?

Standardní komponenty zdrojového kódu stránky:

  • HTML-řádek;
  • Kombinace stylů nebo odkaz na CSS;
  • Soubory/odkazy/programy vytvořené pomocí JavaSkriptu.

Každý z nich je "prozkoumán" prohlížečem, aby získal potřebná data. Díky sadě informací získáváme veškerý obsah na stránce. V kódu je vše obsaženo v mírně odlišné variantě, nejsou tam žádné obrázky. K dispozici je skript, odkazy, znaky a další prvky kódu.

Zobrazení zdrojového kódu v prohlížeči Chrome
Příklad zobrazení zdrojového kódu stránky v prohlížeči Google Chrome

Jednoduše řečeno, všechny informace z webu jsou shromažďovány v malém strukturovaném textu, ve kterém jsou všechna data uvedena ve zvláštním jazyce.

Používá určité prvky, které pomáhají správně vytvořit webovou stránku. Jak a proč by měl být takový datový soubor analyzován?

Proč je potřeba zobrazit kód

Po analýze nebo prohlížení kódu, vědět, co je co a jaká data jsou zodpovědná za co, můžete provádět práci prohlížeče. To znamená, že můžeme vyřešit jakékoli problémy spojené s přesměrováním na web. To je hlavní úkol klienta, se kterým se může vyrovnat studiem kódu, ale je snadné získat další parametry.

Po prostudování kódu můžete:

  • Zobrazení značek pro analýzu konkrétního webu;
  • Zjistěte, zda je na stránce určitý prvek. Například je snadné zkontrolovat přítomnost některých skriptů, čítačů, určitých kódů a mnoha dalších částí;
  • Definujte parametry dílů. Například jejich písmo nebo barva;
  • Přístup k přílohám a dalším prvkům obsaženým na stránce;
  • Zobrazit všechny odkazy, které jsou obsaženy na webu;
  • Identifikujte problémy s kódem, které vám brání v přechodu na web nebo provádění určitých akcí, když jste na něm.

Jedná se o velmi užitečná data, po pečlivém zvážení, které můžete plně prozkoumat webovou stránku. Díky těmto informacím je možné snadno detekovat všechny potřebné odkazy a používat je, najít všechny přílohy na webové platformě.

Samozřejmě to nejsou všechna data, která lze extrahovat při zkoumání kódu. Kód prvku obsahuje několikrát více informací, ale pro to musíte mít více znalostí.

Pravidlo přednosti

Postup zobrazení kódu stránky v prohlížeči Google Chrome:

  • Přejděte na stránku, která nás zajímá, a kliknutím na libovolné místo v ní pravým tlačítkem myši otevřete kontextové menu.
  • V seznamu najdeme "Zobrazit kód stránky" a klikneme na něj.
Zdrojový kód v prohlížeči Google Chrome
Funkce pro zobrazení zdrojového kódu stránky v prohlížeči Google Chrome

Kromě toho se ke kódu můžete dostat pomocí klávesové zkratky nebo vývojářských nástrojů. Nástroje mohou být také vyvolány rychlou kombinací.

Podívejme se blíže na tyto metody.

Používání klávesových zkratek

Jednoduchá a rychlá volba, stačí stisknout dvě tlačítka na panelu klávesnice současně.

Chcete-li otevřít kód, stiskněte Ctrl + U. V novém okně se otevře zcela celý kód stránky.

To je vše, začněme studovat data, odkazy, názvy, skripty a další informace.

Použití vývojářských nástrojů

Otevření zdrojového kódu stránky pomocí nástrojů pro vývojáře:

  • V pravém horním rohu prohlížeče klikněte na tři tečky.
  • V nabídce, která se otevře, vyberte "Další nástroje" – "Nástroje pro vývojáře".
  • V okně nástroje, které se otevře, vyberte kartu Prvky.
Nástroje pro vývojáře v Chromu
Nástroje pro vývojáře v prohlížeči Google Chrome

Rychlá kombinace pro přístup k vývojářským nástrojům Ctrl + Shift + I

Zbývá extrahovat potřebná data z kódu a použít je pro vlastní účely. Pokud zjistíte problémy nebo jiné nuance, můžete tento kód snadno změnit a výsledek uložit.

Například v sociálních sítích můžete změnit barvu avatara z modré na oranžovou. Změňte počet přátel, následovníků, lajků, ale to vše bude na webu neplatné, pouze na vašem zařízení.

Tato funkce samozřejmě není nutná k přidávání účastníků do sociálních sítí, protože její použití je velmi široké. Můžete například snadno změnit strukturu stránky osobního webu služeb nebo produktů, změnit data, která nelze změnit v editoru webu (pokud existují).

Jak tedy změníte kód?

Jak upravit a uložit zdrojový kód

Jak zobrazit kód stránky v prohlížeči Google Chrome přišel na to, ale jak jej změnit?

Někteří se mylně domnívají, že pro to musíte být zkušeným programátorem, znát všechny jemnosti případu a mnoho dalšího. Samozřejmě, že tomu tak není, všechno je mnohem jednodušší.

Zde je níže uvedený plán:

  • Otevřete potřebnou stránku.
  • Stiskněte klávesu "F12" (nachází se v horní části klávesnice).
  • Otevře se kód, který můžete opakovat.
  • V dolní části webové stránky prohlížíme přijatá data a hledáme, co je třeba změnit. Může se jednat o konkrétní část nebo o velkou část dostupných dat.
  • Klikněte pravým tlačítkem myši na požadovanou část zobrazeného kódu a v seznamu možných příkazů, který se objeví, vyberte "Upravit jako HTML".
  • Potřebný kus kódu se otevře na nové kartě, kde můžete informace upravit.
  • Po dokončení práce musíte změněná data uložit. Chcete-li to provést, vraťte se zpět na tlačítko "F12" a zavřete poslední okno.

Sledujte změny! Stránka se mění změnou informací v kódu a bez určitých znalostí z oblasti programování. Pokud se z nějakého důvodu obsah nezměnil, aktualizujte webovou platformu.

Doufáme, že tento článek byl pro vás užitečný a dozvěděli jste se, jaký je kód webové stránky, proč je vytvořena a co obsahuje, jak a proč je třeba ji změnit.

Mike Lombardi/ author of the article

QA Engineer, vedoucí oddělení automatizovaného testování softwaru. Znalost jazyků Java, C/C++, JSP, HTML, XML, JavaScript, SQL a Oracle PL/SQL. Novinář a publicista v oblasti IT. Tvůrce a správce webových stránek.

OldVersions.INFO