10 Užitočné nástroje vývojára pre Firefox by ste mali vedieť
Firefox, ktorý je prehliadačom vývojárov, má veľa skvelých nástrojov na uľahčenie našej práce. Viac informácií o zbierke nástrojov nájdete na webových stránkach nástrojov pre vývojárov Firefoxu a môžete tiež vyskúšať ich prehliadač Developer Edition, ktorý má ďalšie funkcie a nástroje, ktoré sa testujú.
Pre tento príspevok som uvedený 10 praktických nástrojov môžete sa jej páčiť v zbierke nástrojov pre vývojárov. Tiež som preukázal, čo tieto nástroje môžu robiť s GIF a ako k nim pristupovať s cieľom rýchleho odkazu.
1. Pozrite vodorovné a zvislé pravítka
Firefox má nástroj pravítka, ktorý zobrazuje horizontálne i vertikálne pravítka s pixelovými jednotkami na stránke. Nástroj je užitočný na usporiadanie prvkov na celej stránke.
Pre prístup k pravítkom cez menu prejdite na: ☰> vývojka > Panel s nástrojmi pre vývojárov (skratka: Shift + F2). Po zobrazení panelu nástrojov v dolnej časti stránky zadajte pravítka a stlačte vstúpiť.
Ak chcete, aby sa to zobrazilo v okne nástrojov pre vývojárov, prejdite na položku Možnosti nástrojov. V časti "Dostupné tlačidlá s nástrojmi" začiarknite políčko "Prepínajte pravítka pre stránku"začiarkavacie políčko.
2. Urobte snímky obrazovky pomocou výberových prvkov CSS
Aj keď panel s nástrojmi Firefox umožňuje vytvárať snímky obrazovky celej stránky alebo viditeľných častí, podľa môjho názoru je metóda výberu CSS užitočnejšia na zachytenie screenshoty jednotlivých prvkov ako aj pre prvky, ktoré sú viditeľné na myši iba (ako menu).
Ak chcete nasnímať snímky obrazovky cez ponuku, prejdite na ☰> vývojka > Panel s nástrojmi pre vývojárov (skratkaShift + F2). Po zobrazení panelu nástrojov v dolnej časti stránky zadajte screenshot - selector any_unique_css_selector a stlačte vstúpiť.
Ak chcete, aby sa to zobrazilo v okne nástrojov pre vývojárov: kliknite na položku Možnosti panelu nástrojov a v časti Dostupné tlačidlá s nástrojmi skontrolujte "Vytvorte celú obrazovku obrazovky " checkbox.
3. Vyberte farby z webových stránok
Firefox má vstavaný nástroj na výber farieb pod názvom "Kapka na kvapky". Ak chcete vstúpiť do nástroja "Kvapkadlo" cez menu, prejdite na ☰> vývojka > kvapkadlo.
Ak chcete, aby sa to zobrazovalo v okne nástrojov pre vývojárov: kliknite na položku Možnosti panelu nástrojov a v sekcii Dostupné tlačidlá s nástrojmi začiarknite políčko "Uchopte farbu zo stránky"začiarkavacie políčko.
4. Zobrazenie rozloženia stránky v 3D
Zobrazenie webových stránok v 3D pomáha pri problémoch s rozložením. Budete môcť vidieť rôzne vrstvené prvky oveľa jasnejšie v zobrazení 3D. Ak chcete zobraziť webovú stránku v režime 3D, kliknite na tlačidlo nástroja 3D zobrazenie.
Ak chcete, aby sa to zobrazovalo v okne nástrojov pre vývojárov, kliknite na položku Možnosti panelov nástrojov a v sekcii Dostupné tlačidlá s nástrojmi začiarknite políčko "Zobrazenie 3D"začiarkavacie políčko.
5. Zobrazte štýl prehliadača
Styly prehliadača pozostávajú z dvoch typov: predvolený štýl, ktorý prehliadač priradí pre každý prvok a štýly špecifické pre prehliadač (tie, ktoré obsahujú predponu prehliadača). Pozrite sa na štýly prehliadača, ktoré budete môcť diagnostikovať akékoľvek problémy s prepísaním vo vašej šablóne so štýlmi a tiež spoznáte všetky existujúce štýly špecifické pre prehliadač .
Ak chcete prejsť do ponuky "Štýly prehliadača", prejdite na ☰> vývojka > inšpektor. Potom kliknite na kartu "Počítač" v pravom oddieli a začiarknite políčko "Štýly prehliadača".
Môžete tiež otvoriť okno "inšpektor"pomocou klávesovej skratky Ctrl + Shift + C a potom k prístupu k" Štýly prehliadača ".
6. Zakázať JavaScript pre aktuálnu reláciu
Pre najlepšiu prax a kompatibilitu s čítačkou obrazoviek je vždy odporúčané kódovať akúkoľvek webovú stránku takým spôsobom, že jej funkčnosť nie je obmedzená v prostredí s javascriptom zakázaným. Ak chcete otestovať takéto prostredia, môžete to urobiť zakážte JavaScript pre reláciu, v ktorej pracujete.
Ak chcete zakázať JavaScript pre aktuálnu reláciu, kliknite na "Možnosti panelu nástrojov" av časti "Rozšírené nastavenia" začiarknite políčko "Zakázať JavaScript* "začiarkavacie políčko.
7. Skrytie štýlu CSS zo stránky
Rovnako ako JavaScript, kvôli obavám z dostupnosti je najlepšie navrhnúť webové stránky takým spôsobom, že stránky by mali byť stále čitateľné aj bez akýchkoľvek štýlov. Ak chcete zobraziť, ako stránka vyzerá bez akéhokoľvek štýlu, môžete ju vypnúť v nástrojoch pre vývojárov.
Ak chcete odstrániť akýkoľvek štýl CSS (vložený, interný alebo externý) použitý na webovej stránke, jednoducho kliknite na symbol oka uvedených štýlov na karte "Editor štýlov". Opätovným kliknutím sa vrátite k pôvodnému zobrazeniu.
Ak chcete prejsť do ponuky "Editor štýlov", prejdite do ponuky ☰> vývojka > Editor štýlov (skratka: Shift + F7.
8. Pozrite si odpoveď obsahu HTML na požiadavku
Nástroje pre vývojárov programu Firefox majú možnosť zobraziť náhľad odpovedí typu obsahu HTML. To umožňuje vývojárom zobraziť náhľad všetkých 302 presmerovaní a skontrolovať, či v odpovedi boli vykreslené nejaké citlivé informácie.
Ak chcete otvoriť menu "Náhľad" cez menu, prejdite na ☰> vývojka > sieť (skratka: Ctrl + Shift + Q. Potom otvorte webovú stránku podľa vlastného výberu alebo znova načítajte aktuálnu stránku, kliknite na požadovaná žiadosť (s odpoveďou HTML) zo zoznamu žiadostí a kliknite na tlačidlo "Náhľad"v pravej časti.
9. Náhľad webových stránok v rôznych veľkostiach obrazovky
Ak chcete otestovať webovú stránku pre jej schopnosť reagovať, použite "Responsive Design View", ktorý je prístupný pomocou ☰> vývojka > Odozva dizajnu alebo pomocou klávesovej skratky: Ctrl + Shift + M.
Ak chcete zobraziť tlačidlo nástroja "Reagujúci dizajn", kliknite na položku Možnosti panelu nástrojov a začiarknite políčko "Reagujúci dizajnový režim" v časti "Dostupné tlačidlá s nástrojmi"..
10. Spustite JavaScript na stránkach
Pre rýchle spustenie JavaScript na ľubovoľnej webovej stránke jednoducho použite nástroj "Scratchpad" v prehliadači Firefox. Prístup k aplikácii "Scratchpad" cez menu prejdite na; ☰> vývojka > zápisník alebo použite klávesovú skratku Shift + F4.
Ak chcete, aby sa tlačidlo nástroja "Scratchpad" zobrazilo v okne nástrojov pre vývojárov a použite rýchlo: kliknite na položku "Možnosti panelu nástrojov"a pod"Dostupné tlačidlá s nástrojmi"začiarknite políčko" Scratchpad " checkbox.
