Работа с вкладкой «Elements» в панели разработчика браузера
Веб-браузер — это не только средство взаимодействия пользователя с веб-сайтом, но еще и мощный инструмент для администраторов. Одна из наиболее полезных составляющих браузера — панель разработчика. С ее помощь можно, например, узнать причину той или иной ошибки.
А это, в свою очередь, поможет эффективнее справляться с багами или предоставлять полную информацию службе поддержки, которая займется решением проблемы.
Разработчик, не умеющий пользоваться панелью разработчика, не представляет ценности как специалист. Если он хочет изменить это, ему лучше прекратить создавать ресурсы один за одним, а потратить время на то, чтобы освоить столь незаменимый инструмент.
Забавно, что есть администраторы сайтов, которые понятия не имеют о существовании такого инструмента, но при этом, те, кто им владеют, утверждают, что это чуть ли не самый главный помощник в их повседневной работе. Конечно, лучше относится к последним.
Панель разработчика есть в браузерах Mozilla Firefox, Google Chrome, Internet Explorer, Safari и Opera, но в этом материале речь пойдет об основных возможностях инструмента на примере Google Chrome. Тем не менее внешний вид и функциональность панелей в разных программах отличаются несущественно.
Панель разработчика — это стандарт для любого современного браузера. Программисты всегда проверяют, как отображаются их проекты в разных программах, и им удобнее в них же сразу смотреть, где возникла ошибка, поэтому панель разработчика не составит труда найти на любом ПК.
Все эти панели выдают достаточно информации, чтобы справиться с любой проблемой, которая может возникнуть на сайте.
Открывается панель разработчиков клавишей F12 (в других браузерах иначе).
На первом окне сразу много информации, но в ней легко разбираться, если знать, что и где находится.
Нужно двигаться, не перескакивая, и разбирать элементы один за одним.
По умолчанию запускается вкладка «Elements», в которой содержится HTML-код открытой в браузере страницы, а также используемые файлы CSS и JavaScript. Их содержимое можно посмотреть, просто кликнув на название файла.
В отдельной колонке выводятся CSS-стили. По умолчанию это стили всей страницы, но если выделить отдельный блок или элемент, то в колонке будут описываться стиль и правила именно этого элемента.
Над определенными блоками может быть написано «Inherited from». Это значит, что свойства определенного элемента были унаследованы от какого-то родительского элемента. В этом случае можно или перезаписать их здесь или нажать на указанный блок и отредактировать его правила. Но здесь нужно помнить, что изменение родительского блока может добавить изменения к другим дочерним.
Вкладку «Elements» также можно использовать, чтобы редактировать HTML. Нужно лишь кликнуть на любом элементе и выбрать «Edit as HTML». Все внесенные изменения будут видны сразу. То же актуально и для CSS. В отдельной колонке можно отредактировать конкретное правило, удалить его полностью или добавить новое. Изменения также будут отображаться в реальном времени.
Также стоит отметить, что изменения сбросятся после перезагрузки страницы. Поэтому использовать панель нужно лишь для мелких изменений и не переделывать весь сайт в один заход.
Тем не менее все это никак не отразится на самом сайте и том, как его видят другие пользователи. Изменения отображаются только в браузере. Чтобы применить их к сайту, нужно отредактировать соответствующие файлы на сервере.
Но если файл HTML один, то стили чаще всего включают правила из нескольких файлов. Тем не менее найти их не так сложно. Рядом с каждым блоком в колонке со стилями указан не только файл, но даже строка с этим правилом. Так можно быстро найти нужное место в файле на сервере и внести изменения.
Если каталог всего сайта сильно загружен, то в панели разработчика есть еще один полезный инструмент. Необходимо нажать на адрес стиля, и откроется вкладка «Sources». На этой вкладке с левой стороны в формате древовидной структуры будут отображаться все файлы сайта. По умолчанию откроется тот файл, который содержит в себе информацию выбранного правила. Останется только найти нужную строку. Но важно заметить, что это все еще не файл с сервера. Этот инструмент всего лишь упрощает процесс его поиска в общей коллекции.
Вкладку «Elements» нужно освоить в первую очередь, потому что она значительно упростит процесс внесения мелких изменений во внешний вид сайта.
Эта вкладка — идеальная площадка для экспериментов, потому что она не только отображает все результаты в реальном времени, но и сразу же демонстрирует, как будет выглядеть сайт в конкретном браузере.