Исходный HTML-код страницы сайта - как посмотреть и внести изменения при помощи консоли
При заходе на тот или иной сайт, или же при просмотре своего собственного - может возникнуть желание посмотреть, как написан какой-либо элемент на HTML, а также внести изменения в код страницы без ее перезагрузки и посмотреть изменения. Подсмотренный образец можно использовать в дальнейшем и в своих разработках.
Для этого в браузерах существует специальная функция – режим просмотра исходного кода страницы.
Просмотреть исходный код страницы обычно можно двумя способами – просто открыть его в отдельной вкладке, либо же открыть консоль разработчика, встроенную в браузер и перейти во вкладку просмотра кода.
Первый вариант позволит просто просмотреть код, для этого можно нажать правую кнопку мыши на странице и выбрать пункт меню, который примерно называется «Просмотр кода страницы» или же нажать горячее сочетание клавиш – обычно CTRL + U. Второй же способ предоставляет богатую функциональность для управления исходным кодом страницы. Он и будет рассмотрен ниже на примере браузера Google Chrome.
Находясь на странице сайта, можно навести на элемент и нажать правую клавишу, затем выбрать «Просмотреть код». Такой подход хорош тем, что сразу открывается консоль в нужной вкладке и устанавливается позиция на данный элемент, что позволяет не тратить время на отыскивание элемента среда всего кода.
Аналогично можно открыть консоль и нажать на кнопку в самом верхнем левом углу консоли или сочетание клавиш CTRL + SHIFT + C – в результате браузер перейдет в режим подсветки элементов при наведении на них курсора. После наведения остается кликнуть по элементу и в консоли будет установлена позиция на нужный элемент.
Консоль позволяет выполнять большое количество операций над элементами и предоставляет дополнительный функционал. Она позволяет:
- сворачивать и разворачивать содержимое тегов;
- добавлять новые теги;
- вносить изменения в теги;
- удалять полностью весь тег с его содержимым;
- копировать путь к элементу, для этого необходимо навести на элемент и нажать правую кнопку мыши, после чего выбрать пункт «Copy» – «Copy selector» или «Copy XPath»;
- установить (эмулировать) какое-либо состояние для элемента, например, наведение курсора мыши или нажатие;
- скопировать полностью весь код элемента или только его содержимое.
Перечислены лишь только некоторые возможности, которые предоставляет консоль разработчика, встроенная в браузер.
Как видно из статьи, используя только лишь современный браузер, можно досконально изучить исходный HTML-код любой страницы сайта, а также выполнить разнообразные манипуляции над кодом. Все это может помочь разработчикам различных уровней подготовки разрабатывать проекты более эффективно.
Последние статьи
- 09.07.22ИТ / Разное Конвертация офисных файлов DOC, DOCX, DOCM, RTF в форматы DOCX, DOCM, DOC, RTF, PDF, HTML, XML, TXT без потерь и изменения разметки
- 07.07.22ИТ / Безопасность Как защитить исходный код PHP, JS, HTML, CSS - обфускация, минимизация, сжатие и шифрование
- 06.07.22ИТ / Безопасность Подключение не защищено, проблема с Lets Encrypt - как исправить истекший 30.09.2021 DST Root CA X3, удалить его вручную и установить ISRG Root X1. Пример на MS Windows 7
- 08.07.21ИТ / Разное Как бесплатно сделать перевод для сайта без API, перевод документов в Google Translate
- 06.07.21ИТ / Разное Как сделать кнопку подписки на сайте, базу подписчиков и автоматическую рассылку