Это вторая статья из цикла, посвященному разработке сайтов для начинающих.
Браузер - это не просто программа, показывающая нам сайты. Эта программа помогает создавать сайты! На самом деле FireFox и даже IE 11 тоже имеют подобные возможности, но я возьму за пример самый популярный браузер - Хром.
Это так называемые инструменты разработчика - панель, которая есть у каждой вкладки в браузере. Чтобы ее увидеть, достаточно нажать кнопку F12 либо кликнуть в любом месте страницы правой кнопкой мыши и выбрать в меню пункт "Просмотреть код". По умолчанию эта панель занимает правую половину вкладки, но ее можно открепить в отдельное окно. И здесь просто бесчисленное количество функционала :)
У панели есть несколько вкладок, я вам расскажу про те, которыми обычно пользуюсь в работе. Итак, первая - Elements. Это набор элементов, из которых состоит вся страница. Если кликнуть на любой из них, можно увидеть справа все стили этого элемента: размер шрифта, цвет фона, ширину и высоту, и так далее. Я частенько пользуюсь этим, чтобы найти глубоко запрятанные картинки. Знаете, как бывает - видишь на странице фото, а сохранить его не можешь... и жмешь F12 :)
Следующая - Console. Консоль показывает очень многое: какие ресурсы потерялись и не загрузились на страницу, какие ошибки допущены в скриптах, что сообщают скрипты во время своей работы. Эту консоль очень полезно освоить веб-маркетологам - с её помощью можно проверить, корректно ли работают цели Яндекс.Метрики, и при этом все будет видно сразу при нажатии на кнопки, вам не придется идти в метрику и ждать результатов.
Network: здесь в режиме реального времени отображаются все запросы, которые отправляются со страницы на сервер. Штука очень полезная, если нужно узнать конкретный адрес, куда идут данные из заполненной формы на сайте, или же откуда они приходят. А еще я так скачивала музыку из VK, без плагинов и смс :)
Пропустим часть вкладок и перейдем сразу к последней - Audits. Здесь можно измерить скорость загрузки сайта с учетом многих параметров.
Вы можете проверить, как быстро ваш сайт грузится на обычных компьютерах и мобильных устройствах - телефонах и планшетах. Можно проверить, насколько он доступен людям с ограниченными возможностями. Можно проверить, использует ли страница современные технологии, оптимизирована ли она для поисковых роботов, можно симулировать мобильный интернет с его ограничениями по скорости и объему данных. В последних версиях Хрома все эти аудиты были объединены в цельную подпрограмму - Lighthouse, что значит "маяк" :)
И есть еще одна очень крутая штука, которая стоит чуть в стороне от перечисленных вкладок - эмуляторе мобильных устройств и размеров экранов. Вы можете прямо тут же на вкладке посмотреть, как сайт будет выглядеть на телефоне, планшете или экране шириной 2560 пикселей!
Хром предлагает множество устройств на выбор, я насчитала целых 33 штуки всяких телефонов, планшетов и лэптопов. Плюс возможность выбрать просто любую ширину и высоту экрана, и еще несколько стандартных размеров: 2560, 1440, 1024, 768, 425, 375 и 320 пикселей в ширину.
И один маленький совет - когда выберете нужный вид устройства, обновите страничку :) Страницы очень часто перестраиваются особым образом под телефоны, но делают это во время загрузки.
Эта статья хороша со всех сторон - кому-то она даст полезные знания, кто-то немного вздремнет и проснется отдохнувшим :)