10 Корисни Фирефок Девелопер Алати које бисте требали знати
Фирефок који је "претраживач за програмере" има много одличних алата који ће олакшати наш рад. Више о његовој колекцији алата можете пронаћи на веб страници Фирефок Девелопер Тоолс и такође можете испробати њихов Девелопер Едитион Бровсер који има више функција и алата који се тестирају.
За овај пост сам на попису 10 практичних алата можда вам се допада из колекције алатки за развојне програмере. Такође сам показао шта ови алати могу да ураде са ГИФ-овима и како да им приступим за брзу референцу.
1. Преглед хоризонталних и вертикалних равнала
Фирефок има алат за равнање који приказује хоризонталне и вертикалне равнине са јединицама пиксела на страници. Алат је користан за распоређивање елемената на страници.
Да бисте приступили владарима преко менија, идите на: ☰> Девелопер > Девелопер Тоолбар (пречица: Схифт + Ф2). Када се трака са алаткама појави на дну странице, откуцајте владари и притисните Ентер.
Да би се ово појавило у прозору алатки за развојне програмере, идите на "Опције алата". У одељку „Доступни тастери за алатку“ означите „Пребаците равнала за страницу" поље за потврду.
2. Снимите сцреенсхот користећи ЦСС селекторе
Иако вам алатна трака Фирефок омогућава да снимате снимке екрана на целој страници или видљивим деловима, по мом мишљењу, метода селектора ЦСС-а је кориснија за снимање сцреенсхотови појединачних елемената као и за елементи који су видљиви на мишу само (попут менија).
Да бисте снимили снимке екрана преко менија, идите на ☰> Девелопер > Девелопер Тоолбар (схортцутСхифт + Ф2). Када се трака са алаткама појави на дну странице, откуцајте сцреенсхот --селецтор ани_уникуе_цсс_селецтор и притисните ентер.
Да би се то појавило у прозору алатки за развојне програмере: кликните на „Опције алатне траке“ и под одељком „Доступне дугмад алатке“ означите „Снимање екрана на целој страници " поље за потврду.
3. Изаберите боје са веб страница
Фирефок има уграђени алат за одабир боја по имену "капаљка". Да бисте приступили алату "капаљка" кроз мени идите на ☰> Девелопер > Капуљача.
Да би се ово појавило у прозору алатки за развојне програмере: кликните на „Опције алатке“ и под „Доступне алатке дугмета“ проверите секцију »Узмите боју са странице" поље за потврду.
4. Прегледајте изглед странице у 3Д
Приказивање веб страница у 3Д-у помаже у проблемима изгледа. Моћи ћете да видите различите слојевите елементе много јасније у 3Д приказу. Да бисте видели веб страницу у 3Д формату, кликните на дугме "3Д приказ".
Да би се ово појавило у прозору алатки за развојне програмере, кликните на „Опције алатног оквира“ и под „Доступне дугмад алатног оквира“ проверите део „3Д приказ" поље за потврду.
5. Прегледајте стил прегледача
Стилови прегледача се састоје од два типа: подразумевани стил који претраживач додељује сваком елементу и стилови специфични за претраживач (они са префиксом претраживача). Ако погледате стилове претраживача које ћете моћи дијагностиковати било какве проблеме у вашем стилу и да се упознају са постојећим стиловима специфичним за претраживач .
Да бисте приступили менију "Стилови прегледача", идите на.> Девелопер > Инспекторе. Затим кликните на картицу "Цомпутед" у десном делу и означите поље за избор "Бровсер стилес".
Можете и да отворите "Инспекторе"таб кроз пречицу Цтрл + Схифт + Ц и затим приступање" стиловима прегледача ".
6. Искључите ЈаваСцрипт за тренутну сесију
За најбољу праксу и компатибилност са читачем екрана увек се саветује да кодирате било коју веб локацију на такав начин да њена функционалност не буде ометена у окружењу које онемогућава јавасцрипт. Да бисте тестирали таква окружења, можете онемогућите ЈаваСцрипт за сесију у којој радите.
Да бисте онемогућили ЈаваСцрипт за тренутну сесију кликните на "Опције алатног оквира" и под одељком "Напредна подешавања" проверите "Онемогући ЈаваСцрипт*" поље за потврду.
7. Сакријте ЦСС стил са странице
Као и код ЈаваСцрипта, због забринутости због приступачности, најбоље је дизајнирати веб странице на такав начин странице треба да буду читљиве и без икаквих стилова. Да бисте видели како страница изгледа без икаквог стила, можете их онемогућити у алаткама за развојне програмере.
Да бисте уклонили било који ЦСС стил (уграђени, унутрашњи или спољашњи) који се примењује на веб страници, само кликните на симбол ока наведених листа стилова на картици "Уређивач стила". Кликните поново да бисте се вратили на оригинални приказ.
Да бисте приступили "Стиле Едитор-у" преко менија идите на ☰> Девелопер > Стиле Едитор (пречица: Схифт + Ф7.
8. Прегледајте одговор ХТМЛ садржаја на захтев
Фирефок развојни алати имају опцију прегледајте одговоре типа ХТМЛ садржаја. Ово помаже програмеру да прегледа било које преусмјеравање 302 и провјери да ли су у одговору приказане било какве осјетљиве информације.
За приступ "Превиев" кроз мени идите на ☰> Девелопер > Мрежа (пречица: Цтрл + Схифт + К. Затим отворите веб страницу по избору или поново учитајте тренутну страницу, кликните на жељени захтев (са ХТМЛ одговором) са листе захтева и кликните на дугме "Преглед"таб" у десном делу.
9. Прегледајте веб страницу на различитим величинама екрана
Да бисте тестирали веб страницу за њену реакцију, користите "Респонсиве Десигн Виев", којем можете приступити помоћу ☰> Девелопер > Респонсиве Десигн Виев или са пречицом: Цтрл + Схифт + М.
Да би се појавило дугме за алат "Одговарајући дизајн", кликните на "Опције алата" и под одељком "Расположиви тастери за алатку" означите "Режим одговорног дизајна".
10. Покрените ЈаваСцрипт на страницама
За брзо извршавање ЈаваСцрипт-а на било којој веб страници једноставно користите алатку "Сцратцхпад" Фирефок-а. Да бисте приступили "Сцратцхпаду" преко менија идите на; .> Девелопер > Сцратцхпад или користите тастерску пречицу Схифт + Ф4.
Да би се дугме алата "Сцратцхпад" појавило на прозору алатки за програмере за брзо коришћење: кликните на "Тоолбок Оптионс"и под"Доступни тастери за алатке"секција проверите" Сцратцхпад " поље за потврду.
