Při úpravách webové stránky obvykle používáme konkrétní nástroj pro úpravy, jako je Adobe Dreamweaver, CoffeeCup, Bluefish nebo jeden z dalších vývojových nástrojů. Ale co když jsme jen brainstorming nebo chcete něco vyzkoušet na živé stránce? Mohli bychom si zkopírovat stránku v našem nástroji výběru a hrát si s tím. Nebo bychom to mohli udělat v našem webovém prohlížeči. Tento tutoriál vám ukáže, jak upravit webovou stránku v prohlížeči.
Firefox, označovaný jako vývojářské nástroje, volá funkci Inspect Element, zatímco Chrome ji nazývá Inspect. V obou případech je to způsob, jak prohlížeč nahlédnout za lesk vašeho návrhu a podívat se na kód, který jej pohání. Tato funkce je velmi dobře známa a používá se hodně. Co není tak dobře známo, je schopnost provádět změny kódu za běhu.
Jakékoli změny, které provedete, nebudou uloženy a nebudou mít vliv na živě. Pokud nechcete načíst stránku do vývojářského nástroje, jedná se o úhledný způsob experimentování.
Upravte libovolnou webovou stránku v prohlížeči
Dreamweaver a podobné nástroje mají vestavěný emulátor prohlížeče, který simuluje, jak bude vypadat design v různých prohlížečích. Tak dobré, jak jsou, nejsou vždy přesné a při spuštění webu často zjistíte, že to, co vypadalo fantasticky ve vašem vývojářském nástroji, vypadá v samostatném prohlížeči trochu jinak.
Obvykle byste spustili web na interním webovém serveru a vyzkoušeli v prohlížeči před spuštěním živě právě z tohoto důvodu. Pokud je stránka již aktivní nebo chcete něco vyzkoušet, není třeba ji kopírovat a načíst do vývojového nástroje, stačí použít vývojářský nástroj prohlížeče.
Používám Firefox, takže vám ukážu, jak to používat. Chrome je však téměř stejný.
- Otevřete webovou stránku, se kterou chcete v prohlížeči experimentovat.
- Klikněte pravým tlačítkem kdekoli na stránce a vyberte Inspect.
Měli byste vidět, jak se vaše stránka dělí na dvě, přičemž v dolní části se objeví nový podokno s nějakým kódem. Tento kód je hnací silou vybrané stránky. Různé prvky stránky jsou přístupné z karet v horní části dolní karty. Ve Firefoxu například vidíme Inspector, Console, Debugger, Editor stylů atd.
Pokud umístíte kurzor na řádky ve spodním panelu, uvidíte různé části zvýraznění webové stránky. Řádek kódu, který během zvýraznění používáte, je kód, který ovlivňuje tuto část stránky.
- Pokud si chcete pohrát s tím, jak stránka vypadá, zkuste Editor stylů.
- Pokud si chcete hrát s tím, jak stránka funguje, zkuste Konzoli nebo Usnadnění.
- Pokud chcete zrušit chyby nebo vyřešit problém, použijte Konzoli nebo Debugger
Výkon je užitečný pro místní SEO, ale paměť, síť a úložiště se tolik nevyužívají.
Nezapomeňte, že si můžete v Nástrojích pro vývojáře pokazit tolik, kolik chcete a nebude to mít vliv na web. Jakékoli změny se provádějí pouze v tom, jak se stránka zobrazuje v osobním prohlížeči, neovlivníte samotný web. Jakmile nástroj zavřete, dojde ke ztrátě všech změn.
Provádění změn na stránce
Nyní víte, že můžete změnit cokoli, aniž byste ovlivnili skutečný web, pojďme se trochu pobavit. Najděte na stránce prvek, který chcete upravit. Můžete změnit písmo, barvu písma, obrázek na pozadí nebo cokoli, co se vám líbí. V tomto příkladu změníte barvu písma nadpisu banneru.
- Klikněte pravým tlačítkem na přesný prvek, který chcete změnit, a vyberte Inspect.
- Zvýrazněte řádek buď „titulem“ nebo „H1“, aby byl text zvýrazněn v horním panelu.
- Přejděte vlevo na dva panely a najděte barvu písma.
- Změňte hodnotu na něco jiného nebo vyberte barevný bod, abyste použili selektor.
Po dokončení změny se vaše změna zobrazí dynamicky. Můžete změnit barvu, velikost, písmo, pozadí a vše o písmu. Nemůžete uložit práci, ale vaše změny zůstanou pro tuto relaci.
Můžete změnit vše, co je na stránce ideální, pokud máte nápad a chcete jej rychle vyzkoušet před spuštěním všech vašich vývojových aplikací. Jediné, co musíte udělat, je zapamatovat si, jaké změny jste provedli a kde je nemůžete uložit zde. Budete muset pořídit snímek obrazovky nebo zaznamenat změny a replikovat je v rámci svých vývojářských nástrojů, aby se zachovala.
Úpravy webové stránky v prohlížeči je úhledný způsob experimentování nebo hraní se stránkami. Je to také dobrý způsob, jak se trochu naučit o vývoji webových aplikací, aniž byste museli kupovat drahé vývojářské nástroje. Nyní víte jak na to, jděte si hrát!
