Добрый день! Продолжаю рассказывать о возможностях панели разработчика в браузере для простого блогера. Сегодня расскажу о том, как быстро проверить адаптивная верстка или нет и для чего может понадобиться очистка кеша в браузере.
Кеш
Начну с конца – очистка кеша. Для начала, а зачем это знать? Наверное, многие замечали, что иногда после обновления каких-то данных, Вы открываете свой блог, а там осталось все по-старому. Идете снова на сайт, а там информация обновлена. Возвращаетесь, обновляете страницу, а данные не появились. Начинаете, как параноик жать “f5” или кнопку перезагрузки страницы. наконец данные отображаются, а Вы сидите и не понимаете, почему сразу не сработало.
А дело вот в чем, как я и писал в статье "Как блогеру ускорить загрузку сайта своими силами?". Для уменьшения времени загрузки страницы и экономии трафика, часть данных (это могут быть скрипты, таблицы стилей, картинки, разметка страницы и т.д.) кешируются в браузере, когда вы открываете сайт, то видите сайт, каким он был на момент кеширования.
Как нам поможет панель разработчика? Очень просто! У нее есть специальный режим обновления страницы с очисткой кеша (можно еще попробовать режим инкогнито, но этот способ менее надежен). Переходим на нужный сайт. Открываем панель разработчика клавишей “f12”. А теперь зажимаем кнопку "обновление страницы" левой кнопкой мыши, пока не появится окошко, как на картинке, потом отпускаем.
Выбираем последний пункт «Очистка кеша и жесткая перезагрузка» и нажимаем левой кнопкой мыши. Готово! Теперь, если данные не обновились, можно попробовать еще раз повторить описанную процедуру, но скорее всего, они действительно не сохранились или дали не тот результат, на который Вы рассчитывали.
Мобильная версия сайта
Я думаю, никто спорить не будет, что в условиях нынешнего времени, игнорировать потенциальные посещения с мобильного телефона просто нельзя, но как же нам посмотреть, как выглядит наш блог с телефонов?
Сейчас на слуху очень модное понятие. Адаптивная верстка - это означает, что сайт оптимизирован для работы на мобильных устройствах и компьютере, а также планшетах.
Да, мы можем зайти с собственного гаджета, но ведь у телефонов разные разрешения и размеры экранов? На этот случай компания Google встроила в свой браузер, возможность имитации просмотра с мобильных устройств. Где она находится? Правильно! В панели разработчика.
Открываем интересующий нас сайт и нажимаем “f12”. Далее нажимаем кнопку “Toggle device toolbar”
Готово! К вашим услугам панель, позволяющая посмотреть сайт почти при любых условиях с кучей настроек и возможностей.
Зеленым квадратиком отмечен список устройств с уже заданными разрешениями, зачастую самые популярные гаджеты. Хотя можно воспользоваться и кнопкой «Edit…», уж там вы найдете огромный список устройств.
Вторая настройка, выделенная красным квадратиком - это как раз разрешение экрана, которое опять же можно легко редактировать, просто кликнув и изменив цифры.
Так же можно настроить масштаб отображения на имитируемом гаджете, селектор обведен синим цветом. Пользователь захотел приблизить или отдалить? Вот и проверим, как сайт себя поведет.
Есть даже имитация просмотра в режиме медленного интернета или вообще оффлайн, хотя скажу честно, ей не приходилось пользоваться. Но возможность такая есть, переключатель выделен оранжевым квадратиком.
И последнее, черным квадратиком выделена кнопка имитирующая поворот экрана.
Кроме того, наведя на окошко с сайтом появится специальный значок, с помощью него можно посмотреть, как будет выглядеть сайт при скроллинге сайта с сенсорного экрана.
Отключается режим просмотра в мобильных устройствах повторным нажатием на кнопку “Toggle device toolbar”.
Вам сверстали адаптивную чудо верстку или предлагают отличный шаблон для CMS? Теперь вы можете проверить это в несколько кликов!
Итоги
Все эти инструменты, облегчают жизнь разработчикам программного обеспечения, но иногда могут оказаться очень полезны и любому пользователю популярного браузера.
Спасибо за внимание! Удачи!
Надеюсь кому-то этот материал окажется полезным. Если есть вопросы пишите в комментариях, буду стараться отвечать!