Сегодня в Интернете миллионы веб-сайтов. И хотя они могут иметь разные цели, все они созданы с использованием одинаковых технологий и методов. Но когда вы создаете сайт, бывает сложно увидеть, что происходит под капотом.
Например, вы посещаете веб-сайт и находите на нем действительно интересную функцию, но не знаете, как реализовать эту функцию на своем собственном веб-сайте. Здесь в игру вступает Inspect Element.
Что такое Inspect Element?
В вашем браузере скрыт мощный инструмент под названием Inspect Element.
Щелкните правой кнопкой мыши любую веб-страницу, выберите «Проверить», и вы увидите структуру этого сайта: его исходный код, изображения, CSS, шрифты и значки, код Javascript и многое другое. Вы также можете получить доступ к этому инструменту, нажав Ctrl + Shift + I (для Mac, Cmd + Option + I).
Inspect Element - это простой инструмент, который позволяет пользователям взаимодействовать с кодом веб-сайта и бесценен для веб-разработчиков. Вот 5 причин, по которым вы можете делать с помощью Inspect Element.
1. Загрузка изображений и видео
Вы можете увидеть изображение или видео на веб-странице, вы можете легко загрузить их с помощью Inspect Element.
Пример:
Я хочу загрузить изображение обложки профиля в Твиттере. Но прямого способа загрузить изображения обложек из Twitter нет.
Щелкните правой кнопкой мыши изображение обложки, выберите для проверки этот элемент и разверните тег ‹div›. Здесь вы можете найти ссылку на изображение на сервере. Скопируйте и вставьте его в новую вкладку и загрузите изображение или видео.
Используя этот метод, вы можете скачать любое изображение или видео.
2. Выявление паролей, скрытых звездочками
Используя Inspect Element, вы можете обнаруживать пароли, скрытые звездочками в формах входа.
Пример:
В окне "Проверить элемент" найдите вкладку элемента. Ищите поле пароля.
Откройте тег ‹div› под типом ввода. Измените тип с пароля на текст, и вы увидите непокрытый пароль.
3. См. Скрытое содержание
Некоторые веб-страницы содержат скрытые элементы, например всплывающие окна. Эти всплывающие окна могут скрывать контент для зрителя. Элемент Inspect можно использовать, чтобы скрыть эти всплывающие окна и просмотреть содержимое за ними.
Пример:
Взять хотя бы сайт Екалива. В нем много отличного контента, но иногда он может быть немного навязчивым из-за всплывающих окон. Эти всплывающие окна скрывают некоторый контент на веб-сайте.
Если я хочу прочитать статью, нет смысла давать им свой адрес электронной почты для подписки. Вот как можно удалить эти всплывающие окна.
Перейдите на вкладку элемента в Inspect Element и щелкните значок курсора. Поместите курсор во всплывающее окно. Удалите этот конкретный тег ‹div›, и всплывающие окна исчезнут из вашего контента.
Иногда на этих веб-страницах есть прозрачный слой, который затрудняет чтение. Чтобы удалить этот слой, удалите тот же тег ‹div› для этого элемента. Теперь на вашей веб-странице не должно быть всплывающих окон, что сделает ее более удобной для чтения.
4. Измените заголовок и изображение на веб-страницах.
Используя Inspect Element, вы можете изменять заголовки и изображения, чтобы проверить и увидеть, что лучше всего выглядит на вашей веб-странице.
Пример:
Возьмите любую веб-страницу.
- Откройте Inspect Element.
- Перейдите на вкладку Консоль.
- Входить
document.body.contentEditable = true
Теперь вы можете редактировать любой элемент на своей веб-странице, включая заголовки и изображения, чтобы увидеть, что лучше всего подходит для вашего сайта.
Когда вы закончите редактирование,
- Открыть элемент проверки
- Перейдите на вкладку консоли
- На вкладке консоли введите
document.body.contenEditable = false
Это закрывает опцию редактирования на веб-странице, и никакие изменения не могут быть сделаны. Имейте в виду, что это не постоянное изменение. Он исчезнет, как только вы обновите страницу.
5. Массовое обновление
Иногда есть несколько элементов, которые вы хотите обновить на своей веб-странице с помощью Найти и заменить. Вот как это сделать.
- Открыть элемент проверки
- Перейдите к тегу тела и скопируйте идентификатор тела
- Перейдите на вкладку консоли и введите
document.getElementById (‘your_body_id’). innerHTML = document.getElementById (‘your_body_id’). innerHTML.replace (/ FIND / g, «REPLACE»);
Здесь все, что вы упомянули вместо «НАЙТИ», будет заменено тем, что вы ввели в «ЗАМЕНИТЬ». Не забудьте добавить к этим командам идентификатор тела из тега тела.
Заключение
Это лишь некоторые из множества вариантов использования Inspect Element. В этом удивительном инструменте есть еще кое-что, что делает его находкой для веб-разработчиков во всем мире. Следите за новыми советами и советами!
