Как просмотреть исходный код, просмотреть исходный код сайта с телефона или компьютера

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

Просмотреть исходный код веб-сайта на компьютере

Chrome, Edge, Firefox, Opera на Windows

Этот способ просмотра исходного кода вы можете сделать в Chrome, Edge, Firefox, Opera на Windows. В основном способ сделать это будет следующим, мой пример для Chrome:

Шаг 1: Откройте веб-сайт, исходный код которого вы хотите просмотреть.

Шаг 2: Щелкните правой кнопкой мыши пустое место на веб-сайте, выберите «Просмотреть исходный код страницы»/«Просмотреть исходный код страницы» (Исходный код страницы в Opera) или нажмите Ctrl+U, чтобы просмотреть исходный код веб-сайта в новой вкладке.

Шаг 3: Исходный код сайта откроется в новой вкладке, здесь вы можете просмотреть и найти необходимую информацию.

Safari на macOS

Чтобы просмотреть исходный код любого веб-сайта в Safari на macOS, сначала необходимо активировать меню разработчика (меню «Разработка»).

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

Откройте любой веб-сайт в Safari и щелкните правой кнопкой мыши в пустом месте на странице. Появится контекстное меню, просто нажмите «Показать исходный код страницы». Кроме того, вы также можете получить доступ к этому контекстному меню с помощью сочетания клавиш Option + Command + u.

Если вы ищете изображения или элементы мультимедиа на любой веб-странице, посмотрите на панель параметров в левой части экрана. Вы увидите различные папки, такие как «Изображения», «Шрифты» и т. д. Щелкните папку «Изображения», чтобы быстро найти нужную вам фотографию.

После выбора изображения вы можете легко просмотреть его подробную информацию, нажав кнопку, расположенную в правом верхнем углу панели, прямо под значком шестеренки, как показано ниже. Или вы также можете использовать сочетание клавиш Option + Command + 0.

Нажмите «Ресурс» в верхней части списка, чтобы увидеть более подробную информацию, такую ​​как размер изображения и его полный URL-адрес.

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

Если вы хотите открыть панель исходного кода страницы в отдельном окне, вы можете нажать на значок с двумя прямоугольниками. Это отсоединит панель и откроет ее в отдельном окне в Safari.

Чтобы проверить код любого конкретного элемента на странице, вы можете щелкнуть правой кнопкой мыши по этому элементу и выбрать «Проверить элемент». Это перенесет вас прямо к соответствующему коду.

Посмотреть исходный код сайта по телефону

На данный момент я нашел способ просмотреть исходный код сайта только на телефонах Android, а iOS — это довольно сложно.

Чтобы просмотреть исходный код страницы на Android, откройте браузер Chrome или Firefox, откройте веб-сайт, исходный код которого вы хотите просмотреть, затем вставьте фразу «view-source:» перед . Например, если вы хотите просмотреть исходный код TipsMake, введите в адресной строке следующее:

посмотреть источник:

Этот метод также можно применить к браузерам на компьютерах под управлением Windows.

Тестируйте веб-компоненты с помощью инструментов разработчика

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

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

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

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

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

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

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

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

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

Изабелла Хамфри

Обновление 27 июля 2024 г.