Firefox Developer Edition 6 Vychutnejte si nejlepší nástroje

Edice vývojáře Firefoxu je jediným prohlížečem, který je vytvořen speciálně pro vývojáře. Vývojářské nástroje ve standardním vydání se objevují nejprve v edici vývojáře a existují nástroje v edici vývojáře, které nejsou a nebudou dostupné ve standardním vydání. Dnes se podíváme na některé nástroje, které jsou v tuto chvíli lze nalézt pouze v edici vývojáře.

Pokud jste někdo, kdo nikdy nepoužíval, nebo kdo není příliš obeznámen s vývojářskými nástroji i ty ve standardním vydání, podívejte se na tuto skvělou "DevTools Challenger" od Mozilly. Zde si můžete vyzkoušet některé z níže uvedených nástrojů v prohlížeči prohlížeče Firefox. Příklady jsou zábavné a snadno se sledují, instrukce jsou jednoduché a pokud nemůžete dohnat, místo toho sledujte video tutoriál.

1. Nástroj pro inspekci animace

CSS animace se stávají stále častějšími a CSS animační nástroje poskytované vývojářskou edicí Firefoxu usnadňují sledování a kontrolu každého kroku vytvořené animace. Můžete pozastavit, přehrát a zvrátit jakoukoli animaci; můžete si jej také prohlédnout v rámečku po snímku pomocí praní.

Pro přístup k nástroji otevřete Inspektor kliknutím pravým tlačítkem myši na animační prvek a výběrem "zkontrolovat prvek", pak na pravé straně okna nástroje dev, klikněte na "Animace".

2. Editor funkcí časování animace

Časování animace lze upravovat pomocí nástroje dev, jednoduše kliknete na ikonu vedle funkce Pravidla sekce Inspektor Otevře se nástroj a vyskakovací okno ukazující funkční křivky. Toto můžete přetáhnout a upravit tak, abyste upravili časování animace. Jakmile provedete změny křivek, změní se rychlost animace.

Pokud ještě nejste obeznámeni s kubickou funkcí Bezierovy animace, doporučuji tento příspěvek, abyste se o něm dozvěděli více.

3. Výběr barvy pro vlastnosti CSS

Ve standardním vydání Firefoxu je již k dispozici nástroj pro výběr barev (více informací o tomto příspěvku), který vybere barvu ze stránky a zkopíruje ji do schránky. Výběr barev, o kterém se teď zmiňuji, je však specifických pro hodnoty barev CSS vlastností.

Vedle každé hodnoty barev CSS v Pravidla sekce Inspektor nástroj, tam je ikona, která otevře barevné kolo pop-up, když klikne. Můžete vybrat barvu, kterou chcete z kola.

Pokud již máte požadovanou barvu a barvu, která se na stránce vyskytuje, jednoduše klikněte na nástroj kapátko ve spodní části vyskakovacího okna a otevřete nástroj pro výběr barev, poté přetáhněte výběr na požadovanou barvu a klikněte na ni. . Hodnota barvy CSS se změní na hodnotu zvolené barvy.

4. Měřící nástroj

Tento nástroj umožňuje zobrazit polohu kurzoru XY a měření výšky, šířky a úhlopříčky v pixelech vybrané části. Chcete-li nástroj použít, musíte jej nejprve povolit ve vývojáři Možnosti panelu nástrojů, zaškrtnutím políčka "Změřte část stránky" pod položkou "Dostupná tlačítka panelu nástrojů".

Po aktivaci se v horní části okna nástroje Dev zobrazí ikona pravítka, klepněte na tuto ikonu a přesuňte kurzor na stránku. U kurzoru uvidíte polohy XY. Chcete-li změřit šířku, výšku a úhlopříčku, stačí kliknout a táhnout a vybrat část, kterou chcete měřit.

5. Editor filtrů CSS

Pokud byste na prvek na stránce použili filtr CSS, zobrazí se vedle něj ikona Pravidla sekce Inspektor nástroj, který po kliknutí otevře editor filtrů CSS.

Chcete-li filtr odebrat, klepněte na značku × na pravém konci názvu filtru. Chcete-li přidat filtr, klepněte na pole filtru dole a vyberte ten, který chcete přidat, a klepněte na tlačítko + podepsat. Filtry můžete také přeskupit do libovolného pořadí přetažením každé položky.

6. Paměťový nástroj

Pomocí tohoto nástroje můžete zjistit, co zabírá paměť na vaší webové stránce. To vám pomůže učinit kroky ke snížení využití paměti a následně zvýšit rychlost stránky.

Chcete-li nástroj použít, musíte jej nejprve povolit Možnosti panelu nástrojů zaškrtnutím políčka "Paměť" v části "Výchozí nástroje pro vývojáře Firefox". Jakmile je zaškrtnuto, zobrazí se v horní části okna nástroje Dev hned po "Performance" sekce "Memory". Vyberte tuto možnost.

Chcete-li nástroj použít, klepněte na tlačítko "Take snapshot" nebo na tlačítko fotoaparátu. Zobrazí se seznam položek, jako jsou objekty a skripty, které zabírají paměť .