Как открыть код элемента клавишами

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

Ctrl + Shift + C

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

Ctrl + U

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

ПРИМЕЧАНИЕ! По поводу клавиши «F12», которую, по каким-то причинам, указывают во многих статьях. Она не подсвечивает элемент и даже не показывает его в дереве. В Google Chrome она открывает консоль. В Firefox, Yandex и Microsoft Edge – открывается просто окно разработчиков. А в Опере эта кнопка не работает.

Способ 1: Подсветить элемент

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

Быстро просмотреть и открыть код элемента клавишами, можно только с помощью кнопок, которые я указал в самом начале:

Читаем – как открыть консоль в браузере.

  1. Для начала наведите курсор на нужный нам элемент.

Как открыть код элемента клавишами

  1. Теперь одновременно зажмите кнопки:

Ctrl + Shift + C

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

Как открыть код элемента клавишами

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

Как открыть код элемента клавишами

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

Способ 2: Исходный код страницы

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

Ctrl + U

Как открыть код элемента клавишами

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

Способ 3: Мышь

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

  • «Просмотреть код» (Google Chrome)
  • «Исследовать элемент» (Яндекс браузер)
  • «Исследовать» (Mozilla Firefox)
  • «Посмотреть код элемента» (Opera)
  • «Проверить» (Microsoft Edge)

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

Как открыть код элемента клавишами

Автор статьи
Бородач 2181 статей
Сенсей по решению проблем с WiFiем. Обладатель оленьего свитера, колчана витой пары и харизматичной бороды. Любитель душевных посиделок за танками.
WiFiGid
Комментарии: 3
  1. Юлия

    Спасибо большое! Осталось только понять, для чего это мне нужно)

  2. паша

    очень удобно, что сразу попадаешь на новый элемент :idea:

  3. Аноним

    круто, очень полезно, автору всего наилучшего

Добавить комментарий
После отправки комментарий может не отображаться - это нормально. Сразу же после модерации он будет опубликован. Если Вы хотите быстро узнать о получении ответа, рекомендуем оставить свой e-mail (это необязательно). E-mail используется исключительно для Вашего оповещения, мы не занимаемся спамом.

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

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