Как использовать инструмент «Проверить элемент» в Firefox для сканирования любого веб-сайта

Если вы хотите знать, как организованы ваши любимые веб-сайты, службы «сканирования» браузера могут быть скрытым благом. У нас есть инструмент Chrome "Inspect", и Firefox также поставляется с аналогичным предложением.

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

Как использовать инструмент «Проверить элемент» в Firefox для проверки любого веб-сайта - инструкции

Опытные разработчики могут не найти в этом ботинке многого. Однако новички и обычные веб-пользователи должны найти новую и мощную сторону возможностей Firefox и огромную глубину файлов и процессов, которые лежат в основе каждого веб-сайта в Интернете.

Установка

Если вы используете Firefox, больше ничего делать не нужно. Если вы хотите начать работу с Firefox, и вы используете Windows, Linux, Mac, iOS или Android, Перейдите по этой ссылке Чтобы найти последнюю версию браузера. Установите загруженные файлы установщика, как обычно, дважды щелкнув по ним или щелкнув, если вы используете смартфон.

Возможно, что основные дистрибутивы Linux поставляются с предустановленным Firefox или имеют копии Firefox в своих репозиториях Software Center / Package, которые пользователь может легко установить.

Откройте «Проверить элемент»

После установки Firefox вы можете найти Inspect, щелкнув правой кнопкой мыши любой элемент на веб-странице. Это покажет вам раскрывающийся список, подобный изображенному ниже, где «Проверить элемент» находится в нижней части списка.

Как использовать инструмент «Проверить элемент» в Firefox для проверки любого веб-сайта - инструкции

Диагностика

При нажатии на «Осмотреть элемент» в нижней части экрана сразу же откроется окно «Осмотреть». На этом этапе адреса становятся немного размытыми, поскольку инспектор технически откроет часть своих услуг «Осмотреть».

Как использовать инструмент «Проверить элемент» в Firefox для проверки любого веб-сайта - инструкции

В любом случае элемент, на который вы щелкнули, будет отображаться в середине виджета, и когда вы наводите указатель мыши на этот элемент - как тег На что вы наводите курсор на скриншоте ниже - «Осмотреть» выделит этот видимый элемент на вашем экране на самой веб-странице.

Так вам будет легче узнать, на какие предметы вы смотрите. Это также упрощает поиск различных свойств этих элементов. Если вы посмотрите на правую сторонуДиагностика', вы увидите характеристики этого знака указан, включая его настройки для полей, заполнения, границы, размера шрифта и вертикального выравнивания.

Если вы прокрутите правую боковую панель, вы увидите свойства, унаследованные от других элементов. Вы даже можете изменить свойства в этом окне и наблюдать, как оно отображается на веб-странице в режиме реального времени.

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

Вы можете продолжить свое путешествие в мир каскадных таблиц стилей (CSS), следуя панели инструментов в верхней части Inspect. Щелкните там, где написано «Редактор стилей», чтобы открыть новый диалог с тремя новыми панелями внизу экрана.

Как использовать инструмент «Проверить элемент» в Firefox для проверки любого веб-сайта - инструкции

Здесь вы можете увидеть два файла таблицы стилей DuckDuckGo, определенные элементы ссылок на таблицу стилей и различные правила «мультимедиа» для этой таблицы, которые управляют адаптивным дизайном для маленьких и больших экранов.

Вы можете редактировать эти таблицы стилей так же, как и в разделе «Проверка». В этом случае есть много правил на выбор - 1262 правила только в первой таблице стилей.

Как использовать инструмент «Проверить элемент» в Firefox для проверки любого веб-сайта - инструкции

Если вы перейдете дальше на панели инструментов к сетевому монитору, вы найдете запросы веб-сайтов на эти файлы и их статусы. На этой вкладке также могут присутствовать другие элементы, такие как изображения и шрифты, и вы можете видеть все эти запросы и размер каждого файла после обработки запроса.

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

Когда вы откроете вкладку «Производительность», вам нужно будет нажать кнопку «Начать запись производительности», чтобы Inspect собирал информацию. За несколько секунд SPS определит, какие кадры запущены на странице, какие события объектной модели документа (DOM) произошли, и пересчитает шаблон, а также время (обычно в миллисекундах), которое потребовалось для загрузки этих элементов.

Как использовать инструмент «Проверить элемент» в Firefox для проверки любого веб-сайта - инструкции

Для этого сайта вы можете увидеть затененное событие DOM, при наведении курсора мыши для загрузки потребовалось 6.03 мсек. Средний FPS для этой страницы был около 39. График, показывающий время отклика, для некоторых событий составил 9000 миллисекунд.

объем памяти

На вкладке «Память» вам также потребуется нажать кнопку «Сделать снимок» для сбора информации. Для меня была создана карта событий, которая показывает около 600 КБ строк, 1 МБ объектов и 1 МБ скриптов, попадающих в память. Вы можете просмотреть эти же элементы двумя разными способами, щелкнув раскрывающееся меню с надписью «Древовидная карта», как вы можете видеть на этом снимке экрана.

Как использовать инструмент «Проверить элемент» в Firefox для проверки любого веб-сайта - инструкции

Место хранения

Наконец, если вы нажмете на вкладку «Хранилище», вы увидите постоянные файлы, которые веб-сайт мог разместить на вашем компьютере. Это актуально для большинства пользователей, включая файлы cookie. Вы можете увидеть один загруженный на изображении ниже.

Как использовать инструмент «Проверить элемент» в Firefox для проверки любого веб-сайта - инструкции

Вы можете видеть на правой боковой панели, что срок действия этого файла cookie истечет в середине следующего десятилетия, и что я получил его во время сеанса написания.

Заключение

При использовании средства просмотра Firefox нужно через многое пройти. Это введение в несколько частей должно занять вас некоторое время.

Найдите время, чтобы поменять предметы HTML зависит от сайта. Посетите несколько разных веб-сайтов, чтобы узнать время их загрузки. Посмотрите, сколько файлов cookie конкретная страница пытается сохранить на вашем устройстве. Иногда эта информация может дать вам важную информацию.

Мы надеемся, что эта экскурсия поможет вам лучше понять, что делают веб-сайты, чтобы они могли функционировать так, как вы от них ожидаете. Это может быть намного больше, чем вы думали ранее.

Источник
Перейти к верхней кнопке