Podívejte se do základních nástrojů Firefoxu pro webové vývojáře

Firefox je již dlouho preferovaným prohlížečem pro vývoj webových aplikací. Existuje celá řada užitečných doplňků, které tuto práci vykonávají. V tomto příspěvku se podíváme na několik doplňků, o kterých si myslím, že je důležité, aby byly nainstalovány, pokud budete dělat vývoj webu. Také budeme odhalovat některé funkce v těchto doplňcích, které mohou pomoci.

Nejprve musíme nainstalovat Firebug.

Firebug

Firebug je nezbytný doplněk pro vývoj webu. Za předpokladu, že nevíte, kde získat Firebug, můžete ho nainstalovat zde. Pravděpodobně je třeba restartovat Firefox před jeho aktivací.

Poté můžete zobrazit Firebug jedním z následujících způsobů: postupujte podle tohoto menu Nástroje> Vývojáři webu> Firebug, klikněte pravým tlačítkem myši na webovou stránku a vyberte “Zkontrolujte prvek s Firebug”.

Případně můžete ve Firefoxu najít ikonu Firebug a kliknout na ni. Zobrazí se okno firebug;

Firebug je zcela identický Nástroje pro vývojáře Chrome. má panel, ve kterém je zobrazena struktura HTML a styly, a také panel konzoly, který zobrazuje chyby, varování a protokoly. Ale mám pár dalších tipů, které by snad mohly být užitečné.

Nastavení velikosti boxu

Element HTML je tvořen modelem boxu CSS, který se skládá z okrajů, výplně a kóty objektu (width / height). Jsou chvíle, kdy budeme muset tyto vlastnosti upravit. V takovém případě můžete vybrat jeden z prvků, které chcete změnit, a pak přejděte na Rozložení panel.

V tomto panelu najdete ilustraci modelu boxu CSS spolu s jeho informacemi, včetně šířka a výška. Přestože tyto dvě vlastnosti nejsou určeny v CSS, tento nástroj je dostatečně chytrý, aby určil hodnotu. Pokud je potřebujete upravit, můžete jednoduše kliknout na hodnotu a pomocí šipek nahoru nebo dolů zvýšit nebo snížit hodnotu.

Vypočítané styly

V mnoha situacích se asi zajímáte, proč nejsou některé styly aplikovány. Jedním z jednodušších a rychlejších způsobů, zejména pokud máte tisíce řádků stylů, je inspekcí Vypočtený styl panel. Tento příklad ukazuje, že barva textu kotevní značky je přepsána .tlačítko třídy, zatímco na pozadí .tlačítko Třída je přepsána .button.add.

Kontrola rodiny písem (snadný způsob)

Pravděpodobně často něco takového najdete font-family vlastnost v CSS s různými rodinami fontů. Toto bohužel neřekne konkrétně, které písmo prohlížeč má. Pro snazší identifikaci můžeme nainstalovat toto rozšíření Firebug FireFontFamily.

Po dokončení instalace načtěte webovou stránku a nyní jasně vidíme, která rodina fontů je použita. V našem případě je to ve skutečnosti Helvetica Neue (viz záběr).

Analýza výkonu

To může být platitude, ale Site Speed ​​je nyní jedním z parametrů Google (algoritmus) při rozhodování o kvalitě webu; webové stránky, které se načítají rychleji, se považují za dobře rozvinuté a obsahově vyšší. Takže rychlost není něco, co by mělo být přehlédnuto.

Panel Net

První místo, které byste mohli potřebovat navštívit, abyste zkontrolovali výkon svých webových stránek, je Síť panel. Tento panel zaznamenává požadavek HTTP vašich webových stránek, když je načten. Níže uvedený obrázek ukazuje webovou stránku, která se načte 42 požadavek a trvá kolem 4,36 sekund naložit.

Požadavek HTTP pak můžete třídit podle typu, jako je HTML, CSS a Obrázky.

Yslow!

Dále můžete také nainstalovat YSlow, rozšíření pro Firebug z Yahoo !. Poté, co je aktivován, najdete další panel výslovně nazvaný Yslow!.

Podobný Síť panel, Yslow! bude nahrávat webové stránky výkony, když je načten, ale pak to bude také říct, proč je webová stránka pomalá a co můžeme udělat, aby to vyřešit. V tomto příkladu spustíme test na webovou stránku a je hodnocen 86 pro celkový výkon, který je považován za OK.

Rychlost stránky

Rychlost stránky můžete také nainstalovat od společnosti Google. Podobný Yslow!, testuje rychlost webových stránek, i když výsledek testu může být poněkud odlišný. Tento příklad ukazuje, že stejná webová stránka skóroval 82 podle rychlosti stránky.

Webové nástroje pro vývojáře

Web Developers Nástroje jsou samozřejmě pro webové vývojáře a má spoustu funkcí zabalených v tomto panelu nástrojů. Ale tohle je jedna z mých oblíbených.

Kontrola obrazu

Jsou chvíle, kdy z webové stránky budeme možná potřebovat získat obrazové informace. Obvykle to lidé dělají klopýtnutím přes prohlížeč nebo klepnutím pravým tlačítkem myši na obrázek a výběrem Zobrazit informace o obrázku, jako tak:

Ale tento způsob není zcela efektivní, když potřebujeme získat informace z mnoha obrázků. V tom případě můžeme využít snímky z doplňku. Tato funkce je snadno přístupná z nabídky Obrázek na panelu nástrojů.

Tento příklad ukazuje, jak současně zobrazujeme velikost obrázku a velikost souboru obrázku:

Vestavěné nástroje Firefoxu

V nedávných verzích Firefox ohromně vylepšil své vestavěné funkce pro webové vývojáře, z nichž některé jsou:

Nativní kontrola prvku

Tento rodák Zkontrolujte prvek Firefox může vypadat podobně “Zkontrolujte prvek v Firebug”, ale ve skutečnosti jedná různými způsoby.

Tentokrát nebudu tuto funkci dále procházet, protože je v podstatě identický s panelem Firebug HTML a CSS, i když s rozdílem v rozložení a designu. Ale existuje jeden výrazný rys, který stojí za to vyzkoušet 3D zobrazení.

Použitím 3D zobrazení můžete zobrazit strukturu webové stránky do hloubky. Pro aktivaci tohoto zobrazení můžete najít tlačítko v pravém dolním rohu okna “Prvek inspekce Firefoxu”. Takhle 3D zobrazení vypadá jako.

Nepoužívám ho tak často jako jiné funkce, ale je to docela inovativní funkce od Mozilly, kterou přiznávám, a určitě velmi užitečná v určitých situacích.

Zobrazení návrhu webu

Od rostoucí popularity v Responsive Web Design, Firefox inicioval Responsive Bookmarklet do prohlížeče. Tento nástroj nám umožní otestovat naše citlivé webové stránky v různých výřezech bez změny velikosti okna prohlížeče.

Toto zobrazení je k dispozici v této nabídce: Nástroje> Web Developer> Web Design View. A takto vypadá pohled.

Editor stylů

Konečně, pokud pracujete s CSS často, budete pravděpodobně zamilovat do této funkce. Od verze 11 Firefox přidal Editor stylů v jeho nativních vývojářských nástrojích.

Tato funkce je stejně cool jako Zobrazení návrhu webu, umožňuje editovat CSS, okamžitě vidět dopad na prohlížeč a uložit změny, které mají přímý vliv na zdrojový soubor CSS.

Editor stylů je k dispozici v následující nabídce: Nástroje> Web Developer> Editor stylů.

Závěrečná myšlenka

Tam je spoustu funkcí zabalených v těchto Firefox add-ons a ty, které jsou zde popsány, jsou jen některé z funkcí, které používám poměrně často během vývoje webu. Nicméně, můžete mít nějaké další tipy, které by mohly být užitečné pro zvýšení produktivity vývoje webu ve Firefoxu.

Jaké funkce často používáte? Své myšlenky můžete sdílet v poli pro komentář níže.