Nástroje pro vývojáře v Mozilla Firefox
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Nástroje pro vývojáře v Mozilla FirefoxNástroje pro vývojáře v Mozilla Firefox

 

Nástroje pro vývojáře v Mozilla Firefox

Google       Google       16. 10. 2013       16 356×

V prohlížečích můžeme nástroje pro vývojáře najít už delší dobu a jsou si navzájem dost podobné. Většinu z nich využijí hlavně pokročilí kodéři a programátoři, přesto mají co nabídnout i začátečníkům, hlavně při hledání problémů v HTML nebo CSS. Nevíte, k čemu slouží a co s nimi? V článku najdete popis těch nejdůležitějších i s příklady použití. V článku jsou popsané nástroje prohlížeče Mozilla Firefox (u ostatních se liší).

Reklama
Reklama

Nástroje se spouštějí z nabídky Nástroje > Vývoj webu > Nástroje vývojáře. Ve výchozím nastavení se zobrazují v dolní části okna. Změnit jejich pozici nebo je zavřít lze pomocí ikonek napravo.

V horní části najdete ještě další ikonky:

  • Možnosti (Toolbox options) - nastavení, které nástroje se zobrazují
  • Konzole (Console) - výpis informačních a chybových zpráv vznikajících v prohlížeči načítáním stránky
  • Průzkumník - zobrazování HTML a CSS k vybraným elementům
  • Debugger - nástroj pro odstraňováni chyb v JavaScriptu a sledování proměnných
  • Editor stylů - zobrazování a úprava CSS stylů
  • Profiler - slouží k zjišťování, kde JavaScript tráví nejvíce času
  • Network - seznam všech žádostí na server a doba jejich zpracování
  • Zvýraznit vykreslovanou oblast - označí části stránky, které se v závislosti na nějaké akci (například scrollování) znovu vykreslují
  • 3D pohled - vizualizace webu ve vrstvách, skupiny tagů jsou barevně odlišeny
  • Zápisník - editor pro psaní a spouštění JavaScriptů
  • Responsivní design - rychlý náhled webu v několika nejpoužívanějších rozlišeních s možností otočení a nastavení vlastního rozlišení

Konzole

Na rozdíl od staré chybové konzole zobrazuje chyby a varování pouze týkající se konkrétní stránky. Otevírá se z nabídky Nástroje > Vývoj webu > Web console nebo klávesovou zkratkou Ctrl+Shift+K. Výpis lze filtrovat na Síť, CSS, JS, Security a Žurnál. V dolním panelu se nachází vedle symbolu > příkazová řádka pro zadávání javascriptových výrazů. Její součástí je i historie, ve které se pohybujete pomocí šipek nahoru a dolů.

Každá zpráva má vlastní řádek s označením času, kategorie a případně URI nebo souboru. Dvojklikem na některé z nich si zobrazíte podrobnější informace (např. http požadavky).

Průzkumník

Jednoduše řečeno jde o vylepšený výpis zdrojového kódu. Otevřít se dá z nabídky Nástroje > Vývoj webu > Průzkumník, klávesovou zkratkou Ctrl+Shift+I nebo přes pravé tlačítko myši nabídkou Prozkoumat prvek.

V levé části je výpis zdrojového kódu; vnořené části jsou sbalené, pokud jste nevybrali možnost Prozkoumat prvek. Potřebnou část kódu rychle najdete najetím myši na prvek, klikem svůj výběr potvrdíte a pohyb myši přestane ovlivňovat zobrazenou část. Výběr prvků myší lze znovu aktivovat, tlačítkem vlevo nahoře Vyberte prvek myší. Vedle něho je pak seznam rodičů vybraného elementu, na které se dá rychle přepnout. V samotném kódu se krom klasických úprav dají simulovat i stavy hover, active a focus, a to přes pravé tlačítko myši.

Pravá část zobrazuje všechny CSS vlastnosti přiřazené vybranému elementu.

  • Pravidla - vlastnosti ze souborů a inline stylů
  • Vypočítáno - dopočítané styly s možností zapnutí stylů prohlížeče
  • Písma - seznam použitého písma nebo všech písem na stránce
  • Model boxu - grafické znázornění velikostí, rámečků a odsazení

Použití:

  • testování chování webu s hodně dlouhými texty v rozměrově omezených prvcích
  • hledání problému se vzájemným překrýváním prvků
  • hledání problému s CSS
  • kontrola JavaScriptem upraveného kódu
  • náhledy změn pro klienta, který si je neumí představit a musí je vidět
  • hodí se i pro rychlejší orientaci v cizím kódu

Debugger

Nabídka Nástroje > Vývoj webu > Debugger nebo klávesová zkratka Ctrl+Shift+S. Tento nástroj umožňuje ladění JavaSctiptu lokálně i vzdáleně. Stejně jako u ostatních nástrojů je v levém panelu seznam souborů, na středu zdrojový kód a napravo panel s proměnnými.

Zarážka neboli breakpoint (místo, kde se skript zastaví) se jednoduše udělá i odstraní kliknutím na číslo řádku. Každé takové místo je označeno kolečkem před číslem řádku a výpisem v levém panelu, kde jdou jednotlivé breakpointy vypínat, nebo jim můžete nastavit podmínky příkazem Konfigurovat podmíněnou zarážku. Takový breakpoint zastaví skript jen v případě, že bude podmínka splněna.

K procházení kódem slouží tlačítka nad výpisem zdrojových souborů. Po zastavení kódu můžete v pravé části prozkoumat proměnné a jejich hodnoty, které jdou i změnit.

Použití:

  • ladění JavaScriptu a hledání bugů
  • sledování proměnných - je to pohodlnější než console.log()

Editor stylů

Slouží pro zobrazování a úpravy všech externích CSS, umožňuje také import a vytváření nových souborů. Otevírá se z nabídky Nástroje > Vývoj webu nebo klávesovou zkratkou Shift+F7.

Panel na levé straně zobrazuje seznam použitých CSS souborů, ty můžete rychle deaktivovat pomocí ikonky oka nalevo od názvu. Upravené styly si můžete uložit na lokální disk tlačítkem Uložit, které je napravo.

Pravý panel slouží pro úpravy ve stylech, pracuje se s ním pěkně jako s klasickým textovým editorem. Všechny změny budou zobrazeny na webu v reálném čase, to umožňuje rychlé experimentování a kontroly. Užitečné je i zobrazování čísel řádků a automatické přeformátování minimalizovaných souborů do čitelné podoby.

Použití:

  • experimenty, pokud si nejste jisti výsledkem - nemusíte pak vracet změny, pokud se to nepovede
  • zkoušení jiných barev nebo obrázků na pozadí
  • náhledy změn pro klienta, který si je neumí představit a musí je vidět
  • odstraňování problémů, kdy si například soubory z jQuery pluginů navzájem přepisují pravidla
  • kontrola webů s barevnými variantami importem jiného stylového souboru

Profiler

Profiler slouží k optimalizaci JavaScriptu. Spouští se z nabídky Nástroje > Vývoj webu > Profiler nebo zkratkou Shift+F5. Profiler po dobu běhu zjišťuje doby trvání zpracování jednotlivých částí skriptů, po ukončení data zpracuje a zobrazí v tabulce.

Network

Monitor sítě ukazuje všechny požadavky, které Firefox vyšle. Otevře se z nabídky Nástroje > Vývoj webu > Network. Každý řádek představuje jeden požadavek a zobrazuje stav, metodu, soubor, doménu, typ, velikost a čas potřebný k zpracování. Podrobnější informace se zobrazí po kliknutí na jeden z řádků.

Zvýraznit vykreslovanou oblast

Nástroj k optimalizaci rychlosti webu. Zvýrazní oblasti, které musel prohlížeč znovu vykreslovat například po scrollování nebo přejetí myší po prvcích s :hover efektem. Určitě ho využijte při optimalizaci animovaných prvků - na stránkách developer.mozilla.org je k tomu dole hezký příklad rozdílu mezi použítím margin left a transform u CSS animací.

3D pohled

Spouští se ikonkou v pravé horní části nástrojů pro vývojáře. 3D pohled přehledně zobrazuje vnořené prvky a barevně je rozlišuje podle typu. Model umožňuje kromě přiblížení a oddálení také změnu úhlu pohledu. Ovládání myší je intuitivní, kdy model chytnete a otočíte.

Trochu špatně řešený je posun pohledu, kde šipky posouvají samotným modelem - využije se pakticky jen u přiblížené stránky, kde to budí dojem, že šipky fungují obráceně. V 3D pohledu se zobrazují všechny prvky i ty mimo viditelnou oblast a jejich kontrola je díky tomu jednoduchá.

Zápisník

Jednoduchý textový editor pro JavaScript. Otevírá se v novém okně a kromě spouštění skriptů nabízí i možnost vložení výsledků do komentáře za vybraný kód nebo zobrazení výsledku v průzkumníku objektů.

Responsivní design

Díky tomuhle nástroji už nemusíte zmenšovat okno prohlížeče, abyste omrkli, jak bude web vypadat na mobilním zařízení. V seznamu je předdefinováno několik nejpoužívanějších rozlišení, své vlastní si můžete přidat nastavením potřebné šířky roztažením boxu a vybráním „Přidat rozlišení“ ze seznamu. Hodit se bude i tlačítko „Otočit“, které vymění šířku a výšku.

Tento nástroj pouze změní šířku prohlížené oblasti (viewport), nesimuluje chování webu na mobilním zařízení.

 

Více informací najdete v nápovědě na stránkách Mozilly (EN). Vývoj webu usnadní i spousta doplňujících nástrojů, některé z nich najdete v článku Užitečné nástroje pro tvorbu webu a webových aplikací.

×Odeslání článku na tvůj Kindle

Zadej svůj Kindle e-mail a my ti pošleme článek na tvůj Kindle.
Musíš mít povolený příjem obsahu do svého Kindle z naší e-mailové adresy kindle@programujte.com.

E-mailová adresa (např. novak@kindle.com):

TIP: Pokud chceš dostávat naše články každé ráno do svého Kindle, koukni do sekce Články do Kindle.

Hlasování bylo ukončeno    
8 hlasů
Google
(fotka) Jana ValentováJana se zajímá hlavně o HTML, CSS a JavaScript. Pracuje tři roky jako webkodér v malé firmě. Ve volném čase se vzdělává v příbuzných oborech, občas si zahraje nějakou hru a víkendy tráví na airsoftu nebo výletech v přírodě.
Web    

Nové články

Obrázek ke článku NEWTON Media prohledá 200  milionů mediálních zpráv během sekund díky Cisco UCS

NEWTON Media prohledá 200 milionů mediálních zpráv během sekund díky Cisco UCS

Česká společnost NEWTON Media provozuje největší archiv mediálních zpráv ve střední a východní Evropě. Mezi její zákazníky patří například ministerstva, evropské instituce nebo komerční firmy z nejrůznějších oborů. NEWTON Media rozesílá svým zákazníkům každý den monitoring médií podle nastavených klíčových slov a nabízí online službu, kde lze vyhledat mediální výstupy v plném znění od roku 1996.

Reklama
Reklama
Obrázek ke článku Delphi 10.1.2 (Berlin Update 2) – na co se můžeme těšit

Delphi 10.1.2 (Berlin Update 2) – na co se můžeme těšit

Touto roční dobou, kdy je zem pokrytá barevným listím a prsty křehnou v mrazivých ránech, se obvykle těšíme na zbrusu novou verzi RAD Studia. Letos si však ale budeme muset počkat na Godzillu a Linux až do jara. Vezměme tedy za vděk alespoň updatem 2 a jelikož dle vyjádření pánů z Embarcadero se budou nové věci objevovat průběžně, pojďme se na to tedy podívat.

Obrázek ke článku Konference: Moderní datová centra pro byznys dneška se koná už 24. 11.

Konference: Moderní datová centra pro byznys dneška se koná už 24. 11.

Stále rostoucí zájem o cloudové služby i maximální důraz na pružnost, spolehlivost a bezpečnost IT vedou k výrazným inovacím v datových centrech. V infrastruktuře datových center hraje stále významnější roli software a stále častěji se lze setkat s hybridními přístupy k jejich budování i provozu.

Obrázek ke článku Konference: Mobilní technologie mají velký potenciál pro byznys

Konference: Mobilní technologie mají velký potenciál pro byznys

Firmy by se podle analytiků společnosti Gartner měly  rychle přizpůsobit skutečnosti, že mobilní technologie už zdaleka nejsou horkou novinkou, ale standardní součástí byznysu. I přesto - nebo možná právě proto - tu nabízejí velký potenciál. Kde tedy jsou ty největší příležitosti? I tomu se bude věnovat již čtvrtý ročník úspěšné konference Mobilní řešení pro business.

loadingtransparent (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();
Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý