Вы когда-нибудь хотели временно изменить веб-страницу, чтобы посмотреть, как она будет выглядеть с определенными цветами, шрифтами и стилем? Это возможно с помощью инструмента, который уже существует в вашем браузере под названием " Осмотрите элемент ». Это мечта для всех пользователей, которые любят манипулировать CSS.
В этом руководстве мы расскажем вам об основах проверки элементов и о том, как использовать ее на своем сайте WordPress.
Что такое инструмент проверки предметов?
Современные браузеры, такие как Google Chrome и Mozilla Firefox, имеют встроенные инструменты, которые позволяют веб-разработчикам отлаживать ошибки. Эти инструменты отображают HTML, CSS и JavaScript для страницы и показывают, как работает код.
Использование инструмента » инспектировать элемент Вы можете отредактировать код HTML, CSS или JavaScript для любой веб-страницы и увидеть свои изменения в режиме реального времени (только на вашем компьютере).
Для владельца Веб-сайт, эти инструменты могут помочь вам просмотреть, как будет выглядеть определенный стиль, фактически не применяя изменения для всех.
Для писателей эти инструменты великолепны, потому что вы можете легко изменить личную идентификационную информацию, делая снимки экрана, устраняя необходимость фактически размывать элементы.
Для агентов службы поддержки это отличный способ определить ошибку, из-за которой ваши галереи не загружаются или не работают должным образом.
Мы лишь поверхностно относимся к вариантам использования, потому что инструмент " Осмотрите элемент Это действительно мощный.
В этой статье мы остановимся на инструменте " Осмотрите элемент Из Google Chrome, потому что это наш любимый браузер. Firefox имеет собственные инструменты разработки, которые также можно вызвать, выбрав меню " осмотреть элемент .
Запуск инструмента «Осмотреть элемент» и локализация кода.
Вы можете запустить этот инструмент, нажав CTRL + Shift + I на клавиатуре. Кроме того, вы можете щелкнуть в любом месте веб-страницы и затем выбрать пункт меню «Проверить».
Окно вашего браузера разделится на две части, а в нижнем окне будет показан исходный код веб-страницы.
Окно инструмента разработчика разделено на два окна. Слева вы увидите HTML-код страницы. На правой панели вы увидите правила CSS.
При наведении указателя мыши на источник кода HTML вы увидите выделенную область, выделенную на веб-странице. Вы также заметите правила CSS для данного элемента.
Вы также можете навести указатель мыши на элемент на веб-странице, щелкнуть правой кнопкой мыши и выбрать « осмотреть элемент ". Выбранный вами элемент будет выделен в исходном коде.
Разработчик кода и отладчик разработчика
HTML и CSS в окне проверки элемента доступны для редактирования. Вы можете дважды щелкнуть по исходному коду HTML и редактировать код по своему усмотрению.
Вы также можете дважды щелкнуть и отредактировать атрибуты стилей на панели CSS. Чтобы добавить правило, щелкните значок «плюс» на панели стилей в верхней части.
Когда вы вносите изменения в код CSS или HTML, эти изменения мгновенно отражаются в вашем браузере.
Обратите внимание, что не все изменения, сделанные здесь, сохраняются в любом месте. Инструмент Осмотрите элемент Это инструмент отладки, и он не сохраняет ваши изменения в файл на вашем сервере. Это означает, что если вы обновите страницу, все ваши изменения будут потеряны.
Чтобы действительно внести изменения, вам нужно изменить стиль вашего WordPress тема или шаблон для добавления изменений, которые вы хотите сохранить.
Прежде чем вы начнете редактировать свой WordPress тема существующих с помощью инструмента " Осмотрите элемент Обязательно сохраните все свои изменения, создав дочернюю тему.
Как найти ошибки на WordPress
Инструмент Осмотрите элемент Имеет область под названием " Консоли Который показывает все ошибки, которые существуют на вашем сайте. Прежде чем пытаться отладить ошибку или обратиться за помощью к авторам темы или плагина, всегда стоит поискать здесь, чтобы увидеть, что не так.
Например, если вы были клиентом OptinMonster Кто задается вопросом, почему его optin не загружается, тогда вы можете легко найти проблему, которая указывает, что пробковые вашей страница не соответствует .
Если ваша панель общего доступа не работала должным образом, вы можете увидеть, что это вызвано ошибкой JavaScript.
Это все для этого урока, я надеюсь, вы сможете лучше настроить свой WordPress блог. Не стесняйтесь поделиться этим уроком с друзьями.
