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

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

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

1. Преглед на хоризонтални и вертикални владетели

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

За достъп до владетелите през менюто, отидете на: ☰> Разработчик > Лента с инструменти за програмисти (пряк път: Shift + F2). След като лентата с инструменти се появи в долната част на страницата, въведете владетели и натиснете Въведете.

За да се появи това в прозореца на инструментите за разработчици, отидете на "Опции на кутията с инструменти". Под секцията „Налични бутони за инструментариум“ поставете отметка в „“Превключете правителите за страницата".

2. Направете скрийншоти, използвайки CSS селектори

Въпреки че лентата с инструменти на Firefox ви позволява да правите скрийншоти на цялата страница или видимите части, според мен методът на CSS селектора е по-полезен за улавяне снимки на екрани на отделни елементи както и за елементи, които се виждат на мишката само (като менюта).

За да направите екранни снимки през менюто, отидете на ☰> Разработчик > Лента с инструменти за програмисти (shortcutShift + F2). След като лентата с инструменти се появи в долната част на страницата, въведете screenshot - селектор any_unique_css_selector и натиснете въведете.

За да се покаже това в прозореца на инструментите за програмисти: кликнете върху „Опции в кутията с инструменти“ и в секцията „Налични бутони с инструменти“, отметнете „Направете екранна снимка на цяла страница " отметка.

3. Изберете цветове от уеб страниците

Firefox има вграден инструмент за избор на цвят на име "Eyedropper". За да влезете в инструмента "Капсулата" през менюто отидете на ☰> Разработчик > пипетка.

За да се покаже това в прозореца на инструментите за разработчици: кликнете върху „Опции в кутията с инструменти“ и в „Налични бутони с инструменти“ „Проверка на секцията“Вземете цвят от страницата".

4. Преглед на оформлението на страницата в 3D

Преглеждането на уеб страници в 3D помага при проблеми с оформлението. Ще можете да виждате различните слоести елементи по-ясно в 3D изглед. За да видите уеб страницата в 3D, кликнете върху бутона „3D изглед“.

За да се покаже това в прозореца на инструментите за разработчици, кликнете върху „Опции в кутията с инструменти“ и в секцията „Налични бутони за инструментариум“ проверете секцията „3D изглед".

5. Преглед на стила на браузъра

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

За достъп до "Стил на браузъра" чрез менюто, отидете на ☰> Разработчик > Инспектор. След това кликнете върху раздела "Изчислени" в дясната част и поставете отметка в квадратчето "Стилове на браузъра".

Можете също да отворите "Инспектор"" чрез клавишната комбинация Ctrl + Shift + C и след това достъп до "Стил на браузъра".

6. Изключете JavaScript за текущата сесия

За най-добра практика и съвместимост с четци на екрани винаги се препоръчва да кодирате всеки уебсайт по такъв начин, че функционалността му да не бъде възпрепятствана в среда, забранена на javascript. За да тествате за такива среди, можете деактивирайте JavaScript за сесията, в която работите.

За да деактивирате JavaScript за текущата сесия, кликнете върху „Опции в кутията с инструменти“ и в секцията „Разширени настройки“ проверете „Деактивирайте JavaScript* ".

7. Скрийте стила на CSS от страницата

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

За да премахнете всеки CSS стил (вграден, вътрешен или външен), приложен към уеб страница, просто кликнете върху очния символ на изброените стилове в раздела "Редактор на стил". Кликнете отново, за да се върнете към първоначалния изглед.

За достъп до "Редактор на стил" чрез менюто отидете на go> Разработчик > Редактор на стил (пряк път: Shift + F7.

8. Прегледайте отговора на HTML съдържанието на заявка

Инструментите за разработчици на Firefox имат възможност прегледайте отговорите от типа HTML съдържание. Това помага на разработчика да визуализира всички 302 пренасочвания и да провери дали в отговора е била предоставена някаква чувствителна информация.

За достъп до "Преглед" през менюто отидете на ☰> Разработчик > мрежа (пряк път: Ctrl + Shift + Q. След това отворете уеб страницата по ваш избор или презаредете текущата страница, кликнете върху желана заявка (с отговор в HTML формат) от списъка с искания и кликнете върхупредварителен преглед"раздел вдясно.

9. Прегледайте уеб страницата в различни размери на екрана

За да тествате уеб страница за нейната отзивчивост, използвайте "Responsive Design View", който може да бъде достъпен чрез ☰> Разработчик > Отзивчиво проектиране или с прекия път: Ctrl + Shift + M.

За да се покаже бутонът на инструмента „Отзивчиви режими на проектиране“, кликнете върху „Опции в кутията с инструменти“ и в раздела „Налични бутони с инструменти“ поставете отметка в квадратчето „Режим на отзивчив дизайн“.

10. Стартирайте JavaScript на страници

За бързи изпълнения на JavaScript на всяка уеб страница използвайте инструмента "Scratchpad" на Firefox. За достъп до "Scratchpad" през менюто отидете; .> Разработчик > Scratchpad или използвайте клавишната комбинация Shift + F4.

За да се появи бутонът „Scratchpad“ в инструмента за програмисти за бързо използване: кликнете върху „Опции в кутията с инструменти"и под"Налични бутони за инструментариум"разгледайте" Скречпада " отметка.