Как правильно проверить веб-сайт

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

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

В этом посте мы обсудим, почему вы можете захотеть проверить веб-сайт. Затем мы познакомим вас с некоторыми из лучших инструментов, которые вы можете использовать, прежде чем объяснять, что искать. Давайте прыгать!

Почему вы должны проверить веб-сайт

Есть несколько причин, по которым вы можете захотеть проверить веб-сайт. Например, вам может потребоваться устранить проблему или найти определенную информацию.

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

Проверка веб-элементов также полезна для веб-дизайнеров. Если вы хотите быстро протестировать изменение цвета или новый шрифт, вы можете сделать это, не копаясь в коде CSS.

Кроме того, специалисты по цифровому маркетингу могут использовать инструмент «Проверить элемент», чтобы увидеть, как определенные изменения повлияют на общий внешний вид веб-страницы. Например, вы можете попробовать новую кнопку призыва к действию (CTA) или другую цветовую схему. Вы можете использовать инструменты для репликации обновлений, не внося никаких изменений в ваш действующий сайт.

Наконец, изучение веб-сайта может быть отличным способом узнать, как он устроен и функционирует. Если вы хотите узнать больше о веб-разработке, проверка сайтов — отличный способ начать работу.

Лучшие инструменты и расширения для проверки веб-сайта

Существует ряд различных инструментов и расширений, которые можно использовать для проверки веб-сайта. Вот некоторые из самых популярных вариантов!

Проверить элемент

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

Хотя он доступен как расширение Google Chrome, инструмент Inspect Element также поставляется со всеми основными браузерами. Эта функция является частью Chrome Developer Tools, набора программ, которые позволяют вам проверять и редактировать код HTML и CSS веб-страницы.

Чтобы получить доступ к инструментам разработчика Google Chrome, просто нажмите Ctrl+Shift+I (или Cmd+Opt+I на Mac). Вы также можете получить доступ к инструментам, открыв меню Chrome и выбрав Дополнительные инструменты > Инструменты разработчика :

Вы можете получить доступ к тем же инструментам разработчика в других браузерах. Например, инструменты разработчика Firefox имеют аналогичные функции. Чтобы получить доступ к инструментам, просто нажмите Ctrl+Shift+I (или Cmd+Opt+I на Mac). Вы также можете найти инструменты, открыв меню Firefox и выбрав «Веб-разработчик» > «Инспектор».

Кроме того, инструменты разработчика Safari позволяют проверять и редактировать код HTML и CSS веб-страницы на устройствах Mac. Просто нажмите Cmd+Opt+I . Вы также можете открыть меню Safari и выбрать «Настройки » > «Дополнительно» > «Показать меню разработки» в строке меню .

BrowserStack

Еще одна платформа, которую вы можете использовать для тестирования веб-сайтов, — BrowserStack:

Эта облачная платформа для тестирования работает со всеми основными браузерами и устройствами. После подписки на бесплатную пробную версию вы можете перейти к панели инструментов Live и выбрать свою ОС.

Затем вы можете выбрать предпочтительную версию браузера, чтобы запустить сеанс Live в своем браузере. Наконец, вы можете перемещаться по веб-сайту, который хотите проверить, так же, как через Inspect Element.

Как проверить веб-сайт

Давайте посмотрим, как вы можете проверить веб-сайт с помощью инструмента Inspect Element. Начните с простого щелчка правой кнопкой мыши на любом элементе веб-страницы и выбора «Проверить» в контекстном меню:

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

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

Конечно, любые изменения, которые вы делаете с помощью Inspect Element, носят временный характер. Они не будут сохранены при обновлении страницы или закрытии браузера. Тем не менее, это отличный способ проверить, как будут выглядеть конкретные изменения, не изменяя ваш веб-сайт навсегда.

Вы также можете получить доступ к инструменту, нажав Ctrl+Shift+I (или Cmd+Opt+I на Mac), чтобы открыть инструменты разработчика . Затем перейдите на вкладку «Элементы» в верхней части окна:

Наконец, вы также можете получить доступ к Inspect Element, открыв меню Chrome и выбрав Дополнительные инструменты > Инструменты разработчика , которые мы обсуждали ранее.

Как изменить элемент

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

Когда вы открываете окно «Элементы» , вы можете использовать значок курсора «Проверить» в верхнем левом углу панели, чтобы выделить исходный код элемента, который вы хотите изменить. Щелкнув правой кнопкой мыши по выделенному коду, выберите «Редактировать как HTML» :

Поле расширится, после чего вы сможете изменить текст. Чтобы просмотреть изменения, вы можете отменить выбор элемента. Вы также можете дважды щелкнуть текст, чтобы отредактировать его.

Вы также можете использовать эту технику, чтобы изменить код CSS для элемента. Для этого щелкните по нему правой кнопкой мыши и выберите «Проверить» . На панели элементов найдите элемент, который вы хотите изменить, и выберите свойство element.style . Затем вы можете добавить свой код или объявления в фигурных скобках.

Как скрыть или удалить элемент

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

Отсюда щелкните правой кнопкой мыши элемент, затем выберите параметр «Удалить элемент» или «Скрыть элемент» :

Кнопка «Удалить» удаляет элемент объектной модели документа (DOM). Кнопка Hide просто скроет элемент, но он останется в DOM.

Как проверять классы CSS

Существует несколько способов проверки классов CSS. Однако самый простой способ — щелкнуть правой кнопкой мыши элемент, который вы хотите просмотреть, и выбрать «Проверить» . Затем откройте вкладку «Стили» , чтобы увидеть стили CSS:

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

Если вы хотите увидеть все стили CSS, которые применяются к элементу, вы можете использовать вкладку «Вычисляемые» . Он показывает вам все стили CSS, которые применяются к элементу, в том числе из таблицы стилей:

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

На что обращать внимание при проверке веб-сайта

Какой бы метод вы ни использовали для доступа к Inspect Element, вы увидите один и тот же интерфейс. Он состоит из двух панелей: панели HTML и панели CSS.

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

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

Если вы ищете что-то конкретное на веб-сайте, будь то определенный фрагмент текста или изображение, вы можете использовать Inspect Element, чтобы найти его. Он имеет поле поиска, где вы можете искать определенный элемент.

При проверке веб-сайта необходимо помнить о нескольких вещах:

• HTML: код, определяющий структуру веб-страницы. Обратите внимание на то, как организованы элементы и как они взаимодействуют друг с другом.
• CSS: код, определяющий стиль веб-страницы.
• JavaScript : код, определяющий поведение веб-страницы. Это влияет на то, как взаимодействуют элементы и как страница реагирует на пользовательский ввод.
• Дизайн : общий внешний вид веб-сайта. Это влияет на то, насколько удобен макет и насколько хорошо он соответствует цели веб-сайта.
• Контент: текст веб-сайта, изображения и другие медиафайлы.

То, на что вы должны обращать внимание при проверке веб-сайта, будет зависеть в основном от того, являетесь ли вы дизайнером, разработчиком или специалистом по цифровому маркетингу. Как мы обсуждали ранее, инструмент Inspect Element может помочь вам во всем, от тестирования дизайна до устранения неполадок.

Заключение

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

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

Вам нужна помощь в управлении или оптимизации вашего сайта? Узнайте, как WP Engine может помочь во всем, от хостинга WordPress до управления сайтом и клиентами!