Как использовать Google Chrome для отладки CSS

Инструмент Inspect Element отлично подходит для отладки ваших веб-страниц в режиме реального времени. Вы можете использовать этот инструмент для предварительного просмотра и изменения дизайна веб-сайта. Это также позволяет вам делать это без перезагрузки страницы, немедленно отображая ваши изменения CSS.

В этой статье рассказывается, как просматривать классы CSS и применяемые к ним стили в окне «Проверить элемент». Также будет рассказано, как вы можете использовать это для предварительного просмотра изменений, которые вы вносите в свой CSS, в режиме реального времени.

Открытие Inspect Element в Google Chrome

Вы можете посетить любой веб-сайт и открыть окно «Проверить элемент», чтобы увидеть, как выглядит его код HTML или CSS. Этот учебник будет использовать пример веб-сайта показывать.

Вы можете открыть окно Inspect Element в Google Chrome, нажав кнопку F12 ключ. Вы также можете щелкнуть правой кнопкой мыши в любом месте страницы и выбрать Осмотреть.

Откроется окно «Проверить элемент» с HTML-кодом той части веб-сайта, где вы щелкнули правой кнопкой мыши. Здесь вы также можете

редактировать текст сайта с помощью Google Chrome.

Вкладка «Стили» в окне проверки элемента

В самом окне Inspect Element, под Элементы на вкладке есть место для просмотра кода HTML и CSS. Вы можете увидеть HTML-код в левой части окна Inspect Element. Вы можете найти код CSS справа, под Стили вкладка

Допустим, у вас есть HTML-элемент с классом "card-padding", к которому применены отступы справа и слева:

.card-padding {
 заполнение справа: 0vh;
 заполнение слева: 0vh;
}

Если вы просматривали этот веб-сайт в браузере, вы могли бы выбрать див элемент с классом "card-padding". Любой стиль, примененный к классу "card-padding", будет показан справа под Стили вкладка

Когда вы наводите курсор на элемент в представлении HTML-кода, эта часть веб-страницы будет выделена в веб-браузере. Тип элемента HTML вместе с любыми именами классов также будет отображаться в диалоговом окне рядом с элементом.

В этом случае вы увидите контейнер div с именами классов «row», «card-padding» и «pb-5», выделенными на странице.

Как вносить изменения в CSS в режиме реального времени

Вы можете изменить CSS прямо на вкладке «Стили»:

1. С использованием этот сайт, щелкните правой кнопкой мыши первый заголовок.
2. В этом конкретном заголовке h4 вы увидите примененный к нему класс, который называется «text-grey» и имеет цвет #8a8a8a.
3. Вместо этого измените цвет на что-нибудь другое, например на оранжевый. Вы хотите изменить только само значение, а не имя свойства "цвет".
4. Вы увидите, как заголовок изменится с темно-серого на оранжевый.
5. Если вы хотите отключить определенный стиль CSS, снимите флажок слева от стиля.
6. Вы также можете добавить дополнительные стили в исходный набор. Нажмите чуть ниже или справа от свойства, чтобы начать добавлять новое. Вы должны использовать тот же синтаксис, что и в обычном файле CSS, при добавлении новых стилей.
7. Если вы предварительно просматриваете локальный веб-сайт, вы можете продолжать вносить изменения CSS, пока не приблизитесь к требуемому внешнему виду вашего пользовательского интерфейса. После этого вы можете скопировать внесенные вами изменения CSS обратно в свой локальный код.

Как изменить CSS из сторонних библиотек или фреймворков

Вы также можете вносить изменения в элементы HTML, если используете сторонние библиотеки или фреймворки, такие как Bootstrap.

1. С использованием этот сайт, щелкните правой кнопкой мыши одну из кнопок Bootstrap на странице.
2. Вы увидите, что к кнопке применены два класса: «btn» и «btn-primary». В Bootstrap уже есть собственные стили, применяемые к обоим этим классам. В качестве цветов фона и границ используются цвета #007bff. Измените это на что-то другое, например Violet.
3. Если вы предварительно просматриваете локальный веб-сайт, вы можете добавить свои новые изменения обратно в свой локальный код. В зависимости от порядка вашего CSS вам может понадобиться используйте более конкретный селектор CSS. Например, добавьте к селектору префикс «.btn». Это переопределит исходный стиль Bootstrap.

   .btn.btn-основной {
    цвет фона: фиолетовый;
    цвет границы: фиолетовый;
   }

Что означает element.style на вкладке «Стили»?

Каждый HTML-элемент, который вы выделяете в окне Inspect Element, имеет блок element.styles. Это эквивалентно добавлению встроенных стилей к HTML-элементу вместо выбора его с помощью селектора.

1. Щелкните правой кнопкой мыши элемент HTML. Добавьте любой стиль в раздел element.style, например:

   цвет: бело-дымчатый;

2. Вы увидите, что код HTML-элемента также изменился. Код внутри элемента HTML теперь имеет новую строку:

   стиль="цвет: бело-дымчатый;"

Как дочерние элементы HTML наследуют стили

Если у вас есть два разных значения стиля, примененных к родительскому элементу и дочернему элементу, значение в дочернем элементе будет иметь приоритет.

1. С использованием этот сайт, щелкните правой кнопкой мыши в любом месте на внешних краях веб-сайта.
2. В разделе HTML окна «Проверить элемент» сосредоточьтесь на двух конкретных элементах HTML. Существует родительский элемент div с примененным к нему классом «контент». Этот HTML-элемент имеет дочерний элемент h4 с примененным к нему классом text-grey.
3. Выберите дочерний HTML-элемент h4 и отключите стилизацию цвета в классе text-grey.
4. Выберите родительский HTML-элемент с классом «content». Добавьте в класс следующий стиль CSS:

   красный цвет;

   Весь текст в родительском div станет красным. Это изменение также коснется дочерних элементов, то есть h4 также будет красного цвета.
5. Выберите дочерний HTML-элемент h4 и добавьте новый стиль в класс text-grey:

   цвет: зеленый;

   Это переопределит стиль любых родительских классов. HTML-элемент h4 изменит свой цвет с красного на зеленый.
6. Вы также увидите зачеркивание, если просматриваете стиль для класса «контент». Это подтверждает, что дочерний элемент h4 переопределяет цвет родителя.

Преимущества отладки вашего CSS в браузере

Отладка CSS в вашем браузере может сэкономить много времени и ускорить рабочий процесс кодирования. Это особенно верно, если вам нужно увидеть, как ваши новые изменения CSS влияют на пользовательский интерфейс вашего веб-сайта в режиме реального времени.

Вы можете использовать этот метод вместо того, чтобы вносить изменения в свой локальный код и перезагружать приложение. Это избавит вас от необходимости гадать, какие значения CSS будут работать, поскольку теперь вы можете просматривать изменения пользовательского интерфейса по мере их внесения.

Вы можете вносить изменения в окно Inspect Element, пока не приблизитесь к желаемому дизайну. После этого вы можете скопировать код из окна Inspect Element обратно в свой локальный код. Вы по-прежнему можете повторно запустить приложение, чтобы проверить, работают ли ваши новые изменения CSS.

В этом руководстве были рассмотрены основы отладки CSS веб-сайта с помощью окна «Проверить элемент», в том числе где найти CSS на вкладке «Стили».

Также было рассказано, как вносить изменения в CSS и просматривать визуальные изменения пользовательского интерфейса в режиме реального времени. Надеюсь, вы также понимаете, как вносить изменения, когда CSS использует стороннюю библиотеку, и как работает наследование стилей.

Есть много других интересных вещей, которые вы можете сделать с окном Inspect Element.

7 забавных вещей, которые вы можете делать с Inspect Element

Читать далее

Об авторе