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

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

Ctrl + Shift + C

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

Ctrl + U

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

ПРИМЕЧАНИЕ! F12 открывает инструменты разработчика; в Chrome обычно открывается последняя использованная панель, а не обязательно консоль. Для консоли в Chrome есть Ctrl + Shift + J, для выбора элемента — Ctrl + Shift + C. На ноутбуке может понадобиться Fn + F12. Работа сочетаний зависит от браузера и его настроек.

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

Быстро открыть инструменты и выбрать элемент удобно сочетанием из начала статьи. В Chrome на macOS используйте Command + Option + C; после открытия инструментов можно включить выбор элемента кнопкой со стрелкой:

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

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

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

Ctrl + Shift + C

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

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

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

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

Также вы можете посмотреть исходный HTML, который браузер получил от сайта. Это не то же самое, что текущее дерево DOM в панели Elements: JavaScript мог добавить или изменить элементы после загрузки. Серверный код PHP, Python и содержимое базы данных таким способом не раскрываются. Для этого мы используем горячие клавиши:

Ctrl + U

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

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

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

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

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