10 Užitečné nástroje pro vývojáře Firefoxu, které byste měli vědět
Firefox je "prohlížeč vývojáře" má mnoho skvělých nástrojů, které nám pomohou usnadnit práci. Další informace o jeho sbírce nástrojů naleznete na webových stránkách vývojářských nástrojů Firefoxu a můžete také vyzkoušet jejich prohlížeč Developer Edition, který obsahuje více funkcí a nástrojů, které jsou testovány..
Pro tento příspěvek jsem uvedl 10 praktických nástrojů můžete mít rád z jeho kolekce nástrojů pro vývojáře. Také jsem ukázal, co tyto nástroje mohou dělat s GIFy a jak se k nim dostat pro rychlou orientaci.
1. Zobrazte vodorovná a svislá pravítka
Firefox má nástroj pravítka zobrazuje horizontální i vertikální pravítka s pixelovými jednotkami na stránce. Nástroj je užitečný pro uspořádání prvků na stránce.
Pro přístup k pravítkům v nabídce přejděte na: ☰> Vývojář > Panel nástrojů pro vývojáře (zkratka: Shift + F2). Jakmile se panel nástrojů zobrazí ve spodní části stránky, zadejte vládci a stiskněte Zadejte.
Chcete-li to zobrazit v okně nástrojů pro vývojáře, přejděte na položku Možnosti nástroje. V části Dostupné tlačítka panelu nástrojů zaškrtněte políčkoPřepněte pravítka stránky".
2. Proveďte screenshoty pomocí CSS selektorů
Ačkoli panel nástrojů Firefox umožňuje pořizovat snímky celé stránky nebo viditelné části, podle mého názoru je metoda výběru CSS užitečnější pro zachycení screenshoty jednotlivých prvků stejně jako pro prvky, které jsou viditelné na myši pouze (jako nabídky).
Chcete-li pořídit snímky obrazovky přes menu, přejděte na ☰> Vývojář > Panel nástrojů pro vývojáře (shortcutShift + F2). Jakmile se panel nástrojů zobrazí ve spodní části stránky, zadejte screenshot --selector any_unique_css_selector a stiskněte zadejte.
Chcete-li to zobrazit v okně nástrojů pro vývojáře: klikněte na možnost Možnosti panelu nástrojů a v části Dostupné tlačítka panelu nástrojů zaškrtněte políčkoUdělejte snímek s plnou stránkou " zaškrtávací políčko.
3. Vyberte barvy z webových stránek
Firefox má vestavěný nástroj pro výběr barev pod názvem "Kapátko". Pro přístup k nástroji "Kapátko" přes menu přejděte na ☰> Vývojář > Kapátko.
Chcete-li to zobrazit v okně nástrojů pro vývojáře: klikněte na možnost Možnosti panelu nástrojů a na položku Kontrola dostupných tlačítek panelu nástrojů.Uchopte barvu ze stránky".
4. Zobrazení rozvržení stránky ve 3D
Zobrazení webových stránek ve 3D pomáhá s problémy s rozvržením. Různé prvky s vrstvami budete moci vidět mnohem jasněji ve 3D zobrazení. Chcete-li zobrazit webovou stránku ve 3D, klepněte na tlačítko "3D zobrazení".
Chcete-li to zobrazit v okně vývojářských nástrojů, klikněte na možnost Možnosti panelu nástrojů a v části Dostupné tlačítka panelu nástrojů zaškrtněte políčko3D zobrazení".
5. Zobrazení stylu prohlížeče
Styly prohlížeče se skládají ze dvou typů: výchozí styl, který prohlížeč přiřadí každému prvku, a styly specifické pro prohlížeč (ty, které mají předponu prohlížeče). Podívejte se na styly prohlížečů, které budete moci diagnostikovat všechny problémy s přepsáním v šabloně stylů a také se dozvíte o všech existujících specifických stylech prohlížeče .
Chcete-li otevřít "Styly prohlížeče" přes menu, přejděte na ☰> Vývojář > Inspektor. Poté klikněte na kartu "Vypočítáno" v pravé části a zaškrtněte políčko "Styly prohlížeče".
Můžete také otevřít "Inspektor"kartu pomocí klávesové zkratky Ctrl + Shift + C a poté klepnutím na položku" Styly prohlížeče ".
6. Vypněte JavaScript pro aktuální relaci
Pro nejlepší praxi a kompatibilitu s čtečkou obrazovky je vždy doporučeno kódovat jakoukoliv webovou stránku tak, aby její funkčnost nebránila v prostředí s vypnutým javascriptem. Chcete-li otestovat taková prostředí, můžete vypněte JavaScript pro relaci, ve které pracujete.
Chcete-li zakázat JavaScript pro aktuální relaci, klikněte na možnost Možnosti panelu nástrojů a v části Pokročilé nastavení zaškrtněte políčkoZakažte JavaScript* "zaškrtávací políčko.
7. Skryjte styl CSS ze stránky
Stejně jako JavaScript, kvůli obavám o přístupnost je nejlepší navrhovat webové stránky takovým způsobem, že stránky by měly být stále čitelné i bez stylů. Chcete-li zjistit, jak stránka vypadá bez jakéhokoli stylu, můžete je zakázat v nástrojích pro vývojáře.
Chcete-li odstranit jakýkoli styl CSS (inline, interní nebo externí), který je použit na webové stránce, stačí klikněte na symbol oka uvedených stylů v záložce "Editor stylů". Opětovným kliknutím se vrátíte k původnímu zobrazení.
Pro přístup k "Editoru stylů" přes menu přejděte na ☰> Vývojář > Editor stylů (zkratka: Shift + F7.
8. Náhled odpovědi na obsah HTML na požadavek
Nástroje pro vývojáře Firefox mají možnost náhled odpovědí typu obsahu HTML. To pomáhá vývojáři zobrazit náhled všech přesměrování 302 a zkontrolovat, zda v odpovědi nebyly nebo nebyly vykresleny žádné citlivé informace.
Pro přístup do menu "Náhled" přejděte na ☰> Vývojář > Síť (klávesová zkratka: Ctrl + Shift + Q. Poté otevřete webovou stránku podle svého výběru nebo znovu načtěte aktuální stránku, klikněte na odkaz požadovaný požadavek (s odpovědí HTML) ze seznamu požadavků a klikněte na tlačítkoNáhledv pravé části.
9. Náhled webové stránky v různých velikostech obrazovky
Chcete-li otestovat webovou stránku pro její citlivost, použijte "Responsive Design View", ke kterému lze přistupovat pomocí ☰> Vývojář > Responzivní návrhové zobrazení nebo klávesovou zkratkou: Ctrl + Shift + M.
Chcete-li zobrazit tlačítko nástroje "Reagovat režim návrhu", klepněte na tlačítko "Možnosti panelu nástrojů" a pod "Dostupné tlačítka panelu nástrojů" zaškrtněte políčko "Responsive Design Mode".
10. Spusťte JavaScript na stránkách
Pro rychlé spuštění JavaScriptu na libovolné webové stránce jednoduše použijte "Scratchpad" nástroj Firefoxu. Pro přístup do "Scratchpad" v menu přejděte na; ☰> Vývojář > Scratchpad nebo použijte klávesovou zkratku Shift + F4.
Chcete-li, aby se tlačítko nástroje "Scratchpad" objevilo v okně vývojářských nástrojů pro rychlé použití: klikněte na tlačítkoMožnosti panelu nástrojů"a pod"Dostupná tlačítka nástrojů"sekce" Scratchpad " zaškrtávací políčko.
