Добрый день, дорогой читатель! Сегодня продолжаю рассказывать о возможностях стандартного браузера для обычного блогера. Посмотрим, для чего можно использовать панель с запросами.
Как я уже писал неоднократно, панель или консоль разработчика открывается клавише "f12" в chrome и других браузерах, она не сильно отличается по своему устройству.
Network
После открытия консоли, мы можем увидеть ошибки и посмотреть еще много интересного, но это уже описано в предыдущих статьях: часть 1 и часть 2. Сегодня поговорим о вкладке "Network".
Внимание! Если открыть панель после открытия сайта, то вкладка будет почти или совсем пустой, но если обновить вкладку не закрывая панель, мы увидим множество запросов, которые выполняет наш сайт.
Казалось бы, чем нам может помочь эта информация? На самом деле отсюда можно узнать не мало полезных данных, которые относятся к статье: "Как ускорить скорость работы блога своими силами".
Мы можем посмотреть, сколько же по времени грузятся наши картинки для сайта, это файлы с расширением jpeg, png, ico и bmp. И соответственно, мы можем предпринять шаги по улучшению этого показателя. Здесь же будет отлично видна разница по времени между загрузкой иконок в виде картинок и "шрифтовых иконок".
Кроме того, данная вкладка, поможет найти ошибки. Например, не работает стиль на текст или картинка пропала. Проверяете, вроде все добавили, но не работает. Здесь может быть подобный текст ошибок в консоли.
Собственно, означает он одно, файл не удалось найти. Как устранять? Нужно проверять точно ли эта картинка существует в файлах сайта.
К примеру, на этой картинке, в ошибке сразу указан путь, по которому ожидается найти файл, в данном случае 127.0.0.1:50199 заменяет url вашего сайта, то есть браузер пытается скачать картинку прямо из папки с файлами вашего сайта. Корень сайта, можно посмотреть через ftp соединение или админку сайта. Таким же образом, можно проверить существование любого другого файла в любой из папок, если браузер вывел ошибку с его загрузкой. В случае, если файл лежит в папке, например, "wpContent", то путь был бы следующего вида: "http://127.0.0.1:50199/wpContent/favicon.ico".
В первую очередь, стоит проверить следующее:
1. Наименование файла, желательно попробовать переименовать,
может в названии затесались русские буквы или упущено несколько
символов;
2. Проверьте расширение файла, оно должно совпадать с указанным в
тексте ошибки браузера;
3. Проверьте по шагам, совпадают ли имена всех предыдущих
указанных папок на пути к файлу, после url сайта.
Анализ запросов
Кроме того, вы можете проверить, сколько времени тратится на загрузку таблиц стилей, файлы с расширением css и скриптов, файлы с расширением js.
И, наконец, последнее, можно проверить, а не обращается ли сайт на какие-то неизвестные адреса. Это может быть полезно, если вы предполагаете, что в сайт внедрен какой-то вирус, который отсылает данные сторонним ресурсам. Но эта работа потребует не малого времени, если только запрос не повторяется с регулярностью в несколько секунд, тогда достаточно просто ничего не делать, повторяющийся запрос очень скоро станет видно на фоне остальных в конце очереди.
Удачи! Спасибо за внимание!