Pozrite sa do základných nástrojov prehliadača Firefox pre vývojárov webu

Firefox je už dávno preferovaným prehliadačom pre vývoj webových aplikácií. Existuje množstvo užitočných doplnkov na vykonanie úlohy. V tomto príspevku sa pozrieme na niekoľko doplnkov, ktoré si myslím, že je nevyhnutné na inštaláciu, ak sa chystáte na vývoj webových aplikácií. Tiež budeme odhaliť niektoré funkcie týchto doplnkov, ktoré vám môžu pomôcť.

Po prvé, musíme nainštalovať program Firebug.

Firebug

Firebug je doplnok, ktorý musíte nainštalovať pre vývoj webových aplikácií. Za predpokladu, že neviete, kde sa dostanete na Firebug, môžete ho nainštalovať tu. Pravdepodobne musíte reštartovať Firefox skôr, ako sa aktivuje.

Potom môžete Firebug zobraziť jedným z nasledujúcich spôsobov: postupujte podľa tohto menu Nástroje> Vývojári webu> Firebug, kliknite pravým tlačidlom na webovú stránku a vyberte “Skontrolujte prvok Firebugom”.

Prípadne môžete nájsť ikonu Firebug v prehliadači Firefox a kliknite na ňu, zobrazí sa okno firebug;

Firebug je úplne totožný Nástroje pre vývojárov Chrome. má panel vidieť štruktúru HTML a štýly a tiež panel Konzola zobrazuje chyby, upozornenia a protokoly. Ale mám niekoľko ďalších tipov, ktoré dúfam, že by ste mohli byť užitočné.

Nastavenie veľkosti skrinky

Prvok HTML sa skladá z modelu CSS boxu, ktorý pozostáva z okraja, políčka a rozmeru objektu (šírka / výška). Sú chvíle, kedy je možno potrebné tieto vlastnosti zmeniť. V tomto prípade môžete vybrať jeden z prvkov, ktoré chcete zmeniť, potom prejdite na dispozície panel.

V tomto paneli nájdete ilustráciu modelu CSS boxu spolu s jeho informáciami vrátane šírka a výška. Hoci tieto dve vlastnosti nie sú špecifikované v CSS, tento nástroj je dostatočne šikovný na to, aby určil hodnotu. Ak ich potrebujete upraviť, môžete jednoducho kliknúť na hodnotu a pomocou šípky nahor alebo nadol zvýšiť alebo znížiť hodnotu.

Vypočítané štýly

V mnohých situáciách sa pravdepodobne zaujímate, prečo niektoré štýly nie sú aplikované. Jedným z ľahších a rýchlejších spôsobov, najmä ak máte tisíce štýlov riadkov, je ich kontrola Vypočítaný štýl panel. Tento príklad ukazuje, že farba textu značky kotvy je prepísaná .gombík trieda, zatiaľ čo pozadie .gombík trieda je prepísaná .button.add.

Kontrola rodiny písiem (jednoduchá cesta)

Pravdepodobne často nájdete niečo podobné font-family vlastnosť v CSS s rôznymi typmi fontov. Bohužiaľ, toto nám nepovedie konkrétne, ktoré písmo preberá váš prehliadač. Aby sme túto identifikáciu uľahčili, môžeme túto rozšírenie Firebug nainštalovať FireFontFamily.

Po dokončení inštalácie načítajte svoju webovú stránku a teraz môžeme jasne zistiť, ktorá rodina písma sa používa. V našom prípade je to v skutočnosti Helvetica Neue (pozri snímku).

Analýza výkonnosti

Môže to byť falošnosť, ale Rýchlosť stránok je teraz jedným z parametrov Google (algoritmus) pri rozhodovaní o kvalite webových stránok. webová lokalita, ktorá sa načíta rýchlejšie, sa považuje za dobre rozvinutú a vyššiu z hľadiska obsahu. Takže rýchlosť nie je niečo, čo by sa malo prehliadnuť.

Net Panel

Prvým miestom, ktoré budete musieť navštíviť na kontrolu výkonnosti webových stránok, je netto panel. Tento panel zaznamená HTTP žiadosť vašej webovej stránky, keď je načítaná. Na tejto snímke obrazovky sa zobrazuje webová stránka, ktorá sa načíta 42 žiadosti a trvá okolo 4,36 sekundy načítať.

Aplikáciu HTTP môžete zoradiť podľa typu HTML, CSS a Obrázky.

YSlow!

Okrem toho môžete tiež nainštalovať YSlow, rozšírenie pre Firebug od Yahoo !. Po jeho aktivácii nájdete ďalší panel, ktorý sa výrazne nazýva Yslow!.

Podobný netto panel, Yslow! bude zaznamenávať výkony webových stránok pri ich načítaní, ale potom vám tiež povie, prečo je webová stránka pomalá a čo môžeme urobiť, aby sme ju vyriešili. V tomto príklade spustime test na webovú stránku a vyhodnocujeme ju 86 pre celkovú výkonnosť, čo je považované za správne.

Rýchlosť stránky

Prípadne môžete tiež nainštalovať Speed ​​Page od spoločnosti Google. Podobný YSlow!, testuje výkonnosť webových stránok, aj keď výsledok testu môže byť mierne odlišný. Tento príklad ukazuje, že rovnaká webová stránka skóroval 82 podľa rýchlosti stránky.

Nástroje pre vývojárov webu

Web Developers Tools je samozrejme pre webových vývojárov a má veľa funkcií zabalených v tomto paneli nástrojov. Ale táto nižšie je jedna z mojich obľúbených.

Kontrola obrázkov

Sú chvíle, kedy je možno potrebné získať informácie o obrázku z webovej stránky. Často vidím, že to ľudia robia tým, že sa prekážajú v prehliadači alebo kliknutím pravým tlačidlom myši na obrázok a vybrať Zobrazenie informácií o obrázku, ako:

Ale tento spôsob nie je celkom efektívny, keď potrebujeme dostať informácie z mnohých obrázkov. V takom prípade môžeme využiť snímky z doplnku. Táto funkcia je ľahko dostupná z ponuky Obraz na paneli s nástrojmi.

A tento príklad ukazuje, ako súčasne zobrazujeme dimenziu obrázka a veľkosť súboru obrázka:

Vstavané nástroje Firefoxu

V najnovších verziách Firefox výrazne vylepšil svoje vstavané funkcie pre webových vývojárov, niektoré z nich sú:

Native Inspect Element

Toto natívne Preskúmať prvok z Firefoxu môže vyzerať podobne “Skontrolujte element vo Firebug”, ale skutočne koná rôznymi spôsobmi.

Tentokrát nebudem prechádzať touto funkciou ďalej, pretože je v podstate totožná s panelom Firebug HTML a CSS, aj keď s rozdielom v rozložení a dizajne. Ale je tu jedna charakteristická vlastnosť, ktorá stojí za to vyskúšať, Zobrazenie 3D.

Použitím Zobrazenie 3D štruktúru webovej stránky môžete zobraziť podrobne. Ak chcete tento pohľad aktivovať, môžete ho nájsť v pravom dolnom rohu “Firefox Native Inspect element”. Takto Zobrazenie 3D vyzerá ako.

Nepoužívam to tak často ako iné funkcie, ale je to celkom inovatívny prvok, ktorý Mozilla priznávam a určite veľmi užitočný v určitých situáciách.

Web Design View

Vzhľadom na zvyšujúcu sa popularitu v Responsive Web Design, Firefox spustil do prehliadača Responsive Bookmarklet. Tento nástroj nám umožní otestovať naše odpovedajúce webové stránky v rôznych výrezoch bez zmeny veľkosti okna prehliadača.

Toto zobrazenie je k dispozícii v tejto ponuke: Nástroje> Webový vývojár> Zobrazenie webového dizajnu. A ako vyzerá tento pohľad.

Editor štýlov

Nakoniec, ak pracujete s CSS často, pravdepodobne sa budete zamilovať do tejto funkcie. Od verzie 11, Firefox dodal Editor štýlov vo svojich natívnych vývojárskych nástrojoch.

Táto funkcia je rovnako cool ako Web Design View, umožňuje upraviť CSS, okamžite vidieť dopad na prehliadač a uložiť zmeny, ktoré priamo ovplyvňujú zdrojový súbor CSS.

Editor štýlov je k dispozícii z nasledujúcej ponuky: Nástroje> Webový vývojár> Editor štýlov.

Konečná myšlienka

Existuje množstvo funkcií zabalených v týchto doplnkoch pre Firefox a tie, ktoré sú tu popísané, sú len niektoré z funkcií, ktoré využívam pomerne často počas vývoja webových aplikácií. Napriek tomu môžete mať niektoré ďalšie tipy, ktoré by mohli byť užitočné pre zvýšenie produktivity vývoja webu vo Firefoxe.

Aké funkcie používate často? Môžete zdieľať svoje myšlienky do poľa s poznámkami nižšie.