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

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

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

Как использовать Google Chrome для отладки CSS - Инструкции

Откройте элемент проверки в Google Chrome.

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

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

Как использовать Google Chrome для отладки CSS - Инструкции

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

Как использовать Google Chrome для отладки CSS - Инструкции

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

В том же окне Inspect Element на вкладке Elements Есть место для отображения как HTML, так и CSS кода. Вы можете увидеть код HTML слева от окна проверки элементов. В то время как вы можете найти код CSS слева, на вкладке «Стили».

Как использовать Google Chrome для отладки CSS - Инструкции

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

.card-padding {
 padding-right: 0vh;
 padding-left: 0vh;
}

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

Как использовать Google Chrome для отладки CSS - Инструкции

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

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

Как использовать Google Chrome для отладки CSS - Инструкции

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

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

  • с помощью этот сайт Щелкните правой кнопкой мыши по первому адресу.
  • В этом конкретном адресе h4 вы увидите примененный к нему класс, называемый «текст-серый» с цветом # 8a8a8a.

Как использовать Google Chrome для отладки CSS - Инструкции

  • Вместо этого измените цвет на другой цвет, например оранжевый. Просто измените само значение, а не имя свойства «цвет».

Как использовать Google Chrome для отладки CSS - Инструкции

  • Вы заметите, что заголовок изменился с темно-серого на оранжевый.

Как использовать Google Chrome для отладки CSS - Инструкции

  • Если вы хотите отключить определенный стиль CSS, снимите флажок слева от стиля.

Как использовать Google Chrome для отладки CSS - Инструкции

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

Как использовать Google Chrome для отладки CSS - Инструкции

  • Если вы предварительно просматриваете локальный веб-сайт, вы можете продолжать вносить изменения в CSS, пока не приблизитесь к желаемому внешнему виду вашего пользовательского интерфейса. Затем вы можете скопировать свои изменения CSS обратно в фактический локальный код.

Проверять Веселые игры, которые помогут вам легко изучить программирование на CSS.

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

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

  • с помощью этот сайт , щелкните правой кнопкой мыши одну из кнопок Bootstrap на странице.

Как использовать Google Chrome для отладки CSS - Инструкции

  • Вы увидите две категории, примененные к кнопке: «btn» и «btn-basic». Bootstrap уже имеет собственный стиль, применяемый к обоим классам. Цвета, которые используются в качестве цветов фона и границ, #007bff. Измените его на что-то другое, например, на фиолетовый.

Как использовать Google Chrome для отладки CSS - Инструкции

  • Если вы предварительно просматриваете локальный веб-сайт, вы можете добавить новые изменения обратно в свой локальный код. В зависимости от вашего порядка CSS вам может понадобиться использовать более конкретный селектор CSS. Например, начните разделитель с «.btn». Это заменит исходный дизайн Bootstrap.
.btn.btn-primary {
 background-color: violet;
 border-color: violet;
}

Что означает element.style в таблице стилей?

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

  • Щелкните правой кнопкой мыши элемент HTML. Добавьте любой стиль в раздел element.style, например:
color: whitesmoke;
  • Вы заметите, что код элемента HTML также изменился. Код в элементе HTML теперь содержит новую строку:
style=”color: whitesmoke;”

Как использовать Google Chrome для отладки CSS - Инструкции

Как наследовать дочерние HTML-элементы дизайна

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

  • с помощью Веб-сайт , щелкните правой кнопкой мыши в любом месте на внешних краях веб-сайта.
  • В разделе HTML окна «Проверить элемент» сосредоточьтесь на двух конкретных элементах HTML. Есть элемент DIV Оригинал с примененной к нему категорией «Контент». Этот элемент HTML содержит дочерний элемент h4 , с примененным к нему классом text-gray.

Как использовать Google Chrome для отладки CSS - Инструкции

  • Выберите элемент HTML h4 подпапку и отключите цветовой стиль в классе «text-grey».

Как использовать Google Chrome для отладки CSS - Инструкции

  • Выберите исходный HTML-элемент с классом Content. Добавьте следующий стиль CSS в свой класс:
color: red;

Как использовать Google Chrome для отладки CSS - Инструкции

Весь текст внутри изменит цвет DIV Происхождение красное. Это изменение также коснется дочерних элементов, что означает, что h4 Он также будет иметь красный цвет.

  • Выберите дочерний элемент HTML h4 и добавьте новый стиль в класс text-grey:
color: green;

Как использовать Google Chrome для отладки CSS - Инструкции

Это переопределит дизайн любых исходных классов. HTML-элемент H4 изменит свой цвет с красного на зеленый.

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

Как использовать Google Chrome для отладки CSS - Инструкции

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

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

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

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

Другие полезные инструменты проверки

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

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

Есть много других интересных вещей, которые вы можете сделать с окном Inspect Item. Теперь вы можете просмотреть Как использовать Chrome DevTools для устранения проблем с веб-сайтом.

Источник
Перейти к верхней кнопке