Можно увидеть, что на этот элемент навешен стиль,
который отвечает за logo, собственно,
если его выключить, оно пропадет и таким образом можно отменять и добавлять стили.
Если мы хотим проверить какой-то определенный стиль, например,
display noen, мы увидим, что наш элемент пропал.
Мы применили этот стиль к непосредственно этому элементу.
Это очень удобно, когда мы верстаем и хотим попробовать, протестировать.
Нам не нужно лезть в код, находить этот элемент.
Мы просто его находим с помощью вот этого инспектора,
прямо в браузере, добавляем нужное нам стили и смотрим как это выглядит.
Очень удобный инструмент, когда мы хотим проверить,
как наш сайт будет выглядеть на мобильном устройстве.
Нажимаем и у нас экран уменьшается в формат
нашего мобильного устройства и мы можем посмотреть, как же сайт будет выглядеть на нем.
Можно выбрать то устройство, которое нам необходимо,
он будет и менять user агент,
и тут будет показано размер экрана и можно выбрать скорость
интернета или например вообще его выключить.
Попробуем обновить, вот, у нас появился динозавр. Попробуем включить.
Пробуем обновить, мы видим,
что скорость загрузки очень медленная и таким образом можно проверить как
у нас будет страница отображатся на медленном интернете. Очень удобно в разработке.
Следующий этап, который мы посмотрим, это network,
тоже один из самых важных элементов в инспекторе. Тут мы можем видеть все,
что происходит сетью на нашей странице. В самом начале мы видим,
что идет HTTP запрос, HTTPS mail.ru.
Получаем двести, можем посмотреть в превью
и увидеть что она отдал веб сервер очень много джи эс кода, какой то верстки и т.д. [inaudible].
Также, после этого, у нас начали подгружаться наши JS файлы,
наши CSS файлы, картинки наши статика.
Это можно посмотреть по типу файлов с помощью вот этих фильтров JS,
CSS, image, font -шрифты,
но у нас их тут нет и т.д.
XHR, это аякс запросы, у нас их тоже тут нет.
Очень важные элементы сверху, например, disable cache,
это означает, что наш браузер не будет кэшировать статические файлы.
Может быть такая проблема, что вы изменили в коде ваш файл и стиль не применился.
Может быть это из за того,
что ваш браузер закэшировал этот файл и не получил обновления.
Давайте перейдем обратно в обычный режим.
Можем видеть, что когда
мы увеличили нашу страницу до размеров десктопа, то появились некоторые react запросы.
Давайте теперь перейдем на вкладку Application. Тут очень важно раздел storage.
Это то, что хранит наши страницы,
например, locarl storage, это локальное хранилище.
Это не как [inaudible] хранилище, к которой можно иметь доступ с помощью JS.
Тут можно посмотреть все данные, которые хранит наша страница.
И cookies storage, посмотреть те куки,
которые установлены на наш домен mail.ru.
Ими можно манипулировать, посмотреть на какой домен они
устанавливается, посмотреть время их жизни,
посмотреть может ли они устанавливаться на запросе HTTP и так далее и тому подобное.