Posted:
Июн 21, 2023
Comments:
0 Comments

Как открыть код элементов в браузере: Как открыть исходный код страницы в разных браузерах или с телефона?

Содержание

Как посмотреть код страницы в Гугл Хром: горячие клавиши, другие варианты

Посмотреть код страницы в Гугл Хром часто необходимо при разработке, верстании или программировании сайтов и веб-приложений. Нужно это для того, чтобы увидеть структуру страницы, используемые на ней java-скрипты, ссылки на мультимедийный контент и другие элементы. Можно использовать сразу комбинацию или один конкретный способ открыть исходник страницы: главное или контекстное меню, горячие клавиши, специальную ссылку.

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

Содержание статьи:

  • 1 Что такое HTML-код
  • 2 Что нам «дает» возможность открыть код
  • 3 «Просмотреть код» и «Просмотр кода страницы»: в чем разница
  • 4 Все способы открыть код
    • 4. 1 Горячие клавиши
    • 4.2 Контекстное меню на странице
    • 4.3 Инструменты разработчика
    • 4.4 Ссылка view-source
  • 5 Смотрим отдельный элемент HTML
  • 6 Как открыть код сайта на мобильном телефоне
  • 7 Редактирование и сохранение
  • 8 Если ничего не выходит: возможные причины и решения
    • 8.1 Поврежденный профиль
    • 8.2 Вирусы и вредоносные программы
    • 8.3 Сброс групповых политик

Что такое HTML-код

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

  • <head>информация</head> – сообщают браузеру, что это метаданные, они невидимы для пользователя (не выводятся на дисплей), но считываются поисковиками;
  • <meta> – содержат ключевые слова, запросы, которые приведут пользователя на страницу;
  • <h2>название</h2> – <h6><h6> – это заголовок соответствующего уровня;
  • <p>текст</p> – абзац.

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

Код страницы – это совокупность гипертекстовой разметки (HTML), стилей (CSS), скриптов, задействованных на странице, ссылки на используемые на ней файлы.

Что нам «дает» возможность открыть код

Функция просмотра исходного кода предоставляет ряд возможностей как разработчику, так и рядовому юзеру:

  • Скопировать текст со страницы, где нет контекстного меню – не работает правая клавиша.
  • Сохранить на свой компьютер изображение, защищенное от копирования.
  • Найти прямую ссылку на встроенный видеоролик.
  • Увидеть метаданные сайтов конкурентов.
  • Узнать информацию о счетчиках, сборщиках статистики, скриптах, плагинах.
  • Увидеть параметры форматирования контента (применяемые шрифты, цвета, отступы).
  • Изучить исходящие ссылки, URL на вложения.
  • Отыскать проблемы в коде для исправления ошибок или его оптимизации.
  • Экспериментировать с разметкой в процессе освоения HTML, разработки сайтов.

«Просмотреть код» и «Просмотр кода страницы»: в чем разница

Браузер Google Chrome предлагает два варианта отображения структуры сайта:

    • «Просмотр кода страницы» – исходник откроется в соседней вкладке, информация займет все рабочее пространство окна (только для чтения).
    • «Просмотреть код» – откроется в текущем окне, разделенном надвое по вертикали. Слева – содержимое сайта, справа – его структура во вкладке «Elements» инструментов разработчика (DevTools). Поддерживает редактирование исходника, изменения визуализируются в реальном времени, что дает сразу же видеть результат работы.

Если во втором случае команду вызвать, кликнув правой клавишей по какому-либо элементу или выделенному фрагменту (тексту, картинке, таблице), на нем будет акцентировано внимание. А также пользователь сможет тут же видеть код элемента, на котором находится курсор.

Все способы открыть код

Методов вывести на экран код страницы, которым его видит браузер, множество.

Горячие клавиши

В Google Chrome часто используемые функции закреплены за комбинациями клавиш:

  • За визуализацию исходника в новой вкладке (аналог команды «Просмотреть код») отвечает «Ctrl + U»;
  • За отображение во фрейме инструментов разработчика отвечает кнопка F12 и горячие клавиши «Ctrl + Shift + I».

Контекстное меню на странице

Кликните правой клавишей по пустой области, выберите соответствующую команду из выпавшего меню. Если кликнуть по функциональному объекту (графика, кнопка, ссылка, видео), сможете увидеть HTML-код выбранного элемента, примененные к нему стили.

Инструменты разработчика

Вызывается клавишей F12, комбинацией Ctrl + Shift + I либо через главное меню. В последнем случае:

  1. Кликните по иконке с тремя точками.
  2. Подведите курсор к пункту «Дополнительные инструменты».
  3. Щелкните по последнему элементу выпавшего списка.

Средство примечательно тем, что во вкладке «Sources» приведен перечень прикрепленных файлов: мультимедиа, Java-скрипты, шрифты, каскадные таблицы стилей. Сгруппированы они по источнику – адресам серверов, где хранятся.

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

Ссылка view-source

Если заметили, при открытии исходника в адресной строке перед ссылкой появляется «view-source:» – просмотреть исходный код. Перед адресом добавьте «view-source:» с двоеточием, но без кавычек. Неважно, есть перед URL www или http (https).

Смотрим отдельный элемент HTML

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

Как открыть код сайта на мобильном телефоне

В Google не предполагают, что кто-то собирается заниматься веб-разработкой на мобильных платформах, поэтому версия браузера для гаджетов подобным функционалом не оснащается. Выходов два:

  • Добавить «view-source:» в адресной строке перед ссылкой без кавычек.
  • Воспользоваться приложением вроде «VT View Source», «View Web Source», «HTML Source Code Viewer».

Редактирование и сохранение

Правки в HTML-структуру можно вносить в случае ее просмотра через инструменты разработчика. Они тут же визуализируются в левой части. Изменения актуальны только для текущей сессии (до закрытия или обновления вкладки, перехода на иной сайт) и на сам сайт никак не влияют. Сохранить их можно только для просмотра офлайн:

  1. Через правый клик мыши выберите команду «Сохранить как».
  2. Укажите каталог для файла и жмите «Enter».

Если ничего не выходит: возможные причины и решения

Иногда этот пункт неактивен, в коде нет ничего либо появляется ошибка. Факторами, вызывающими проблемы, могут быть:

  • Повреждение файлов профиля.
  • Блокировка одним из расширений для браузера. Попробуйте отключать поочередно и проверять работу инструмента просмотра кода.
  • Работа вредоносного ПО.

https://youtu.be/dl-E5r6rgss

Поврежденный профиль

Удалите файлы старого профиля (если он синхронизирован с Google, то настройки, история посещений, пароли не исчезнут):

  1. Через «Проводник» (Win + E) откройте каталог %LOCALAPPDATA%\Google\Chrome\User Data\.
  2. Переименуйте папку Default или заархивируйте, затем удалите ее.
  3. Запустите браузер.

Вирусы и вредоносные программы

Откройте свой антивирус и запустите полное подробное сканирование системы. При обнаружении пораженных файлов их нужно вылечить или удалить. Если антивирусной программы не используете, то произвести подобную процедуру можно с помощью «одноразовых» утилит-сканеров. Например «DrWEB CureIt» или других аналогичных.

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

Сброс групповых политик

Если проблема не решилась, перейдите к следующим действиям:

  1. Запустите командную строку: зажмите Win + R и выполните «cmd».
  2. В ней последовательно выполните команды:
    • RD /S /Q «%WinDir%\System32\GroupPolicyUsers»;
    • RD /S /Q «%WinDir%\System32\GroupPolicy»;
    • gpupdate /force.
  3. Перезагрузите ПК.

Как открыть исходный код страницы в браузере Google Chrome

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

Содержание

  1. Вводная информация
  2. Для чего нужно просматривать код
  3. Инструменты разработчика и исходный код – в чем разница
  4. Как открыть исходный код страницы браузера Гугл Хром
  5. На компьютере
  6. На мобильном телефоне
  7. Просмотр кода элемента
  8. Как отредактировать и сохранить исходный код
  9. Другие возможности инструментов разработчика
  10. Заключение

Сайты пишут в основном на языке HTML – это язык гипертекстовой разметки. Также используется CSS, чтобы оформить стили. Более сложные ресурсы пишутся на скриптовых языках таких как PHP и JS. Пользователь видит текст, картинки, видео, динамичные элементы и всплывающие окна. Но внутри – все это состоит из тегов, функций, условий, ссылок, одним словом – кода.

Есть ресурсы, которые позволяют создавать сайты без знания языков программирования, это конструкторы. Но и они так или иначе преобразуют визуальные элементы в разметку на языке HTML, CSS и JS. Только происходит это без участия разработчика.

Для чего нужно просматривать код

Необходимость открыть и посмотреть внутреннее содержимое сайта может возникнуть в различных ситуациях:

  • Если вы начинающий веб-разработчик или верстальщик, вам будет полезно посмотреть, как реализованы на разных сайтах те или иные элементы. Какие-то части кода вы даже можете скопировать себе в свой проект.
  • Тестировщики сайтов и менеджеры проектов должны проверять не только визуальное исполнение сайта согласно макетам, но и правильно ли выполнена вложенность тегов h2, h3 и т.д., прописаны ли метатеги, тайтлы и дескрипшены на каждой странице.
  • Если копирование текста, картинок, видео на сайте запрещено, обойти ограничение можно через код.
  • Специалисты, которые занимаются написанием текстов на сайт, не всегда могут проконтролировать процесс публикации статьи. Если ваш материал опубликовали под именем администратора или менеджера, вы не сможете положить эту статью в портфолио. Но с помощью инструментов разработчика можно «подкорректировать» некоторые элементы сайта, например, если в тексте закралась досадная ошибка, ее можно исправить и после сделать скриншот.

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

Инструменты разработчика и исходный код – в чем разница

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

Исходный код страницы Хром – это набор символов, структурированный в древовидную структуру, и он открывается на отдельной странице. Все страницы сайтов, написанных на языке HTML, начинаются со строчки <!DOCTYPE html>. Она говорит браузеру, что данная страница написана на языке HTML5. Заканчивается каждая страница тегом </html>. Это неизменно.

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

Функция «Просмотреть код» – это инструмент, с помощью которого мы можем изучить более подробно отдельные элементы, стили, скрипты. Что-то изменить на сайте, но только локально. Ещё эта функция называется «Инструменты разработчика».

Как открыть исходный код страницы браузера Гугл Хром

Открыть исходный код можно несколькими способами в зависимости от устройства и предпочтений пользователя:

На компьютере

  • С помощью горячих клавиш – для этого, находясь на интересующей странице нажмите на клавиатуре комбинацию клавиш Ctrl + U. Рядом в браузере откроется вкладка, содержащая весь исходный код.
  • Открыть из контекстного меню – если вы не дружите с горячими клавишами эту же функцию можно выполнить через контекстное меню мыши. Также находясь на странице, код которой нужно просмотреть данные, выполните правый клик мышкой на пустом месте, где нет никаких активных элементов или текста и в открывшемся списке выберите «Просмотр кода страницы».

На мобильном телефоне

На мобильном телефоне также можно просмотреть исходный код. Только вот в настройках мобильной версии браузера нет специальной функции для этой цели. Однако можно посмотреть код с помощью одной хитрости. В начало ссылки добавить команду view-source:

Например: view-source:https://sergoot.ru/

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

Просмотр кода элемента

Более интересный инструмент – это просмотр кода элемента или как его ещё называют «Инструменты разработчика». Запустить его можно тоже несколькими способами:

  • С помощью функциональной клавиши F12.
  • С помощью горячих клавиш Ctrl + Shift + I.
  • Через контекстное меню мыши – последний пункт в списке.
  • Через меню браузера – в списке выбрать «Дополнительные инструменты – Инструменты разработчика».

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

По умолчанию открывается вкладка Elements. Но вы можете переключить на консоль или посмотреть структуру папок на сервере, а также хранящиеся там файлы. На самом деле инструменты разработчика предоставляют огромные возможности. И в одной статье все описать просто невозможно. Остановимся на некоторых возможностях, что можно сделать неопытному пользователю.

Как отредактировать и сохранить исходный код

Чтобы отредактировать какой-то элемент на сайте, откройте инструменты разработчика и выделите его курсором мышки. Например, вам нужно изменить заголовок статьи:

  1. Выделите текст, на выделенном элементе нажмите правую клавишу мыши и выберите «Просмотреть код».
  2. В правой панели нужный элемент подсветится. Здесь если он скрыт во вложенной структуре, кликом на маленькую стрелочку разверните ветку и отредактируйте текст.
  3. Как только вы переместите фокус в другое место кода заголовок изменится.

Теперь можно закрыть инструменты разработчика и сделать скриншот страницы с уже исправленными элементами.

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

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

Другие возможности инструментов разработчика

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

Если нужно найти какой-то элемент на сайте нажмите комбинацию клавиш Ctrl + F и в строке поиска по сайту введите запрос. Любое слово или тэг. Все совпадения подсветятся желтым, и вы легко вычислите, где находится тот или иной объект и как он реализован.

Кроме обычного просмотра вы можете проверять страницу на адаптив. Кнопка находится в левом верхнем углу панели разработчиков. На ней изображен планшет и телефон. Также запустить этот инструмент можно с помощью комбинации клавиш Ctrl + Shift + M. Здесь можно вручную выставить ширину и высоту экрана или выбрать из списка уже имеющихся устройств, и посмотреть, как сайт будет отображаться на iPhone, iPad или смартфоне Galaxy.

Заключение

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

How to Inspect Element in Chrome

Джаш Унадкат, автор технического контента в BrowserStack — 27 октября 2022 г. страница. Разработчики или тестировщики с большей вероятностью будут использовать эту функцию для отладки определенного элемента, проведения тестов макета или редактирования CSS в реальном времени.

Функция проверки элемента — это простая в использовании, но мощная функция для веб-разработчиков.

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

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

В этой статье будут показаны два простых метода проверки веб-элементов в браузере Chrome.

Примечание: Для разработчиков или тестировщиков, желающих проверить элементы в определенной версии браузера Chrome, используйте второй метод.

Проверка элемента в Chrome

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

Метод 1: проверка элемента с помощью инструментов разработчика Chrome

Ниже перечислены шаги для проверки элемента в браузере Chrome:

  1. Запустите Chrome и перейдите на нужную веб-страницу, которую необходимо проверить. (Давайте рассмотрим домашнюю страницу BrowerStack в этом примере)
  2. В правом верхнем углу нажмите на три вертикальные точки
  3. В раскрывающемся меню нажмите Дополнительные инструменты -> Инструменты разработчика
  4. Кроме того, вы можете использовать Горячая клавиша проверки элемента Chrome.
    • MacOS — Command + Option + C
    • Windows — Control + Shift + C.
  • Инструменты разработчика откроются вместе с консолью и несколькими другими инструментами. Измените размер окна редактора, перетащив углы для удобного просмотра и отладки.

Один из самых простых способов проверить определенный веб-элемент в Chrome — просто щелкнуть правой кнопкой мыши на этом конкретном элементе и выбрать параметр «Проверить».

Щелчок по опции «Проверить» в контекстном меню напрямую открывает инструменты разработчика, включая редактор, консоль, источники и другие инструменты. Обратитесь к изображению ниже для лучшего понимания.

Попробуйте протестировать версии браузера Chrome

Теперь давайте перейдем ко второму методу проверки веб-элементов в нужных версиях Chrome.

Способ 2. Использование BrowserStack Live (для определенных версий Chrome)

BrowserStack — это облачная платформа для тестирования, которая позволяет разработчикам и тестировщикам тестировать свои веб-сайты в популярных операционных системах и браузерах.

Облако реальных устройств включает более 2000 реальных устройств и браузеров для комплексного удаленного тестирования. Инфраструктура BrowserStack включает в себя популярные браузеры, такие как Chrome, Firefox, Safari (включая последние и устаревшие версии), а также устройства от таких поставщиков, как Samsung, Apple, OnePlus и т. д. Ознакомьтесь с полным списком здесь.

Чтобы проверить веб-элемент в определенной версии Chrome, выполните следующие действия:

  1. Подпишитесь на бесплатную пробную версию BrowserStack Live.
  2. Перейдите к панели управления Live после регистрации.
  3. Выберите нужную операционную систему (Android, Windows, macOS). В качестве примера рассмотрим Windows 10.
  4. Выберите Chrome и его нужную версию (в данном случае v.90).
  5. Нажмите на нужную версию Chrome. Новый сеанс Live будет инициирован в реальном браузере Chrome.
  6. Перейдите на нужный веб-сайт и выполните шаги, указанные в первом способе.

Читайте также: Как выполнять удаленную отладку Chrome

Имея 65% общей доли рынка браузеров, Chrome является бесспорным лидером рынка. Естественно, пользователи чаще проверяют или диагностируют свои веб-сайты в Chrome.

Таким образом, пользователям обязательно нужно знать шаги, необходимые для проверки элементов в Chrome. Проиллюстрированные выше методы помогут пользователям легко проверять веб-элементы в Chrome — неотъемлемую часть тестирования Chrome. Кроме того, второй метод окажется очень удобным для пользователей, желающих отлаживать или проверять веб-сайты в определенной версии Chrome.

Простые методы редактирования веб-страницы

Развитие веб-сайта

Техническое обслуживание

28 февраля 2023 г.

Линас Л. и Новиантика Г.

9 минут Чтение

Научиться проверять элементы в браузере полезно, особенно если вы работаете в сфере ИТ. Inspect Element позволяет посетителям получать доступ и временно редактировать исходный код веб-сайта, включая HTML, CSS, JavaScript и файлы изображений.

Помимо краткого управления внешним видом сайта, инструмент Inspect Element позволяет пользователям тестировать скрипты, устранять ошибки и находить метаданные веб-страницы.

Проверка элемента — это встроенная функция во всех основных браузерах. Эта статья покажет вам, как получить доступ и использовать Inspect Element в Google Chrome, Safari и Mozilla Firefox.

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

Загрузить контрольный список запуска веб-сайта

Что можно сделать с Inspect Element?

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

  • Редактирование CSS в реальном времени ‒ позволяет вносить правки в панель CSS и видеть изменения в режиме реального времени.
  • Тестирование макета ‒ позволяет тестировать различные макеты сайта.
  • Диагностика отладки ‒ помогает в обслуживании сайта, так как может проверить, содержит ли сайт неработающий код.
  • Временное редактирование ‒ позволяет настраивать элементы страницы без внесения постоянных изменений в код.

Зачем вам нужно проверять веб-элементы?

Функция Inspect Element полезна во многих случаях использования, особенно для:

  • веб-разработчиков — вы можете тестировать написанный вами код и взаимодействовать с ним на веб-странице. Вы также можете использовать Inspect Element для поиска ошибок или багов на сайте.
  • Авторы контента — функция «Проверить элемент» позволяет опустить конфиденциальную информацию с веб-страницы перед созданием снимка экрана. Управление страницей с помощью Inspect Element выполняется быстрее, чем с помощью программного обеспечения для редактирования фотографий.
  • Цифровые маркетологи — позволяет проверить усилия конкурентов по поисковой оптимизации (SEO), метаданные веб-сайта, целевые ключевые слова и статус индекса Google.
  • Агенты службы поддержки — помогает веб-разработчикам в выявлении и устранении ошибок веб-сайта.
  • Дизайнеры — помогите изменить дизайн сайта и посмотрите изменения перед их внедрением. Инструмент также позволяет предварительно просмотреть внешний вид веб-страницы на настольном компьютере или мобильном устройстве. Это экономит время и делает общение с клиентами более эффективным.

Как проверить элемент с помощью инструментов разработчика Chrome?

Перед изучением инструмента «Проверить элемент» в Google Chrome необходимо ознакомиться с инструментами разработчика. Это панель, которая поставляется с инструментом Inspect Tool и состоит из трех основных частей:

  • Панель элементов/объектной модели документа (DOM) — содержит дерево DOM страницы и обеспечивает доступ к языку гипертекстовой разметки (HTML) исходный код. Он расположен на верхней панели инструментов Chrome Developer Tools.
  • Панель CSS — позволяет изменять, добавлять и удалять свойства CSS для изменения правил стиля веб-страницы. Он расположен в средней части инструментов разработчика в разделе Styles .
  • Консоль — отображает зарегистрированные сообщения и запускает код JavaScript. Он появляется на панели задач инструментов разработчика.

Вот как открыть Inspect Element с помощью Google Chrome:

  1. Откройте веб-сайт в Google Chrome . Мы будем использовать hostinger.com для этого руководства.
  2. Нажмите на три вертикальные точки в верхней строке меню Chrome, выберите Дополнительные инструменты , затем выберите Инструменты разработчика .

В качестве альтернативы используйте сочетания клавиш — Ctrl + Shift + I для Windows или Linux и Cmd + Option + I для пользователей macOS.

Или щелкните правой кнопкой мыши веб-страницу и выберите Проверить , чтобы получить доступ к панели Инструменты разработчика .

  1. Когда в окне браузера появится вкладка Elements , вы можете редактировать исходный код страницы. Измените размер окна инспектора, перетащив его углы для лучшей читаемости.
  1. По умолчанию панель Elements отображается в правой части окна браузера. Если вы хотите изменить его местоположение или переместить в отдельное окно, нажмите на три вертикальные точки в правом верхнем углу панели и выберите нужный Настройка стороны док-станции .
  1. Чтобы увидеть, как веб-страница выглядит на мобильных устройствах, щелкните панель инструментов переключения устройств в верхнем левом углу панели. Над предварительным просмотром вы можете изменить переменные, чтобы проверить, как страница работает с другим разрешением экрана или уровнем регулирования пропускной способности.
Pro Tip

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

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

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

Изменение элемента

Чтобы изменить элемент страницы, необходимо изменить исходный код страницы CSS или HTML. Таким образом, вы можете редактировать текст и его элементы стиля, такие как вес, размер и цвет шрифта.

Панель DOM позволяет легко изменять текст. Вот как это сделать:

  1. Откройте Google Chrome и перейдите на веб-сайт. В этом примере мы используем hostinger. com .
  2. Щелкните правой кнопкой мыши в любом месте веб-страницы и выберите Проверить , чтобы открыть Инструменты разработчика .
  3. После открытия окна Elements используйте инструмент Inspect — значок курсора в верхнем левом углу панели — чтобы выделить элемент исходного кода, который вы хотите изменить.
  1. Щелкните правой кнопкой мыши код, выделенный в дереве DOM, и выберите Edit as HTML . Либо дважды щелкните текст, который хотите изменить.
  1. Окно редактора расширится, что позволит вам изменить текст. Текстовые элементы обычно заключаются в кавычки.
  1. Отмените выбор элемента, чтобы просмотреть изменения.

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

Выполните следующие действия:

  1. Откройте Google Chrome и получите доступ к веб-сайту. В этом примере мы используем hostinger.com .
  2. Щелкните правой кнопкой мыши в любом месте веб-сайта и выберите Проверить .
  3. Используйте инструмент Inspect , чтобы выделить элемент.
  4. Щелкните свойство element.style в верхней части панели CSS и добавьте нужные объявления стиля в фигурные скобки. В следующем примере мы добавили цвет фона к текстовому блоку:
  1. Если вы хотите поместить другое объявление стиля, снова выберите свойство element.style . Веб-инспектор добавит еще одну пустую строку для заполнения. Здесь мы добавляем второе свойство для отображения текста курсивом:
  1. При наведении курсора на свойства CSS на панели рядом с каждой строкой отображается флажок. Снимите этот флажок, чтобы не показывать какие-либо стили. Кроме того, вы можете щелкнуть свойство или значение, чтобы заменить его.

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

Инструменты разработчика также позволяют скрывать элементы сайта на веб-страницах. С помощью функции Hide Element панель CSS может создать свойство видимости, чтобы скрыть любой контент сайта, не удаляя его.

Следуйте этим инструкциям:

  1. Откройте Google Chrome и перейдите на веб-сайт. Здесь мы используем hostinger.com .
  2. Щелкните правой кнопкой мыши любую часть веб-страницы и выберите Проверить .
  3. Включить проверку и нажмите на элемент, который хотите скрыть.
  4. Щелкните правой кнопкой мыши код, выделенный в дереве DOM , и выберите Скрыть элемент . Новое свойство видимости появится на панели CSS . Снимите флажок, чтобы отменить изменение.
  1. Если вместо этого вы хотите удалить элемент HTML, щелкните правой кнопкой мыши выделенный код и выберите Удалить элемент . Обновление страницы восстановит удаленный код.
Профессиональный наконечник

Вы можете отменить все изменения, сделанные в инструменте проверки элемента, нажав Ctrl+Z в Windows и Linux или Command+Z в macOS.

Проверка классов CSS

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

Вот как это сделать:

  1. Откройте Google Chrome и получите доступ к веб-сайту. Здесь мы используем hostinger.com .
  2. Щелкните правой кнопкой мыши в любом месте веб-страницы и выберите Проверить .
  3. Активируйте инструмент Inspect и наведите курсор на элемент, который хотите проверить. Его основная информация, такая как цвет, шрифт и поля, появится в поле, а на панели DOM будет выделен его исходный код.
  1. Вы также можете найти определенный стиль CSS, нажав Ctrl+Shift +F в Windows и Linux или Command+Option+F в macOS.
  2. В нижней части панели появится вкладка поиска. Введите запрос, и инспектор сгенерирует результаты.

Как проверить элемент в других браузерах

В большинстве браузеров есть функция, аналогичная инструменту Google Chrome Inspect Element. Хотя функции в основном работают одинаково, разные браузеры требуют разных шагов для их запуска.

Проверка элемента в Safari

Прежде чем использовать инструмент проверки элемента в Safari, необходимо включить меню «Разработка» :

  1. Выберите Safari в строке меню и выберите «Настройки» из меню.
  1. Выберите Дополнительно и установите флажок рядом с Показать меню «Разработка» в строке меню , чтобы включить проверку элемента.
  1. После того, как вы активируете эту функцию, в меню будет добавлена ​​опция Develop .

Вот как использовать Inspect Element в Safari:

  1. Откройте браузер Safari .
  2. Щелкните правой кнопкой мыши в любом месте страницы и выберите «Проверить элемент 9».0018 , или вы можете использовать сочетание клавиш Command+Option+I .

В качестве альтернативы выберите Develop -> Show Web Inspector в строке меню.

Инструмент «Проверить элемент» в Safari по умолчанию отображается в нижней части окна браузера. Чтобы изменить расположение, щелкните значок, чтобы закрепить панель справа или открыть ее в отдельном окне.

Панель Web Inspector состоит из двух столбцов — в первом отображается исходный код HTML, а во втором — CSS. Используйте курсор для навигации по интерфейсу и изучения кода и строк, соответствующих каждому региону.

Можно также проверить страницу напрямую, нажав кнопку инструмента Inspect в верхнем левом углу панели. При перемещении курсора инструмент показывает соответствующий исходный код.

Как и инструмент Google Chrome Inspect Element, Safari позволяет пользователям редактировать, удалять и добавлять элементы веб-страницы.

Вот как изменить часть страницы:

  1. Открыть Safari .
  2. Перейти на веб-сайт. В этом примере мы используем hostinger.com .
  3. Щелкните правой кнопкой мыши код HTML на панели Elements и наведите курсор на Edit .
  1. Выберите параметр в меню Редактировать .
  1. Web Inspector предложит вам ввести новый текст и отобразит внесенные вами изменения в режиме реального времени.

Чтобы добавить новый элемент на страницу, выполните следующие действия:

  1. Открыть Safari .
  2. Доступ к веб-сайту. В этом случае мы будем использовать hostinger.com .
  3. Щелкните правой кнопкой мыши строку кода и выберите параметр в меню Добавить . В этом примере мы выбираем Child .
  1. Укажите элемент. В этом примере мы добавим

    . Вы можете продолжить писать любой код рядом с ним.

Вот как удалить элемент страницы:

  1. Открыть Safari .
  2. Перейти на веб-сайт. В этом примере мы обращаемся к hostinger.com .
  3. Выберите любой код и нажмите Удалить .

Можно также щелкнуть правой кнопкой мыши строку кода и выбрать Удалить -> Узел .

  1. Чтобы скрыть элемент нужной веб-страницы, просто щелкните правой кнопкой мыши код, который вы хотите скрыть, и выберите Переключить видимость .

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

  1. Открыть Safari .
  2. Доступ к веб-сайту. В этом примере мы используем hostinger.com .
  3. Выберите параметр Develop в строке меню.
  4. Выберите Войдите в режим адаптивного дизайна .
  1. Он покажет доступные параметры устройства и разрешения экрана для предварительного просмотра сайта.

Проверка элемента в Mozilla Firefox

Панель проверки элемента также является встроенной функцией браузера Mozilla Firefox. Вот как это использовать:

  1. Открыть Mozilla Firefox .
  2. Перейти на веб-сайт. В этом примере мы используем hostinger.com .
  3. Щелкните правой кнопкой мыши любую часть страницы и выберите Проверить .

В качестве альтернативы щелкните меню с тремя полосами -> Дополнительные инструменты .

  1. Выберите Инструменты веб-разработчика .

Вы также можете использовать сочетание клавиш Ctrl+Shift+I для доступа к Inspect Element .

Инспектор Firefox по умолчанию отображается внизу окна. Чтобы изменить его расположение, щелкните меню из трех точек в правом верхнем углу панели и выберите другой вариант отображения.

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

Панель «Инспектор» в Firefox работает аналогично Chrome и Safari. Исходный код HTML имеет цветовую кодировку — синий — содержимое, желтый — поля, фиолетовый — отступы.

Вот как изменить элемент страницы в Firefox:

  1. Открыть Mozilla Firefox .
  2. Доступ к веб-сайту. В этом примере мы используем hostinger.com .
  3. Щелкните правой кнопкой мыши любую часть веб-страницы и выберите Проверить .
  4. Дважды щелкните, чтобы изменить текст.

Либо щелкните правой кнопкой мыши и выберите Изменить как HTML , чтобы изменить текст. Поле расширится, чтобы вы могли написать код.

  1. Чтобы добавить новый текст, выберите Создать новый код .
  1. Чтобы удалить код, просто дважды щелкните и нажмите Backspace или Удалить .

Выполните следующие действия, чтобы изменить стиль элемента:

  1. Открыть Mozilla Firefox .
  2. Перейти на веб-сайт. В этом примере мы используем hostinger. com 9.0018 .
  3. Откройте панель Inspector и перейдите к Стили фильтров в нижней части.
  1. Снимите флажок рядом с объявлением CSS, чтобы деактивировать стиль.
  1. Щелкните раздел, и инструмент предоставит новую строку для добавления нового кода.

Mozilla Firefox также предлагает режим адаптивного дизайна для предварительного просмотра нескольких предустановленных разрешений экрана. Вот как это сделать:

  1. Открыть Mozilla Firefox .
  2. Доступ к веб-сайту. В этом примере мы открываем hostinger.com .
  3. Откройте панель Inspector и щелкните значок Responsive Design Mode в правом верхнем углу.

В качестве альтернативы щелкните меню с тремя полосами -> Дополнительные инструменты -> Режим адаптивного дизайна .

  1. Активация режима позволяет проверить скорость соединения и соотношение пикселей устройства.

Заключение

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

В этой статье мы объяснили шаги для доступа к Inspect Element и рассказали о его обычном использовании в трех веб-браузерах — Google Chrome, Safari и Mozilla Firefox.

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

Узнайте больше об обслуживании веб-сайта

Хотлинкинг: что это такое и почему это плохо?
Как перенаправить домен
Как использовать домены без файлов cookie
Как проверить журнал ошибок PHP вашего веб-сайта

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

This entry was posted in Популярное