Поглед към основните инструменти на Firefox за уеб разработчици

Firefox отдавна е предпочитаният браузър за уеб разработки. Съществуват редица полезни добавки за тази работа. В този пост ще разгледаме няколко добавки, които мисля, че е от съществено значение, за да бъдат инсталирани, ако ще направите уеб разработка. Също така ще разкрием някои от функциите в тези добавки, които могат да помогнат.

Първо, трябва да инсталираме Firebug.

подпалвач

Firebug е задължителна добавка за уеб разработка. Ако приемем, че не знаете къде да намерите Firebug, можете да го инсталирате тук. Вероятно трябва да рестартирате Firefox, преди да е активиран.

След това можете да прегледате Firebug чрез един от следните начини: следвайте това меню Инструменти> Уеб разработчици> Firebug, щракнете с десния бутон върху уеб страницата и изберете “Проверете елемента с Firebug”.

Като алтернатива можете да намерите иконата на Firebug във Firefox и да кликнете върху нея, това ще покаже прозореца на firebug;

Firebug е съвсем идентичен с Инструменти на Chrome за разработчици. той има панел, за да види структурата на HTML и стиловете, както и панел Console, за да види грешките, предупрежденията и регистрационните файлове. Но, имам още няколко съвета, които, надявам се, ще ви бъдат полезни.

Регулиране на размера на кутията

HTML елементът се състои от CSS кутия, която се състои от марж, подложка и размер на обекта (ширина / височина). Има моменти, когато може да се наложи да променим тези свойства. В този случай можете да изберете един от елементите, които искате да промените, след това да отидете на оформление панел.

В този панел ще намерите илюстрация на CSS кутия модел заедно с нейната информация, включително широчина и височина. Въпреки че тези две свойства не са посочени в CSS, този инструмент е достатъчно умен, за да определи стойността. Ако трябва да ги промените, можете просто да кликнете върху стойността и да използвате клавиша със стрелка нагоре или надолу, за да увеличите или намалите стойността.

Изчислени стилове

В много ситуации вероятно се чудите защо някои стилове не се прилагат. Един от по-лесните и по-бързи начини, особено когато имате хиляди редове от стилове, е да го инспектирате от Computed Style панел. Този пример показва, че цветът на текста на котвения маркер е презаписан от .бутон клас, докато на фона на .бутон Класът се презаписва от .button.add.

Проверка на семейството на шрифтове (лесният начин)

Вероятно често намирате нещо подобно шрифтово семейство свойство в CSS с различни семейства шрифтове. За съжаление, това няма да ни каже конкретно кой шрифт е в браузъра. За да направим идентификацията по-лесна, можем да инсталираме точно това разширение Firebug FireFontFamily.

След като инсталацията приключи, заредете уеб страницата си и сега можем ясно да видим кое семейство на шрифтовете се прилага. В нашия случай това е всъщност Хелветика Нойе (виж изстрел).

Анализ на ефективността

Това може да е плод, но скоростта на сайта вече е един от параметрите на Google (алгоритъм) при определянето на качеството на уебсайта; уебсайтът, който се зарежда по-бързо, се счита за добре развит и класиран по-високо по съдържание. Така че скоростта не е нещо, което трябва да се пренебрегне.

Панел за мрежата

На първо място, което може да се наложи да посетите, за да проверите ефективността на уебсайта си, е нето панел. Този панел ще запише HTTP заявката на вашия уебсайт, когато е заредена. Тази снимка отдолу показва уеб страница, която се зарежда 42 искане и заобикаля 4,36 секунди за зареждане.

След това можете да сортирате HTTP заявката според вида им като HTML, CSS и Images.

YSlow!

Освен това можете да инсталирате YSlow, разширение за Firebug от Yahoo !. След като бъде активиран, ще намерите допълнителен панел, който се нарича Yslow!.

Подобен на нето панел, Yslow! ще запише представянето на уеб страницата, когато се зарежда, но тогава ще ви каже и защо уеб страницата е бавна и какво можем да направим, за да я разрешим. В този пример провеждаме тест за уеб страница и той се оценява 86 за цялостното представяне, което се счита за ОК.

Скорост на страницата

Също така можете да инсталирате Page Speed ​​от Google. Подобен на YSlow!, тества скоростта на работа на уебсайта, макар че резултатът от теста може да е малко по-различен. Този пример показва, че същата уеб страница отбеляза 82 според скоростта на страницата.

Инструменти за уеб разработчици

Инструментите за уеб разработчици очевидно са за уеб разработчиците и в нея има куп характеристики. Но този по-долу е един от любимите ми.

Проверка на изображението

Има случаи, когато може да се наложи да получим информация за изображението от уеб страницата. Често виждам, че хората правят това, като се препъват в браузъра или като щракват с десен бутон върху изображението и избират Вижте информация за изображението, така:

Но този начин не е много ефективен, когато трябва да получим информацията от много изображения. В този случай можем да използваме Снимки функция от добавката. Тази функция е лесно достъпна от менюто Изображение от лентата с инструменти.

И този пример показва как показваме едновременно размера на изображението и размера на файла с изображението:

Вградени инструменти на Firefox

В последните версии, Firefox е значително подобрил вградените си функции за уеб разработчици, някои от тях са:

Вътрешен инспектиращ елемент

Този роден Инспектирай елемента от Firefox може да изглежда подобно на “Проверете елемента в Firebug”, но действително действа по различни начини.

Този път няма да мине през тази функция, тъй като е по същество идентична с Firebug HTML и CSS панела, макар и с разлика в оформлението и дизайна. Но има една отличителна черта, която си струва да се пробва 3D изглед.

Използвайки 3D изглед можете да видите структурата на уеб страницата в дълбочина. За да активирате този изглед, можете да намерите бутона в долния десен ъгъл на “Оригинален инспектор на Firefox”. Ето как 3D изглед изглежда като.

Не го използвам толкова често, колкото други функции, но това е доста новаторска функция от Mozilla, която признавам, и със сигурност много полезна в определени ситуации.

Уеб дизайн

От нарастващата популярност в Отзивчивия уеб дизайн, Firefox е инициирал Отзивчиви маркери към браузъра. Този инструмент ще ни позволи да тестваме нашия отзивчив уебсайт в различни екрани, без да променяме размера на прозореца на браузъра.

Този изглед е достъпен от това меню: Инструменти> Уеб програмист> Изглед за уеб дизайн. И как изглежда изгледът.

Редактор на стил

И накрая, ако често работите с CSS, вероятно ще се влюбите в тази функция. От версията от 11, Firefox е добавил Редактор на стил в оригиналните си инструменти за разработчици.

Тази функция е толкова готин, колкото Уеб дизайн, тя ви позволява да редактирате CSS, да видите моментално въздействието върху браузъра и да запазите промените, които пряко засягат изходния файл на CSS.

Редакторът на стила е достъпен от следното меню: Инструменти> Уеб програмист> Редактор на стил.

Заключителна мисъл

Има куп характеристики, опаковани в тези Firefox добавки и тези, които са обсъдени тук, са само някои от функциите, които използвам доста често по време на уеб разработки. Въпреки това, може да имате някои други съвети, които биха могли да бъдат полезни за увеличаване на производителността на уеб разработките във Firefox.

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