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

Если вы веб-дизайнер, отвечающий за отладку исходного кода веб-сайта или вам просто интересно, как выглядит код веб-сайта, вы можете просмотреть исходный HTML-код прямо в Google Chrome. Узнайте на сайте TipsMake.com, как сделать следующую статью!

Просмотр источника с помощью View Page Source

Включите Chrome и перейдите на сайт, на котором вы хотите увидеть исходный HTML-код. Щелкните страницу правой кнопкой мыши и выберите «Просмотреть исходный код страницы» или нажмите Ctrl + U, чтобы просмотреть исходный код страницы на новой вкладке.

Изображение 1 из Как просмотреть исходный код HTML в Google Chrome

Откроется новая вкладка со всем HTML для веб-страницы, полностью расширяемая и неформатированная.

Изображение 2 из Как просмотреть исходный код HTML в Google Chrome

Если вы ищете определенный элемент или часть в исходном HTML-коде, использование представления исходного кода очень утомительно и громоздко, особенно если на странице используется много JavaScript и CSS.

Проверьте источник с помощью инструментов разработчика

Этот метод использует инструменты разработчика в Chrome и представляет собой гораздо более удобный подход к просмотру исходного кода. HTML здесь легче читать благодаря дополнительному формату и возможности сворачивать элементы, которые вы не хотите видеть.

Откройте Chrome и перейдите на страницу, которую хотите проверить; затем нажмите Ctrl + Shift + I. Откроется прикрепленный фрейм с просматриваемой веб-страницей.

Изображение 3 из Как просмотреть исходный код HTML в Google Chrome

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

Изображение 4 из Как просмотреть исходный код HTML в Google Chrome

Если вы не хотите видеть полный код страницы по умолчанию, вместо этого проверьте определенный элемент в HTML, щелкните правой кнопкой мыши на этом пустом месте на странице, затем нажмите «Проверить».

Изображение 5 из Как просмотреть исходный код HTML в Google Chrome

Когда фрейм откроется на этот раз, он перейдет непосредственно к коду, содержащему элемент, который вы щелкнули.

Изображение 6 из Как просмотреть исходный код HTML в Google Chrome

Если вы хотите изменить положение док-станции, вы можете переместить ее вниз, влево, вправо или даже вынести в отдельное окно. Щелкните значок меню (три точки), затем выберите открытие док-станции в отдельном окне с левой, нижней или правой привязкой соответственно.

Изображение 7 из Как просмотреть исходный код HTML в Google Chrome

Это все, что нужно. Когда вы закончите просмотр кода, закройте вкладку «Просмотр исходного кода» или нажмите кнопку «X» на панели «Инструменты разработчика», чтобы вернуться на свой сайт.

Надеюсь, у вас все получится.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *