Как работать с инспектором кода

Любой современный веб-разработчик должен знать о существовании инструмента, который на порядок упрощает его работу!

Речь, конечно же, идет о встроенном в браузер инспекторе кода.

Разберем на примере работы в браузере Хром.

Открываем сайт на нужной странице, и в нужном месте дизайна правой кнопкой мыши вызываем меню и выбираем пункт "Просмотреть код":

Работа с шаблонами 

Слева или внизу откроется панель, где будет выделен ваш исследуемый элемент:

Работа с шаблонами

а рядом с ним будет окошко для работы со стилями (CSS):

двойным кликом по значению можно вызвать его изменение, которое сразу-же применится онлайн.

Вкладка Network

А во вкладке Network можно посмотреть все подключаемые файлы css и js.

Если там пусто, то перезагрузить еще раз страницу.

  • Если навести на любой файл, то вы увидите полный путь, где он лежит на сайте!

Примеры использования инспектора кода:

UPD: описание обновлено 10.07.2021

Как работать с инспектором кода

Еще нет своего сайта? Создайте интернет-магазин на платформе 5CMS - Все для продаж уже внутри!

Рекомендуем прочитать