Издание за разработчици на Firefox 6 Интелигентни инструменти, които трябва да опитате

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

Ако сте човек, който никога не е използвал или не е много запознат с инструментите за разработчици, дори и тези в стандартното издание, първо вижте този страхотен "DevTools Challenger" от Mozilla. Тук можете да практикувате с някои от инструментите, споменати по-долу в браузъра за издатели на Firefox. Примерите са забавни и лесни за следване, инструкциите са ясни и ако не можете да наваксате, просто следвайте видео урока.

1. Инструмент за проверка на анимацията

CSS анимациите стават все по-чести и инструментите за CSS анимация, предоставени от издателя на разработчиците на Firefox, улесняват проследяването и проверката на всяка стъпка от създадената анимация. Можете да направите пауза, да възпроизведете и да отмените всяка анимация; можете също да го видите да се случва по кадър чрез пречистване.

За достъп до инструмента отворете Инспектор Инструмент, като щракнете с десния бутон върху анимиращия елемент и изберете "inspect element", след това от дясната страна на прозореца на инструмента dev, кликнете върху "Animations".

2. Редактор на функцията за синхронизация на анимацията

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

Ако не сте вече запознати с кубичната функция за анимация на Bezier, препоръчвам този пост да научите повече за него.

3. Избор на цвят за CSS свойства

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

До всяка стойност на CSS цвят в правилник част от Инспектор Инструмент, има икона, която ще отвори цветово колело, което се появява при кликване. Можете да изберете желания цвят от колелото.

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

4. Измервателен инструмент

Този инструмент ви позволява да видите позицията XY на курсора, както и височината, ширината и диагоналното измерване в пиксели на избрана част. За да използвате инструмента, първо трябва да го активирате в разработчика Опции в кутията с инструменти, като поставите отметка в квадратчето „Измерване на част от страницата“ под „Налични бутони с инструменти“.

След като бъде активирана, иконата на линийка ще се появи в горната част на прозореца на инструмента dev, щракнете върху тази икона и преместете курсора върху страницата. Ще видите позициите XY близо до курсора. За да измерите ширината, височината и диагонала, просто кликнете и плъзнете, за да изберете частта, която искате да измерите.

5. Редактор на CSS филтър

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

За да премахнете филтър, щракнете върху маркера × в десния край на името на филтъра. За да добавите филтър, кликнете върху полето за филтриране в долната част и изберете това, което искате да добавите, и кликнете върху + знак. Можете също така да пренаредите филтрите в произволен ред, като преместите всеки елемент.

6. Инструмент за памет

Можете да разберете какво е заемането на паметта във вашата уеб страница, с помощта на този инструмент. Това ви помага да предприемете стъпки за намаляване на използването на паметта и следователно да подобрите скоростта на страницата.

За да използвате инструмента, първо трябва да го активирате от Опции в кутията с инструменти като поставите отметка в квадратчето с име "Памет" в "Default Firefox Developer Tools". Веднъж отметнати, ще видите секцията "Памет" в горната част на прозореца на инструмента dev след "Performance". Изберете това.

За да използвате инструмента, щракнете върху "Вземете снимка" или бутона на камерата. Ще видите списък с елементи, като обекти и скриптове, които заемат памет .