Веб-страница, которую вы читаете, состоит, помимо прочего, из исходного кода. Это информация, которую ваш веб-браузер загружает и переводит в то, что вы сейчас читаете.
Большинство веб-браузеров предоставляют возможность видеть исходный код веб-страницы без дополнительного программного обеспечения, независимо от того, на каком устройстве вы находитесь.
Некоторые даже предлагают расширенные функциональные возможности и структуру, что упрощает просмотр HTML и другого кода программирования на странице.
Почему вы хотите увидеть исходный код?
Существует несколько причин, по которым вам может понадобиться исходный код страницы. Если вы веб-разработчик, возможно, вам стоит взглянуть под обложки в конкретном стиле или реализации другого программиста. Возможно, вы находитесь в обеспечении качества и пытаетесь выяснить, почему определенная часть веб-страницы оказывает или ведет себя так, как она есть.
Вы также можете быть новичком, пытающимся научиться программировать свои собственные страницы и искать примеры из реального мира. Конечно, возможно, что вы не попадаете ни в одну из этих категорий и просто хотите просмотреть источник из чистого любопытства.
Ниже перечислены инструкции по использованию исходного кода в вашем браузере.
Гугл Хром
Запуск: ОС Chrome, Linux, MacOS, Windows
Настольная версия Chrome предлагает три разных способа просмотра исходного кода страницы, первый и самый простой, используя следующую комбинацию клавиш: CTRL + U (КОМАНДА + ВАРИАНТ + U на macOS).
При нажатии этот ярлык открывает новую вкладку браузера, отображающую HTML и другой код для активной страницы. Этот источник имеет цветную кодировку и структурирован таким образом, что упрощает разделение и поиск того, что вы ищете. Вы также можете попасть туда, введя следующий текст в адресной строке Chrome, добавленный в левую сторону URL-адреса веб-страницы, и выбрав Войти ключ: просмотреть исходный код: (то есть, view-source: https: //www.Go-Travels.com).
Третий метод - это инструменты разработчика Chrome, которые позволяют вам глубже погружаться в код страницы, а также настраивать его «на лету» для тестирования и разработки. Интерфейс инструментов разработчика можно открыть и закрыть, используя эту комбинацию клавиш: CTRL + SHIFT + I (КОМАНДА + ВАРИАНТ + I на macOS). Вы также можете запустить их, выполнив следующий путь.
-
Выберите кнопку главного меню Chrome, расположенную в верхнем правом углу и представленную тремя вертикально выровненными точками.
-
Когда появится раскрывающееся меню, наведите указатель мыши на Другие инструменты вариант.
-
Когда появится подменю, выберите Инструменты разработчика.
Android
Просмотр источника веб-страницы в Chrome для Android так же просто, как добавление следующего текста в начало его адреса (или URL-адреса) и его отправки: просмотреть исходный код:, Примером этого может служить Вид источника: https: //www.Go-Travels.com , HTML и другой код со страницы, о которой идет речь, будут мгновенно отображаться в активном окне.
IOS
Хотя для просмотра исходного кода с помощью Chrome на вашем iPad, iPhone или iPod touch нет встроенных методов, самым простым и эффективным является использование стороннего решения, такого как приложение «Просмотр источника».
«Просмотр источника», доступный за 0,99 доллара США в App Store, предлагает ввести URL-адрес страницы (или скопировать / вставить ее из адресной строки Chrome, что иногда является самым простым путем), и все. Помимо показа HTML и другого исходного кода, в приложении также есть вкладки, в которых отображаются отдельные ресурсы страницы, объектная модель документа (DOM), а также размер страницы, файлы cookie и другие интересные детали.
Microsoft Edge
Работает: Windows
Браузер Edge позволяет просматривать, анализировать и даже обрабатывать исходный код текущей страницы через интерфейс разработчика. Чтобы получить доступ к этому удобному набору инструментов, вы можете использовать один из этих сочетаний клавиш: F12 или же CTRL + U, Если вы предпочитаете мышь, нажмите кнопку меню Edge (три точки, расположенные в верхнем правом углу) и выберите Инструменты для разработчиков F12 вариант из списка.
После того, как инструменты dev запускаются в первый раз, Edge добавляет два дополнительных параметра в контекстное меню браузера (доступно щелчком правой кнопки мыши в любом месте веб-страницы): Осмотреть элемент а также Просмотреть исходный код, который открывает дебаггер часть интерфейса инструментов разработчика, заполненная исходным кодом.
Mozilla Firefox
Работает на: Linux, MacOS, Windows
Чтобы просмотреть исходный код страницы в настольной версии Firefox, вы можете нажать CTRL + U (КОМАНДА + U на macOS) на клавиатуре, которая откроет новую вкладку, содержащую HTML и другой код для активной веб-страницы.
Ввод следующего текста в адресную строку Firefox, непосредственно слева от URL-адреса страницы, приведет к тому, что тот же источник появится на текущей вкладке: просмотреть исходный код: ( то есть view-source: https: //www.dotdash.com ).
Другой способ доступа к исходному коду страницы - это инструменты разработчика Firefox, доступные, выполнив следующие шаги.
-
Выберите кнопку главного меню, расположенную в верхнем правом углу окна вашего браузера и представленную тремя горизонтальными линиями.
-
Когда появится всплывающее меню, нажмите разработчик значок «гаечный ключ».
-
Теперь контекстное меню веб-разработчика должно быть видимым. Выберите Исходный текст страницы вариант.
Firefox также позволяет просматривать исходный код для определенной части страницы, что позволяет легко изолировать проблемы. Для этого сначала выделите область, которая вас интересует с помощью мыши. Затем щелкните правой кнопкой мыши и выберите Просмотр источника выбора из контекстного меню браузера.
Android
Просмотр исходного кода в Android-версии Firefox достигается путем префикса URL веб-страницы со следующим текстом: просмотреть исходный код:, Например, чтобы просмотреть источник HTML для Dotdash, вы должны отправить следующий текст в адресную строку браузера: Вид источника: https: //www.dotdash.com .
IOS
Наш рекомендуемый метод просмотра исходного кода веб-страницы на вашем iPad, iPhone или iPod touch - это приложение View Source, доступное в App Store за 0,99 доллара США. Не будучи интегрированным непосредственно с Firefox, вы можете легко скопировать и вставить URL-адрес из браузера в приложение, чтобы открыть HTML и другой код, связанный с рассматриваемой страницей.
Apple Safari
Работа на iOS и macOS
IOS
Хотя Safari для iOS не включает возможность просмотра источника страницы по умолчанию, браузер довольно легко интегрируется с приложением View Source, доступным в App Store за 0,99 доллара США.
После установки этого стороннего приложения вернитесь в браузер Safari и нажмите на кнопку «Поделиться», расположенную в нижней части экрана и представленную квадратом и стрелкой вверх. Теперь лист активности iOS должен быть виден, накладываясь на нижнюю половину окна Safari. Прокрутите вправо и выберите Просмотреть исходный код кнопка.
Теперь должно отображаться цветовое, структурированное представление исходного кода активной страницы, а также другие вкладки, позволяющие просматривать ресурсы страницы, скрипты и многое другое.
Macos
Чтобы просмотреть исходный код страницы в настольной версии Safari, сначала необходимо включить ее развивать меню. В приведенных ниже шагах вы можете активировать это скрытое меню и отобразить HTML-источник страницы.
-
Выбрать Сафари в меню браузера, расположенном в верхней части экрана.
-
Когда появится раскрывающееся меню, выберите предпочтения вариант.
-
Предпочтения Safari теперь должны быть видны. Нажми на продвинутый значок, расположенный на правой стороне верхней строки.
-
В нижней части раздела «Дополнительно» указан флажок Показать меню «Разработка» в строке меню, а также пустой флажок. Выделите это поле один раз, чтобы поместить в него галочку, и закройте окно «Настройки», щелкнув красный «x», расположенный в верхнем левом углу.
-
Выберите развивать меню, расположенное в верхней части экрана.
-
Когда появится раскрывающееся меню, выберите Показать источник страницы, Вместо этого вы можете использовать следующую комбинацию клавиш: КОМАНДА + ВАРИАНТ + U.
опера
Работает на: Linux, MacOS, Windows
Чтобы просмотреть исходный код с активной веб-страницы в браузере Opera, используйте следующую комбинацию клавиш: CTRL + U (КОМАНДА + ВАРИАНТ + U на macOS). Если вы предпочитаете загружать источник на текущей вкладке, введите следующий текст слева от URL страницы в адресной строке и нажмите Введите: view-source: ( то есть источник просмотра: https: //www.Go-Travels.com ).
Настольная версия Opera также позволяет просматривать HTML-источник, CSS и другие элементы с помощью встроенных инструментов разработчика. Чтобы запустить этот интерфейс, который по умолчанию появится в правой части основного окна браузера, нажмите следующую комбинацию клавиш: CTRL + SHIFT + I (КОМАНДА + ВАРИАНТ + I на macOS).
Набор инструментов разработчика Opera также доступен, выполнив следующие шаги.
-
Выберите логотип Opera, расположенный в верхнем левом углу окна вашего браузера.
-
Когда появится раскрывающееся меню, наведите указатель мыши на Другие инструменты вариант.
-
Нажмите на Показать меню.
-
Еще раз выберите логотип Opera.
-
Когда появится раскрывающееся меню, наведите курсор на разработчик.
-
Когда появится подменю, выберите Инструменты разработчика.
Vivaldi
Существует несколько способов просмотра источника страницы в браузере Vivaldi. Самый простой - через CTRL + U сочетание клавиш, которое представляет код с активной страницы на новой вкладке.
Вы также можете добавить следующий текст к URL-адресу страницы, который отображает исходный код на текущей вкладке: просмотреть исходный код:, Примером этого может служить Вид источника: HTTP: //www.dotdash.com .
Другой метод - через встроенные инструменты разработчика, доступные, нажав CTRL + SHIFT + I комбинации или через Инструменты разработчика в браузере инструменты меню - найти, выбрав В логотип в верхнем левом углу. Использование инструментов dev позволяет значительно глубже проанализировать источник страницы.
