Содержание
Веб-страница, которую вы читаете, состоит, среди прочего, из исходного кода. Это информация, которую ваш веб-браузер загружает и преобразует в то, что вы сейчас читаете.
Большинство веб-браузеров предоставляют возможность просматривать исходный код веб-страницы без дополнительного программного обеспечения, независимо от того, на каком устройстве вы находитесь.
Некоторые даже предлагают расширенные функциональные возможности и структуру, облегчая просмотр HTML и другого программного кода на странице.
Зачем вам нужен исходный код?
Есть несколько причин, по которым вы можете захотеть увидеть исходный код страницы. Если вы веб-разработчик, возможно, вы захотите заглянуть под прикрытие в конкретный стиль или реализацию другого программиста. Может быть, вы находитесь в гарантии качества и пытаетесь выяснить, почему определенная часть веб-страницы отображается или ведет себя так, как она есть.
Вы также можете быть новичком, пытаясь научиться кодировать свои собственные страницы и искать примеры из реальной жизни. Конечно, возможно, что вы не попадаете ни в одну из этих категорий и просто хотите просмотреть источник из чистого любопытства.
Ниже приведены инструкции по просмотру исходного кода в выбранном вами браузере.
Гугл Хром
Работает на: Chrome OS, Linux, macOS, Windows
Настольная версия Chrome предлагает три различных способа просмотра исходного кода страницы, первый и самый простой с использованием следующего сочетания клавиш: CTRL + U (КОМАНДА + ОПЦИЯ + U на macOS).
При нажатии этот ярлык открывает новую вкладку браузера с HTML и другим кодом для активной страницы. Этот источник имеет цветовую кодировку и структурирован таким образом, чтобы упростить выделение и поиск того, что вы ищете. Вы также можете получить это, введя следующий текст в адресную строку Chrome, добавленный в левой части URL-адреса веб-страницы, и выбрав Войти ключ: просмотреть исходный код: (то есть источник просмотра: https: //www.lifewire.com).
Третий метод заключается в использовании инструментов разработчика Chrome, которые позволяют вам глубже погрузиться в код страницы, а также настроить его на лету для целей тестирования и разработки. Интерфейс инструментов разработчика можно открывать и закрывать с помощью этой комбинации клавиш: CTRL + SHIFT + I (КОМАНДА + ВАРИАНТ + Я на macOS). Вы также можете запустить их по следующему пути.
Выберите кнопку главного меню Chrome, расположенную в верхнем правом углу и представленную тремя вертикально выровненными точками.
Когда появится раскрывающееся меню, наведите курсор мыши на Больше инструментов вариант.
Когда появится подменю, выберите Инструменты разработчика.
Android
Просмотр источника веб-страницы в Chrome для Android так же прост, как добавление следующего текста в начале его адреса (или URL) и его отправка: просмотреть исходный код:. Примером этого может служить источник просмотра: https: //www.lifewire.com. HTML и другой код с рассматриваемой страницы будет немедленно отображаться в активном окне.
IOS
Хотя нет собственных методов просмотра исходного кода с помощью Chrome на iPad, iPhone или iPod touch, наиболее простым и эффективным является использование стороннего решения, такого как приложение View Source.
Доступный за $ 0,99 в App Store, View Source предлагает вам ввести 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-адреса страницы, вместо этого на текущей вкладке появится тот же источник: просмотреть исходный код: (то есть источник просмотра: https: //www.dotdash.com).
Еще один способ получить доступ к исходному коду страницы — воспользоваться инструментами разработчика Firefox, доступными с помощью следующих шагов.
Выберите кнопку главного меню, расположенную в верхнем правом углу окна браузера и представленную тремя горизонтальными линиями.
Когда появится всплывающее меню, нажмите на разработчик значок «гаечный ключ».
Контекстное меню веб-разработчика теперь должно быть видно. Выберите Исходный текст страницы вариант.
Firefox также позволяет вам просматривать исходный код для определенной части страницы, что позволяет легко выявлять проблемы. Для этого сначала выделите интересующую область мышью. Далее щелкните правой кнопкой мыши и выберите Просмотр выбора источника из контекстного меню браузера.
Android
Просмотр исходного кода в версии Firefox для Android возможен путем добавления префикса URL веб-страницы к следующему тексту: просмотреть исходный код:. Например, чтобы просмотреть исходный HTML-код для Dotdash, вы должны отправить следующий текст в адресную строку браузера: view-source: 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 теперь должны быть видны. Нажми на продвинутый значок, расположенный с правой стороны верхнего ряда.
В нижней части расширенного раздела есть опция с надписью Показать меню «Разработка» в строке меню, сопровождается пустым флажком. Установите этот флажок один раз, чтобы установить в нем галочку, и закройте окно настроек, щелкнув по красному значку «х» в верхнем левом углу.
Выберите развивать меню, расположенное в верхней части экрана.
Когда появится раскрывающееся меню, выберите Показать источник страницы. Вместо этого вы также можете использовать следующую комбинацию клавиш: КОМАНДА + ОПЦИЯ + U.
опера
Работает на: Linux, macOS, Windows
Для просмотра исходного кода с активной веб-страницы в браузере Opera используйте следующую комбинацию клавиш: CTRL + U (КОМАНДА + ОПЦИЯ + U на macOS). Если вы предпочитаете загружать источник на текущей вкладке, введите следующий текст слева от URL-адреса страницы в адресной строке и нажмите Введите: view-source: (то есть источник просмотра: https: //www.lifewire.com).
Настольная версия Opera также позволяет просматривать исходный код HTML, CSS и другие элементы с помощью встроенных инструментов разработчика. Чтобы запустить этот интерфейс, который по умолчанию будет отображаться в правой части главного окна браузера, нажмите следующую комбинацию клавиш: CTRL + SHIFT + I (КОМАНДА + ВАРИАНТ + Я на macOS).
Набор инструментов разработчика Opera также доступен, если выполнить следующие шаги.
Выберите логотип Opera, расположенный в верхнем левом углу окна браузера.
Когда появится раскрывающееся меню, наведите курсор мыши на Больше инструментов вариант.
Нажмите на Показать меню разработчика.
Выберите логотип Opera еще раз.
Когда появится раскрывающееся меню, наведите курсор на разработчик.
Когда появится подменю, выберите Инструменты разработчика.
Vivaldi
Существует несколько способов просмотра исходного кода в браузере Vivaldi. Самое простое через CTRL + U сочетание клавиш, которое представляет код с активной страницы в новой вкладке.
Вы также можете добавить следующий текст в начало URL-адреса страницы, который отображает исходный код на текущей вкладке: view-source: Примером этого может быть view-source: http: //www.dotdash.com.
Другой метод заключается в использовании встроенных в браузер инструментов разработчика, доступных при нажатии кнопки CTRL + SHIFT + I комбинация или через Инструменты разработчика опция в браузере инструменты меню — найти, выбрав В логотип в верхнем левом углу. Использование инструментов dev позволяет гораздо глубже анализировать источник страницы.
