2178

Как посмотреть код страницы в Google Chrome

Как посмотреть код страницы в Google Chrome

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

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

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

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

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

Открыть инструменты разработчика можно и через главное меню Chrome. В нём есть раздел «Дополнительные инструменты». При его раскрытии вы увидите список, последним в котором будет пункт «Инструменты разработчика».

Запуск инструментов разработчика Chrome

Запускать инструменты разработчика можно разными способами

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

Сочетание горячих клавиш

Когда знаешь сочетания клавиш, работа за компьютером значительно ускоряется. Есть свои сочетания и для запуска инструментов разработчика в Chrome. Для запуска консоли по умолчанию установлена комбинация Ctrl+Shift+I. Вместо этого длинного набора можно использовать клавишу F12 или сочетание Fn+F12. Главное посмотреть, какая пиктограмма изображена на кнопке. Например, на моей клавиатуре нажатие сочетания Fn+F12 завершает работу системы.

Исходный код страницы в Chrome

Так выглядит исходный код страницы

Если же вы хотите просто открыть страницу с исходным кодом безо всяких инструментов редактирования, то нажмите сочетание клавиш Ctrl+U. В соседней вкладке появится HTML-документ, который браузер обработает, чтобы показать вам контент. 

Какой способ подошел?

Просмотреть результаты

Загрузка ... Загрузка ...
Сергей Почекутов

Первый компьютер сломал в 12 лет. С тех пор — только ремонтировал и исправлял ошибки.


Понравилась статья?
Комментариев: 0