Сегодня я хочу рассказать об уникальном инструменте для веб-разработчиков, встроенном в популярный браузер Google Chrome. Этот инструмент называется WebTools или веб-инспектор. Из-за простоты и удобства им могут пользоваться как люди, профессионально занимающиеся созданием сайтов, так и те, кто лишь немного знаком с языками HTML и CSS. Инструмент позволяет исправлять ошибки в коде сайта во время его создания, вносить изменения в готовые сайты: изменять расположение элементов, их дизайн и многое другое.
Рассмотрим инструмент WebTools подробнее.
Содержание
Как открыть окно веб-инспектора
Это можно сделать двумя способами:
- 1 способ: при активном окне браузера Google Chrome нажать клавишу F12.
- 2 способ: щелкнуть ПКМ на том элементе, код которого вы хотите посмотреть, и в контекстном меню выбрать Просмотреть код. В этом случае WebTools покажет именно эту часть кода.
Окно инструмента состоит из двух частей. По умолчанию, слева открывается вкладка Elements, в которой отображается HTML-код страницы, а справа – вкладка Styles. В ней расположен CSS-код выделенного элемента.
Сразу следует отметить, что окно WebTools можно располагать по-разному. Для этого щелкаем по значку рядом с кнопкой закрытия и выбираем нужный вариант:
- В нижней части окна браузера.
- С правой стороны. Это может быть удобно при использовании широкоформатного экрана.
- В отдельном окне. Этот вариант удобен, если вы используете два монитора, на одном мониторе можно экспериментировать с кодом, а на втором видеть результат.
Способы перемещения по коду
Возможны два таких способа.
- В первом мы просто перемещаем указатель мыши по коду в окне веб-инспектора и области, соответствующие этому коду, подсвечиваются на самой веб-странице. То есть мы по коду находим элемент.
- Второй способ обратный, когда по элементу находится код. В этом случае мы перемещаемся по странице, а выделяется область кода. Щелкнув на интересующем нас элементе, мы увидим его код в окне внизу.
Для переключения режимов перемещения используется самая левая кнопка.
Редактирование кода
Главное достоинство WebTools состоит в том, что все изменения в коде сразу видны на веб-странице в окне браузера, то есть этот инструмент превращает ваш браузер в визуальный редактор.
Чтобы редактировать код, нужно сделать двойной щелчок на соответствующем теге, атрибуте, CSS-селекторе или его значении. Элемент выделится и его можно редактировать.
Инструмент имеет много различных приятных мелочей, облегчающих работу. Например, выделив стиль элемента, можно определить, в какой строчке и какого CSS-файла он прописан. При работе с цветом появляется палитра, помогающая выбрать нужный цвет. При выделении URL-адреса изображения появляется его миниатюра и т. д.
Выделение столбиком
Интересная особенность инструмента состоит в том, что он позволяет выделять код не только строчками, но и столбиком. Для этого переходим на вкладку Sources, выбираем файл для редактирования, находим нужные строчки, нажимаем клавишу Alt и выделяем столбик с одинаковыми кусочками кода. Этим способом можно редактировать сразу несколько одинаковых элементов в разных строчках.
Тестирование адаптивной верстки
Еще одна полезная и актуальная функция инструмента WebTools – проверка отображения страницы на различных устройствах. Для ее активизации щелкните на кнопке с изображением телефона. Теперь можно выбирать разрешения экрана, поворачивать его, изменять масштаб. Само окно инспектора при этом не изменяется.
Кодирование изображения в Base64
В статье «Оптимизация сайта с помощью схемы data: URL» я писал о том, что для ускорения загрузки сайта небольшие изображения можно закодировать в формате data URL и вставлять такой код непосредственно в HTML-страницу. Так вот, наш уникальный инструмент позволяет выполнить такую кодировку. Как это сделать?
- Переходим на вкладку Network
- Нажимаем img
- Нажимаем клавишу F5
- Выбираем нужную картинку
- Щелкаем правой кнопкой по ней и выбираем Копировать data URL
- Переходим на вкладку Console и вставляем скопированное
- Появляется код, которым можно заменить нашу картинку
Секретная фишка
Используя это средство, можно изучать код не только своего сайта, но и любого другого, открытого в браузере. И, если вам понравился какой-либо элемент чужого сайта, но вы не знаете, как он сделан, можно просто скопировать соответствующий ему HTML-код, CSS-стиль, вставить в свои файлы и потом отредактировать. Конечно, для этого необходимы хотя бы минимальные знания этих языков.
Недостатки
Работая с рассмотренным средством редактирования кода, вы сразу заметите его недостаток – все изменения, вносимые в код, не сохраняются. После обновления страницы в браузере она примет первоначальный вид. Чтобы эти изменения сохранить, необходимо открыть соответствующие файлы в текстовом редакторе, отредактировать код и сохранить их. Хотелось бы, чтобы все корректировки, производимые в WebTools, сразу же сохранялись. Эта проблема решаема, и как это сделать, мы рассмотрим в следующем посте. Поэтому подписывайтесь на обновления блога, чтобы не пропустить новые материалы (форма для подписки справа).
А пока для наглядности предлагаю посмотреть видео:
Сегодня я познакомил вас с одним из инструментов, полезных для веб-разработки, но таких инструментов много, поэтому команда WebForMyself разработала новый курс «Инструменты Front-End разработчика». Если вы занимаетесь созданием сайтов, то вам этот курс будет наверняка интересен и полезен. Вот ссылка на курс
Инструменты Front-End разработчика
Надеюсь, и моя статья была вам полезна. Если так, не забудьте поделиться ей в cоцсетях.
Напишите в комментариях, используете ли вы инструмент WebTools, и, если пользуетесь, то какими приемами можете поделиться.
Очень удачно я нашел. Подробная статья о том какие инструменты используют веб-разработчики
Рекомендую к прочтению: https://use-web.ru/news.php?id=51&tid=3