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

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

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

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

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

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

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

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

Вкладка Network

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

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

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

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

• Поиск нужного шаблона
• Работа со стилями
• Как подобрать цвет

UPD: обновлено 10.07.2021