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

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

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

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

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

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

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

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

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