Ако някога сте искали да знаете как са структурирани любимите ви уеб сайтове, услугите на "браузър" могат да бъдат скрита благословия. Обхвалихме инструмента "Inspect" на Chrome и Firefox има и подобно предложение.

Инструментът "Inspect Element" на Firefox може да ви помогне да разберете основите на работата на уебсайта, включително HTML и CSS елементите, които използва, натоварването му в мрежата, латентността на елементите му за зареждане и файловете, които съхранява, като например бисквитки.

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

Инсталация

Ако използвате Firefox, не е нужно да правите нищо по-нататък. Ако искате да започнете да използвате Firefox и сте на Windows, Linux, Mac, iOS или Android, следвайте тази връзка, за да намерите най-новата версия на браузъра. Инсталирайте изтеглените инсталационни файлове, както обикновено, като ги щракнете два пъти или докоснете, ако сте на смартфон.

Основните дистрибуции на Linux вероятно идват с предварително инсталиран Firefox или имат копия на Firefox в техните хранилища за софтуерни центрове / пакети, които потребителят може лесно да инсталира.

Отваряне на "Inspect Element"

След инсталирането на Firefox можете да намерите инспектора му, като кликнете с десния бутон на мишката върху който и да е елемент на уеб страница. Това ще ви покаже падащо меню, като това, показано по-долу, където "Inspect Element" се намира в долната част на списъка.

Инспектор

Кликването върху "Inspect Element" ще отвори незабавно инспектора в долната част на екрана. В този момент заглавията стават малко помрачени, тъй като инспекторът технически ще отвори част от услугите си "Инспектор".

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

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

Ако преминете през този десен панел, можете да видите свойствата, които наследи от други елементи. Можете дори да промените свойствата в този прозорец и да ги видите в уеб страницата в реално време.

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

Можете да продължите пътуването си до сферата на каскадните стилови листове (CSS), като следвате лентата с инструменти в горната част на инспектора. Кликнете върху "Редактор на стилове", за да отворите нов диалог, който показва три нови панела в долната част на екрана.

Тук можете да видите двата файла със стилови листа, които DuckDuckGo използва, елементите на първия избран стилов лист и различните "@ медия" правила на листа, които регулират отзивчивия дизайн за по-малки и големи екрани.

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

Ако навигирате още по-нататък в лентата с инструменти на "Network Monitor", ще намерите заявките на уеб сайта за тези файлове и техните статуси. Други елементи, като например изображения и шрифтове, също могат да присъстват в този раздел и можете да видите всички тези заявки и размера на всеки файл, след като заявката бъде обработена.

производителност

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

За този сайт можете да видите подчертаното събитие в DOM, мишката, за да се зареди 6.03 милисекунди. Средната стойност на FPS за тази страница беше около 39. И графиката, показваща, че обхватът на времето за отговор достигна 9000 милисекунди за някои събития.

памет

В раздела "Памет" ще трябва да кликнете върху бутон "Take Snapshot" - за да съберете информация. За мен генерира карта на събитията, която показва приблизително 600 Kb струни, 1 Mb обекти и 1 Mb скриптове, които намират пътя си в паметта. Можете да разглеждате същите тези елементи по няколко различни начина, като кликнете върху падащото меню, където се казва "Tree Map", както можете да видите на тази екранна снимка.

съхранение

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

В панела вдясно можете да видите, че тази конкретна "бисквитка" изтича в средата на следващото десетилетие и че съм я осъществила по време на сесията на тази статия.

заключение

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

Отделете известно време, за да промените елементите на сайта на HTML. Посетете няколко различни уебсайта, за да видите времето им за зареждане. Разберете колко бисквитки се опитват да съхраняват определена страница на вашата машина. Понякога тази информация може да ви даде пауза.

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

Кредитна картина: Firefox Quantum начална страница от DepositPhotos