Как изменить код страницы на телефоне

Как посмотреть исходный код страницы

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

Что такое исходный код страницы и кому он нужен

Исходный код страницы — это вид страницы на языке кода. Он выглядит как список пронумерованных строк, где каждая содержит информацию о конкретном объекте на сайте. Код страницы состоит из трех элементов:

• HTML — гипертекстовая разметка, которая отвечает за всю структуру страницы. С помощью нее делают текст, блоки, основные элементы сайта.
• CSS — работает в связке с HTML через теги и отвечает за визуализацию: размер, стиль, шрифты, форму, фон.
• JavaScript — логический язык программирования, который отвечает за более сложные элементы. Например, анимацию, аналитику или интерактив.

Как выглядит исходный код страницы сайта

Исходный код позволяет посмотреть, как написана страница сайта в интернете и какие элементы в ней «спрятаны» за внешней оболочкой. Чаще всего исходный код смотрят SEO-специалисты, чтобы узнать:

• Как собран текст страницы и какие ссылки используются.
• Какие метатеги и ключевые слова использованы.
• Какое описание (description) и название (title) страницы.
• Подключены ли страницы к «Яндекс.Метрике», Google Analytics, скрипты, счетчики, плагины, пиксели.

Еще исходный код часто смотрят дизайнеры, программисты и верстальщики. Им может пригодится эта информация, чтобы выяснить:

• Отступы у кнопок, размеры блоков, цвета и используемые шрифты.
• Как встроены изображения, графика и другие медиа.
• Как использован JavaScript, какие атрибуты кода применены, есть ли баги.

Читайте также: 76 ссылок, которые помогут сделать концепцию дизайна эффективнее и быстрее

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

Как посмотреть исходный код страницы

Код страницы можно посмотреть в двух режимах:

• Исходный код — загружается версия страница в формате HTML-кода.
• Инспектор — запускается консоль для просмотра и управления кода.

Два способа посмотреть код: в отдельной вкладке или через консоль

Чтобы посмотреть исходный код страницы, используйте горячие клавиши в любом браузере:

• Ctrl+U — посмотреть код в новой вкладе на Windows.
• Ctrl+Shift+C — открыть инспектор кода на Windows.
• cmd+U — открыть исходный код на MacOS.
• alt+cmd+U — открыть инспектор кода на MacOS.

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

Google Chrome

Нажмите правой кнопкой мыши на странице и выберите:

• Посмотреть код страницы. Код откроется в отдельной вкладке.
• Посмотреть код. Откроется инспектор для просмотра кода в текущей вкладке.

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

Safari

Чтобы пункт «Посмотреть исходный код» появился, сначала потребуется включить опцию его просмотра:

• Откройте настройки браузера в меню Safari.
• Перейдите во вкладку «Дополнение».
• Поставьте галочку на пункте «Показывать меню „Разработка“ в строке меню».

Как включить просмотр кода в браузере Safari

После этого открываете страницу в интернете, щелкаете правой кнопкой мыши и выбираете:

• Показать программный код страницы. Открыть код страницы в новой вкладке.
• Проверить объект. Включить инспектора.

Как посмотреть исходный код страницы в Safari

Opera

Откройте страницу и кликните правой мышкой по любой области на экране. Выберите:

• Исходный текст страницы. Код откроется отдельной вкладкой.
• Просмотреть код элемента. Запустить инспектора.

Как посмотреть исходный код страницы в Opera

Mozilla Firefox

Откройте страницу и кликните правой мышкой. Выберите:

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

Как посмотреть исходный код страницы в Mozilla Firefox

Microsoft Edge

Откройте страницу и нажмите правой кнопкой мыши по любой области. В меню доступно:

• Просмотреть исходный код. Открыть код страницы в отдельной вкладке браузера.
• Проверить. Включить инспектора на странице.

Как посмотреть исходный код страницы в Microsoft Edge

«Яндекс.Браузер»

Откройте страницу и нажмите правой клавишей мыши:

• Просмотреть код страницы. Открыть код в новой вкладке.
• Исследовать элемент. Запустить инспектор кода.

Как посмотреть исходный код страницы в «Яндекс.Браузере»

Браузер на телефоне

На телефоне инспектор недоступен, но можно открыть исходный код с помощью строки «view-source:url-сайта». Например, вот так можно посмотреть страницу Workspace — «view-source:workspace.ru».

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

Как использовать исходный код

Вы можете редактировать сайт и изучать его структуру.

Редактирование страницы

Через инспектор можно менять код страницы внутри своего браузера — это никак не влияет на сам сайт: после перезагрузки сайт вернется в исходное положение. Редактирование страницы может пригодится, чтобы:

• менять блоки и их содержимое для проверки их отображения или тестирования;
• делать скриншоты для себя или в качестве технических заданий для копирайтеров, программистов или дизайнеров.

Как отредактировать код на сайте:

• В режиме инспектора нажмите на курсор около вкладки «Элементы» (Elements).
• Выберите курсором интересующий элемент сайта: блок, текст, картинку, заголовок.

Как посмотреть исходный код элемента страницы

В итоге над элементом появится информация о примененных CSS-стилях, а во вкладке «Элементы» (Elements) — конкретная строка в HTML-коде. Ее можно редактировать. Например, изменить текст — в нашем примере это строка h1.

Как найти элемента сайта в его исходном коде

Кликаем два раза и в окне «Элементы» (Elements) пишем что угодно. Изменение сразу отобразится на сайте.

Как изменить элемент сайта с помощью инспектора

Также можно менять CSS-стили. Например, изменить размер отображаемой картинки. Выберите элемент сайта и в разделе Стили (Styles) пролистайте в самый низ, где предлагают изменить размер изображения. Введите новые значения и сохраните.

Как изменить CSS-стиль через исходный код

Проверить SEO-оптимизацию

Вы можете проверить заголовки, тайтл и дескрипшн любой страницы. Для этого откройте режим просмотра кода в новой вкладке и через поиск (Ctrl+F) ищите следующие строки:

• title — название страницы,
• description — описание страницы,
• h1-h6 — заголовки,
• alt — теги для изображений.

Как посмотреть тайтл и дескрипшн через исходный код

Эти данные отвечают за продвижение статей через поисковики. Тайтл и дескрипшн отображается в заголовке и сниппете карточки в поисковике, а h1-h2 отвечают за логику всего документа, что тоже влияет на выдачу. Alt — описывают содержимое картинок, что пригодится для соответствующего поиска.

Параметры страницы, который можно найти в ее исходном коде

Подробнее о SEO-продвижении и способах улучшить свои позиции в поисковиках читайте в статьях:

• «Внутренняя оптимизация сайта: все, что нужно знать о техническом SEO»
• «Как оптимизировать картинки для SEO-продвижения и привлечь дополнительный трафик»
• «Как сделать расширенные сниппеты в выдаче „Яндекса“ и Google»

Заключение

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

Задачи на тендерной площадке Workspace в категории «SEO»

Даже если вы не разработчик, эта информация поможет составить грамотное техническое задание, которое можно разместить на нашем сайте Workspace и найти здесь исполнителя. Если же вы сами является специалистом, то Workspace поможет найти заказчика — регистрируйтесь, указывайте свои компетенции и находите новые проекты.

Workspace.LIVE — мы в Телеграме

Новости в мире диджитал, ответы экспертов на злободневные темы, опросы, статьи и многое другое. Подписывайтесь: https://t.me/workspace

Вакансии

• Копирайтер/автор статей в блог об интернет-маркетинге
  Webteam Удаленная работа По договоренности
• Специалист по продвижению/рекламе на маркетплейсах
  Webteam Удаленная работа По договоренности
• PR-специалист
  Дела PR Удаленная работа от 150 000
• Маркетолог
  Promarketing.tech Удаленная работа 40 000 – 200 000
• Веб-дизайнер
  Promarketing.tech Удаленная работа 20 000 – 160 000

Просмотр HTML кода страницы сайта в android.

Обычно, на ПК смотрим код при помощи клавиш Ctrl+U или правой кнопкой мыши выбрать «Просмотр кода страницы» или «Исходный код страницы» и т.п., в зависимости от браузеров Google Chrome, Яндекс, Microsoft Edge, Интернет эксплорер, Opera, Mozilla Firefox. Исходный код страницы сайта на устройствах андроид можно посмотреть двумя способами:

1. Так же на телефоне, как на ПК, вставить в адресную строку браузера перед доменом или адресом сайта символы view-source:.

2. Установить и посмотреть при помощи небольшой программы VT View Source, которую можно скачать в Play Market.

Отличием от других подобных программ является подсветка элементов кода (синтаксиса) различными цветами, что повышает удобство чтения кода и другие полезные функции.

Для просмотра исходного кода сайта в смартфоне или планшете, в программе VT View Source необходимо ввести адрес рассматриваемой страницы либо вручную, либо вставить из буфера обмена заранее скопированный, и нажать ОК.

Что позволяет программа:

Работать как в вертикальном, так и горизонтальном режиме.

Адреса потом можно сохранять в закладках программы, чтобы потом не вводить заново.

Код можно обновлять.

Искать в коде необходимый текст.

Копировать как весь код, так и отдельные его части.

Сохранять в файл.

Программа позволяет менять свой цветовой интерфейс (подсветка текста, цвет фона и текста, размер шрифта) как стандартными включенными темами, так и вручную, включать и отключать увеличение и нумерацию строк.

• Программа Artisteer. Создание шаблонов сайта
• Что такое PR (pagerank) страницы и ТИЦ сайта

Как изменить код элемента страницы на телефоне (андроид)

Подключиться проводом к компу, разрешить sub-дебаггин в системе и в файрфоксе, с десктопного файрфокса открыть инспектора (по shift+f8, а не как обычно) и там поменять как угодно.

Матвей КрутойЗнаток (317) 4 года назад
нихуя задись пять
Neon mode Гуру (2748) Матвей Крутой, а сам ученик ?
Neon modeГуру (2748) 11 месяцев назад
Если так, то у тебя уже будет комп, а с компа можно изменить элементы, зачем усложнять? :/

Metotron Искусственный Интеллект (114620) Александр Евдокимов, вопрос был про то, чтобы изменить на андроиде, а не на компе. Может, скринкаст нужно было записать, или вёрстку отлаживать, не обновляя. Я только что этим занимался, потому что мне нужно было испытать, как в браузере работают единицы dvh, чем их можно заменить в блоке @supports, а обновлять страницу было бы муторно.

Как посмотреть исходный код страницы: выбирайте подходящий для вас способ

Необходимость заглянуть в исходный код страницы может возникнуть по разным причинам. К этой функции часто прибегают SEO-специалисты, дизайнеры, контент-менеджеры. Так, код страницы смотрят, чтобы проверить, корректно ли заполнены метаданные (если на ресурсе не установлен специальный плагин), чтобы определить код конкретного элемента, чтобы понять, почему какая-то часть страницы отображается неправильно и пр. Но, чтобы это выполнить, нужно знать, как именно действовать. Ведь в разных браузерах и на разных типах устройств (десктопе или смартфонах) код страницы выводится по-разному.

Если вы работаете на десктопе

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

Google Chrome

Собираетесь открыть код страницы через браузер Google Chrome? Вот 4 варианта, как это сделать:

Находясь на нужной странице, зажмите одновременно Ctrl и U. Для ОС macOS действует другая комбинация. А именно COMMAND+OPTION+U. После того, как вы примените подходящее сочетание горячих клавиш, появится новая вкладка с HTML.Как видите, у источника цветная кодировка и четкая структура, что упрощает поиск нужных элементов. Чтобы найти требующееся значение ещё быстрее, можете задействовать клавиши Crtl+F. Обнаруженный фрагмент будет выделен ярким цветом.

Второй способ просмотреть код страницы — через вызов контекстного меню. Достаточно нажать на правую кнопку мыши, и вы откроете контекстное меню, где вам нужно будет выбрать строку «Просмотр кода страницы».

Открыть исходный код страницы, можно забив в адресную строку «view-source:», а потом УРЛ самой страницы.

Требуется изучить код страницы более детально? Задействуйте инструменты разработчика Google Chrome.

• Для начала войдите в основное меню браузера. Для этого справа вверху найдите иконку, на которой изображены три вертикально расположенные точки.
• Затем выберите раздел «Дополнительные инструменты».
• Отобразится подменю, в котором находится требующийся вам пункт — «Инструменты разработчика».

Этот же путь можно проделать просто нажав на клавиши быстрого доступа Ctrl+Shift+I. Если вы пользуетесь macOS, зажимайте COMMAND+OPTION+I.

Mozilla Firefox

1. Один из способов открыть исходный код страницы в Mozilla Firefox — вызвать контекстное меню, в котором содержится строчка «Исходный код страницы». Как и в случае с Google Ghrome, страница с кодом появится в отдельной вкладке.

Opera

1. Чтобы посмотреть исходный код страницы в этом браузере, вы также можете зажать Ctrl+U.
2. Или указать перед УРЛом страницы «view-source:».
3. Держа курсор в любом месте страницы, нажмите на правую кнопку мыши. В возникшем окне выберите строчку «Исходный код страницы».

Как открыть код конкретного элемента страницы

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

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

Как открыть код элемента в Google Chrome

Для начала открываем панель с кодом страницы при помощи комбинации клавиш Ctrl+Shift+I. Консоль автоматически появится в правой части экрана. Если вам неудобен такой вариант, вы можете изменить положение панели.

Для этого открываем меню панели и в разделе «Dock Side» выбираем, где будет находиться консоль (можно даже открыть её в отдельном окне).

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

Представим, что мы оставили консоль на её первоначальном месте. Тогда CSS-код выбранного элемента будет отображаться под основной частью.

При желании в CSS-код конкретного элемента можно внести корректировки. Для этого требующий правки параметр выделяют через двойной щелчок мышки. Результат ваших действий будет виден при отображении элементов на странице.

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

Если хотите просмотреть исходный код страницы сайта через смартфон?

Важное отличие мобильных версий браузеров от десктопных — более бедный функционал. Например, на компьютере вы можете использовать инспекторов кода. Для смартфонов эта опция не реализована. Но изучить исходный код страницы всё же можно.

1. Пропишите перед УРЛом параметр «view-source:». Этот способ мы уже опробовали при работе с исходным кодом через десктопную версию браузеров.
2. Вооружитесь специальными приложениями. Например, если у вас Android, вы можете задействовать приложение VT View Source. Запуская его, укажите ссылку на ту страницу, код которой хотите посмотреть. Приложение способно выполнять поиск по коду, проверку валидности, копирование фрагментов, сохранение кода в отдельный документ и пр. Важный нюанс — приложение англоязычное.

Специальные приложения разработаны, конечно, и для iOS. Например, Web Inspector, View Source, просмоторщик HTML и другие. Достаточно указать в AppStore название одного из этих приложений, и на экране появится целый список схожих по функционалу инструментов.

Ещё больше интересных и полезных статей ищите в новостном разделе на сайте Студии ЯЛ. Там мы регулярно публикуем материалы на разные темы: разработка сайтов, поисковое продвижение, контекстная реклама, SMM, SERM и др.