Jak používat Inspect Element na Macu k úpravě webových stránek

Jak používat Inspect Element na Macu k úpravě webových stránek

Inspect Element, také nazývaný Inspect, je všestranný nástroj zabudovaný do prohlížečů. Na rozdíl od populární mylné představy je to stejně cenné pro designéry a vývojáře jako běžné uživatele. Jako příležitostný uživatel můžete použít Inspect Element na zařízeních macOS, abyste se mimo jiné dozvěděli více o webové stránce, extrahovali z webové stránky nějaké informace nebo data nebo upravili obsah webové stránky.


Jak používat Inspect Element na Macu k úpravě webových stránek

Pokračujte ve čtení a já vám ukážu, jak používat Inspect Element na vašem Macu.

Staňte se mistrem iOS 18:

Získejte naši exkluzivitu iOS 18 e-kniha 📚 ZDARMA když se přihlásíte k odběru našeho newsletteru níže.

Co je Inspect Element?

Pokud vás vždy zajímalo, jak funguje web, včetně toho, na kterém se právě nacházíte, zde je analogie, která by vám mohla pomoci. Představte si web jako budovu: struktura a rámec jsou vytvořeny pomocí HTML a JavaScriptu, zatímco CSS přidává barvu a dekor.

Inspect Element vám umožní odloupnout vrstvy, abyste viděli plán jakékoli webové stránky. Ale je toho víc a Inspect Element můžete použít k řadě dalších věcí, jako například:

  • Ladění chyb v kódu: Můžete rychle zkontrolovat a vyřešit problémy v HTML, CSS nebo JavaScriptu.
  • Testujte změny designu: Můžete dokonce experimentovat s rozvržením, barvami a písmy.
  • Analýza výkonu webu: Můžete zkontrolovat odezvu webu a pochopit chování při načítání.
  • Kopírování prvků: Můžete snadno získat text, obrázky nebo styly z webových stránek, pokud tím nic neporušíte.
  • Dočasně upravit obsah: Můžete upravit text, obrázky nebo jiné prvky, které se projeví v reálném čase.
  • Pochopení SEO: Můžete analyzovat meta tagy, záhlaví (H1, H2, H3…) a umístění klíčových slov.

Jak získat přístup k Inspect Element v různých prohlížečích

Nyní, když máte základní představu o tom, co Inspect Element umí, pojďme se podívat, jak jej používat na Macu v různých prohlížečích. Inspect Element můžete použít v populárních prohlížečích, jako je Safari, Chrome a Firefox. Ukážu vám jak.

Na Safari

  1. Otevřete Safari.
  2. V horní liště nabídky klikněte na Safari a vyberte Nastavení.
    Přístup k nastavení prohlížeče Safari na Macu
  3. Přejděte na kartu Upřesnit a ujistěte se, že je povolena možnost Zobrazit funkce pro vývojáře webu.
    Karta Upřesnit v nastavení Safari na Macu
  4. Přejděte na webovou stránku, kterou chcete analyzovat nebo upravit, klikněte na libovolný prvek se stisknutou klávesou Ctrl a vyberte možnost Zkontrolovat prvek.

Na Chrome

  1. Otevřete Chrome a přejděte na webovou stránku, kterou chcete zkontrolovat.
  2. Klepněte kamkoli na stránku se stisknutou klávesou Ctrl a vyberte Prozkoumat. Případně můžete pomocí klávesové zkratky Command+Option+I vyvolat panel DevTools.
    Chrome DevTools na Macu
    Poznámka

    Tyto kroky fungují také v prohlížečích založených na Chromiu, jako je Microsoft Edge, Opera a Arc Browser.

    Ve Firefoxu

    1. Otevřete Firefox a přejděte na webovou stránku, kterou chcete zkontrolovat.
    2. Klepněte se stisknutou klávesou Ctrl na libovolný prvek a vyberte možnost Zkontrolovat. Nebo použijte Command+Option+I k vyvolání nástrojů pro vývojáře.

    Jak používat Inspect Element k úpravě webové stránky

    Jak již bylo zmíněno, Inspect Element můžete použít k dočasné úpravě obsahu webových stránek, což může být užitečné pro experimentování s designem, testování změn nebo jen vytahování žertů. Zde je návod, jak to udělat.

    Upravit text na webové stránce

    1. Otevřete webovou stránku a vyberte text, který chcete upravit.
    2. Klepněte na text se stisknutou klávesou Ctrl a vyberte Zkontrolovat.
      Přístup k možnosti Inspect v Chrome na Macu
    3. Nyní uvidíte kód HTML pro vybraný prvek zvýrazněný na panelu nástrojů pro vývojáře. Klikněte na něj, zadejte nový text a stiskněte Return.
      Kontrola vlastností displeje v Chrome na Macu.

    Vaše změny se okamžitě objeví na webové stránce. Vezměte však na vědomí, že jsou dočasné.


    Změněná hodnota prvku na webové stránce v prohlížeči Chrome

    Změna obrázků na webové stránce

    1. Klepněte se stisknutou klávesou Ctrl na obrázek, který chcete upravit, a vyberte Zkontrolovat.
    2. Na panelu Nástroje pro vývojáře vyhledejte značku s atributem src. (Zde src znamená zdroj obrázku.)
      Přechod na atribut src v nástrojích pro vývojáře Chrome na počítači Mac
    3. Nahraďte adresu URL v atributu src adresou URL nového obrázku, který chcete zobrazit.
    4. Stiskněte Return a obrázek se okamžitě aktualizuje.
      Změna obrázku na webové stránce v prohlížeči Chrome

    Upravte barvy a styly

    1. Klepněte se stisknutou klávesou Ctrl na prvek, jehož styl chcete změnit, a vyberte možnost Zkontrolovat.
    2. Přejděte do sekce Styly na panelu Nástroje pro vývojáře.
      Přístup k části Styly v nástrojích pro vývojáře Chrome na počítači Mac
    3. Upravujte vlastnosti CSS, jako je barva, velikost písma nebo barva pozadí, přímo v panelu. Můžete se odhlásit HTML barevné kódy pro rychlé získání barevných kódů HTML.
      Dočasná změna barvy textu na webové stránce v Chrome na Macu
    1. Klepněte na hypertextový odkaz se stisknutou klávesou Ctrl a vyberte možnost Zkontrolovat.
    2. Najděte značku v HTML s atributem href.
    3. Změňte hodnotu href na jinou adresu URL a stiskněte Return.
    4. Kliknutím na upravený odkaz otestujte nový cíl.
    Pro Tip

    Před obnovením stránky si pořiďte snímky obrazovky svých úprav, protože všechny změny jsou dočasné a vrátí se, když se stránka znovu načte.

      Odhlašování…

      Jak jste právě viděli, je snadné používat Inspect Element na Macu k provádění různých manipulací a operací na webové stránce. Jistě, můžete se zpočátku při pohledu na kód webových stránek cítit vystrašení, ale jak budete tento nástroj používat stále častěji, zjistíte, že budete v pohodě a budete moci dělat mnohem víc, než co jsme popsali v průvodci.

      Nejčastější dotazy

      Změní Inspect Element způsob, jakým web hledá ostatní uživatele?

      Ne, změny jsou viditelné pouze na vaší straně a zmizí, když se stránka obnoví. Nemají vliv na skutečný web ani na ostatní uživatele.

      Je nezákonné používat Inspect Element na webových stránkách, které nejsou moje?

      Pomocí Inspect Element můžete zjistit, jak fungují webové stránky, nebo experimentovat s designem. Kopírování kódu webové stránky, obcházení omezení nebo phishing však může být nezákonné a může vás dostat do problémů v závislosti na tom, kde žijete.

      Co se stane, když omylem odstraním prvek při používání funkce Zkontrolovat prvek?

      Odstraněním prvku v Inspect Element jej skryjete pouze dočasně. Můžete obnovit stránku a vrátit vše do původního stavu.

      Přečtěte si více:

      • Safari vs. Chrome: Který prohlížeč je lepší pro iPhone a Mac?
      • Jak změnit výchozí prohlížeč na Macu
      • Nejlepší emulátory iOS pro PC
      Staňte se mistrem iOS 18:

      Získejte naši exkluzivitu iOS 18 e-kniha 📚 ZDARMA když se přihlásíte k odběru našeho newsletteru níže.