Поглед у основне Фирефок алате за веб програмере

Фирефок је дуго био преферирани претраживач за веб развој. Постоји велики број корисних додатака за обављање посла. У овом посту, погледаћемо неколико додатака за које мислим да је неопходно инсталирати ако желите да направите веб развој. Такође ћемо открити неке од значајки ових додатака које вам могу помоћи.

Прво, потребно је да инсталирамо Фиребуг.

Фиребуг

Фиребуг је обавезна инсталација за веб развој. Под претпоставком да не знате гдје да набавите Фиребуг, можете га инсталирати овдје. Вероватно морате поново покренути Фирефок пре него што се активира.

Након тога, Фиребуг можете прегледати на један од следећих начина: пратите овај мени Алатке> Веб програмери> Фиребуг, кликните десним тастером миша на веб страницу и изаберите “Прегледајте Елемент са Фиребугом”.

Алтернативно, можете пронаћи икону Фиребуг-а у Фирефок-у и кликните на њу, то ће приказати прозор фиребуг-а;

Фиребуг је сасвим идентичан Алатке за Цхроме програмере. она има панел да види ХТМЛ структуру и стилове, као и панел конзоле да види грешке, упозорења и дневнике. Али, имам још неколико савјета за које се надам да ћете бити корисни.

Подешавање величине кутије

ХТМЛ елемент се састоји од ЦСС бок модела који се састоји од маргине, паддинг и димензије објекта (видтх / хеигхт). Постоје случајеви када ћемо можда морати да изменимо ова својства. У том случају, можете одабрати један од елемената које желите да промените, а затим идите на Лаиоут панел.

У овом панелу ћете наћи илустрацију ЦСС бок модела заједно са његовим информацијама, укључујући и видтх и хеигхт. Иако ова два својства нису наведена у ЦСС-у, овај алат је довољно паметан да одреди вредност. Ако их морате модификовати, можете једноставно кликнути на вриједност и користити стрелицу за горе или доље за повећање или смањење вриједности.

Цомпутед стилес

У многим ситуацијама, вероватно се питате зашто се неки стилови не примењују. Један од лакших и бржих начина, нарочито када имате на хиљаде линија стилова, јесте да га прегледате из Цомпутед Стиле панел. Овај пример показује да је боја текста анцхор таг-а преписана .дугме класа, док је позадина .дугме класу преписује .буттон.адд.

Прегледање породице фонтова (једноставан начин)

Вероватно често нађете нешто овако породица фонтова својства у ЦСС-у са различитим фамилијама фонтова. Нажалост, то нам неће рећи које фонтове претраживач узима. Да бисмо олакшали идентификацију можемо да инсталирамо овај Фиребуг наставак ФиреФонтФамили.

Након што је инсталација завршена, учитајте своју веб страницу, а сада можемо јасно видјети која је фамилија фонтова примијењена. У нашем случају то је заправо Хелветица Неуе (види снимак).

Анализинг Перформанце

То може бити плитка, али брзина локације је сада један од Гоогле параметара (алгоритма) у одлучивању о квалитету веб-локације; Веб сајт који се брже учитава сматра се добро развијеним и рангиран вишим у смислу садржаја. Дакле, брзина није нешто што би требало занемарити.

Нет Панел

Прво место које ћете можда морати да посетите да бисте прегледали перформансе вашег веб сајта је Нет панел. Овај панел ће забележити ХТТП захтев вашег веб сајта када се учита. Овај снимак екрана у наставку приказује веб страницу која се учитава 42 захтев и узима около 4.36 сецондс утоварити.

Потом можете сортирати ХТТП захтев по њиховом типу као што су ХТМЛ, ЦСС и Имагес.

Ислов!

Осим тога, можете инсталирати ИСлов, екстензија за Фиребуг из Иахоо !. Када се активира, наћи ћете додатни панел који се експлицитно зове Ислов!.

Слично Нет панел, Ислов! ће забележити перформансе веб страница када се учита, али ће вам такође рећи зашто је веб страница спора и шта можемо да урадимо да је решимо. У овом примеру, покренули смо тест на веб-страници и он је оцењен 86 за укупне перформансе, што се сматра ОК.

Брзина странице

Алтернативно, такође можете да инсталирате Паге Спеед са Гоогле-а. Слично Ислов!, тестира брзину рада веб сајта, мада резултати теста могу бити мало другачији. Овај пример показује да је иста веб страница постигао 82 према Паге Спеед.

Веб Девелопер Тоолс

Веб Девелоперс Тоолс је очигледно за веб програмере и има гомилу могућности упакованих у ову траку са алаткама. Али ова испод је једна од мојих омиљених.

Имаге Инспецтион

Понекад је потребно да добијемо информације о слици са веб странице. Често видим да људи то раде прелазећи преко прегледача или десним кликом на слику и одабиром Приказ информација о слици, овако:

Али овај начин није сасвим ефикасан када треба да добијемо информације са многих слика. У том случају можемо искористити Имагес из додатка. Ова функција је лако доступна из менија Слика на траци са алаткама.

Овај пример показује како истовремено приказујемо димензију слике и величину датотеке слике:

Фирефок уграђени алати

У новијим верзијама, Фирефок је изузетно побољшао уграђене функције за веб програмере, а неке од њих су:

Нативе Инспецт Елемент

Тхис нативе Прегледати елемент из Фирефока може изгледати слично “Прегледајте Елемент у Фиребугу”, али она заправо делује на различите начине.

Овај пут нећу даље пролазити кроз ову значајку, јер је у суштини идентична Фиребуг ХТМЛ и ЦСС панелу, иако са разликом у изгледу и дизајну. Али, постоји једна карактеристична особина коју вреди испробати 3Д приказ.

Користећи 3Д приказ можете прегледати структуру веб странице у дубини. Да бисте активирали овај приказ, можете пронаћи дугме у доњем десном углу “Фирефок Нативе Инспецт Елемент”. Ево како 3Д приказ Изгледа.

Не користим га толико често као друге карактеристике, али то је сасвим иновативна функција из Мозилле коју признајем, и свакако веома корисна у одређеним ситуацијама.

Приказ Веб дизајна

Од све веце популарности у Респонсиве Веб Десигн-у, Фирефок је иницирао "Респонсиве Боокмарклет" у Бровсер. Овај алат ће нам омогућити да тестирамо наш одговарајући веб сајт у различитим оквирима за приказ без промене величине прозора претраживача.

Овај приказ је доступан из овог менија: Алатке> Веб Девелопер> Веб Десигн Виев. И како изгледа поглед.

Стиле Едитор

На крају, ако често радите са ЦСС-ом, вероватно ћете се заљубити у ову функцију. Од верзије 11, Фирефок је додао Стиле Едитор у својим изворним алатима за развојне програмере.

Ова функција је цоол Приказ Веб дизајна, омогућава вам да уредите ЦСС, одмах видите утицај на претраживачу и сачувате промене које директно утичу на ЦСС изворну датотеку.

Едитор стила је доступан из следећег менија: Алатке> Веб Девелопер> Стиле Едитор.

Финал Тхоугхт

У овим додатцима за Фирефок налази се гомила значајки, а оне о којима се овдје говори само су неке од значајки које често користим приликом израде веба. Ипак, можда имате још неколико савјета који би могли бити корисни за повећање продуктивности веб развоја у Фирефоку.

Које функције често користите? Своје мисли можете подијелити у оквиру за коментаре испод.