View source что это за программа

Окно view source в Firefox

Я давно занимаюсь веб-разработкой, но только сегодня совершенно случайно заметил такую особенность Mozilla Firefox: если открыть окно view source, то его можно обновлять точно так же, как и обычное окно со страницей.

• изменение кода;
• переключение на окно браузера;
• Ctrl+R;
• визуальное изучение результата;
• view-source (Ctrl+U) и детальное изучение результата;

Ссылки по теме:
Расширение удобного просмотра исходного кода страницы: addons.mozilla.org/en-US/firefox/addon/655
Набор расширений для веб-разработчика: www.habrahabr.ru/blog/webdev/9431.html

P.S. Я конечно использую расширения, но от привычки нажать Ctrl+U пока не отказался. Точно так же по привычке считал, что открываемое окно статично и его остаётся только закрыть после изучения; оказывается, ошибался.

Источник: habr.com

Поиск viewmatrix, #урокповзлому2

Как открыть исходный код страницы сайта в любом браузере

Веб-страница, которую вы читаете, состоит, среди прочего, из исходного кода. Это информация, которую ваш веб-браузер загружает и преобразует в то, что вы сейчас читаете.

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

Зачем нужен исходный код

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

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

Ниже приведены инструкции по просмотру исходного кода в выбранном вами браузере.

Исходный код страницы в Google Chrome

Настольная версия Chrome предлагает три различных способа просмотра исходного кода страницы, первый и самый простой с использованием следующей комбинации клавиш быстрого доступа: CTRL + U ( COMMAND + OPTION + U в macOS).

При нажатии этой комбинации вы откроете новую вкладку браузера с HTML и другим кодом активной страницы. Этот источник имеет цветовую кодировку и структурирован таким образом, чтобы упростить выделение и поиск того, что вы ищете. Вы также можете получить это, введя следующий текст в адресную строку Chrome, добавив выделенную часть слева от URL-адреса веб-страницы, и нажав клавишу Enter : view-source: (например, view-source:https://webznam.ru).

Он вам не Open Source / Тайная империя свободного ПО

Третий метод заключается в использовании инструментов разработчика Chrome, которые позволяют вам глубже погрузиться в код страницы, а также настроить её на лету для целей тестирования и разработки. Интерфейс инструментов разработчика можно открывать и закрывать с помощью сочетания клавиш: CTRL + SHIFT + I ( COMMAND + OPTION + I в macOS).

Вы также можете запустить их по следующему пути:

1. Выберите кнопку главного меню Chrome, расположенную в верхнем правом углу и представленную тремя вертикально выровненными точками.
2. Когда появится раскрывающееся меню, наведите курсор мыши на параметр «Дополнительные инструменты».
3. Когда появится подменю, выберите Инструменты разработчика.

Google Chrome на Android

Просмотр источника веб-страницы в Chrome для Android также просто: добавьте следующий текст перед адресом (или URL) – view-source:. HTML и другой код рассматриваемой страницы будет немедленно отображаться в активном окне.

Google Chrome на iOS

Хотя нет собственных методов просмотра исходного кода с помощью Chrome на iPad, iPhone или iPod touch, наиболее простым и эффективным является использование стороннего решения, такого как приложение View Source.

Доступное за $0,99 в App Store, View Source предлагает вам ввести URL-адрес страницы (или скопировать/вставить его из адресной строки Chrome), и всё. Помимо отображения HTML и другого исходного кода, в приложении также есть вкладки, на которых отображаются отдельные ресурсы страницы, объектная модель документа (DOM), а также размер страницы, файлы cookie и другие интересные сведения.

Исходный код страницы в Microsoft Edge

Браузер Edge позволяет просматривать, анализировать и даже манипулировать исходным кодом текущей страницы через интерфейс инструментов разработчика.

Чтобы получить доступ к этому удобному набору инструментов, вы можете использовать одно из этих сочетаний клавиш: F12 или CTRL + U . Если вы предпочитаете мышь, вместо этого нажмите кнопку меню Edge (три точки в верхнем правом углу) и выберите в списке пункт «Средства разработчика F12».

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

Исходный код страницы в Mozilla Firefox

Чтобы просмотреть исходный код страницы в настольной версии Firefox, вы можете нажать CTRL + U ( COMMAND + U на macOS) на клавиатуре, чтобы открыть новую вкладку, содержащую HTML и другой код для активной веб-страницы.

При вводе следующего текста в адресную строку Firefox, непосредственно слева от URL-адреса страницы, на текущей вкладке будет отображён исходный код: view-source: (например, view-source:https://webznam.ru).

Ещё один способ получить доступ к исходному коду страницы – воспользоваться инструментами разработчика Firefox, доступными с помощью следующих шагов.

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

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

Mozilla Firefox на Android

Просмотр исходного кода в Android версии Firefox достижим через использование view-source: в URL-адресе.

Mozilla Firefox на iOS

Рекомендуемый метод просмотра исходного кода веб-страницы на вашем iPad, iPhone или iPod touch – через приложение View Source, доступное в App Store за $0,99. Хотя оно не интегрировано напрямую с Firefox, вы можете легко скопировать и вставить URL-адрес из браузера в приложение, чтобы раскрыть HTML-код и другой код, связанный с рассматриваемой страницей.

Исходный код страницы в Apple Safari

Хотя Safari для iOS по умолчанию не включает возможность просмотра источника страницы, браузер довольно легко интегрируется с приложением View Source, доступным в App Store за 0,99 долл. США.

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

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

На MacOS

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

1. Выберите Safari в меню браузера, расположенного в верхней части экрана.
2. Когда появится раскрывающееся меню, выберите параметр Настройки.
3. Настройки Safari теперь должны быть видны. Нажмите на значок «Дополнительно», расположенный в правой части верхнего ряда.
4. Внизу раздела «Дополнительно» находится опция «Показать меню разработки» в строке меню, сопровождаемая пустым флажком. Установите этот флажок и закройте окно настроек, щелкнув по красному значку «х» в верхнем левом углу.
5. Откройте меню «Разработка», расположенное в верхней части экрана.
6. Когда появится раскрывающееся меню, выберите «Показать источник страницы». Кроме того, можно использовать следующую комбинацию клавиш: COMMAND + OPTION + U .

Исходный код страницы в браузере Opera

Чтобы просмотреть исходный код активной веб-страницы в браузере Opera, используйте следующую комбинацию клавиш: CTRL + U ( COMMAND + OPTION + U в macOS). Если вы предпочитаете загружать источник в текущей вкладке, введите следующий текст слева от URL-адреса страницы в адресной строке и нажмите Enter : view-source:

Настольная версия Opera также позволяет просматривать исходный код HTML, CSS и другие элементы с помощью встроенных инструментов разработчика. Чтобы запустить этот интерфейс, который по умолчанию будет отображаться в правой части главного окна браузера, нажмите следующую комбинацию клавиш: CTRL + SHIFT + I ( COMMAND + OPTION + I в macOS).

Исходный код в браузере Vivaldi

Существует несколько способов просмотра исходного кода в браузере Vivaldi. Самое простое – это сочетание клавиш CTRL + U , которое представляет код с активной страницы в новой вкладке.

Вы также можете добавить следующий текст в начало URL-адреса страницы, который отображает исходный код на текущей вкладке: view-source:

Другой метод – через интегрированные инструменты разработчика браузера, доступные по сочетанию клавиш CTRL + SHIFT + I или через опцию средств разработчика в меню.

Источник: webznam.ru

HackWare.ru

Этичный хакинг и тестирование на проникновение, информационная безопасность

Обход запрета показа исходного HTML кода, обход социальных блокировщиков и других мер противодействия сбору информации о сайте

Можно ли надёжно защитить HTML код веб-страницы

Исходный код веб-страницы невозможно защитить от просмотра. Это факт. Но можно в некоторой степени усложнить задачу анализа кода. К совершенно пустым, неэффективным способам можно отнести блокировку правой кнопки мыши. К более эффективным средствам можно отнести обфускацию кода.

Особенно если код не присутствует в исходном тексте страницы, а подгружается из разных файлов с помощью JavaScript и если на разных этапах (сам JavaScript и HTML) также обфусцированны. В этом случае всё становится намного труднее. Но такие случае довольно редки — чаще встречаются на веб-сайтах очень крупных компаний. Мы же рассмотрим более простые варианты.

Как просмотреть исходный HTML код веб страницы, если заблокирована правая кнопка мыши и сочетание клавиш CTRL+u

Если правая кнопка мыши не работает, то просто нажмите CTRL+u. Мне попался сайт, в котором CTRL+u также отказалась работать:

CTRL+u можно отключить с помощью JavaScript и именно эта техника используется на том сайте. То есть первый вариант очевиден — с выключенным JavaScript исходный код не будет «заблокирован».

Другой вариант — это в меню браузера найти опцию «Показать исходный код». В Firefox эта опция есть, но лично у меня всегда уходит много времени, чтобы её найти ))) В Chrome я эту опцию вообще не могу найти в меню браузера, поэтому запомните строку

view-source:

Если эту строку добавить перед любым адресом сайта и всё это вставить во вкладку веб-браузера, то будет открыт исходный код данной страницы.

Например, я хочу посмотреть HTML страницы https://suip.biz/ru/?act=view-source, тогда я вставляю строку view-source:https://suip.biz/ru/?act=view-source во вкладку веб-браузера и получаю в ней исходный код.

Кстати, если вам трудно запомнить view-source, то вот здесь соответствующий сервис: https://suip.biz/ru/?act=view-source (только не надо смеяться над его «сложностью» — всего в жизни не запомнишь, и иногда реально проще открыть такую страницу и с помощью неё получить нужную для просмотра исходного кода строку).

Кстати по поводу отключения JavaScript — необязательно лазить в «глубинные» настройки браузера и искать где эта опция. Можно даже не отключать JavaScript, а приостановить выполнение скриптов для конкретной страницы.

Для этого нажмите F12, затем в инструментах разработчика перейдите во вкладку Sources и нажмите там F8:

Теперь на странице сайта будет работать сочетание клавиш CTRL+u, как будто бы его никогда не отключали.

Обход социальных блокировщиков

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

Суть в следующем, чтобы просмотреть содержимое, нужно «лайкнуть» эту статью в социальной сети.

«Под капотом» там всё (обычно) так: «скрываемый» текст уже присутствует в HTML странице, но спрятан с помощью свойства стиля style=»display: none;». Поэтому достаточно:

1. открыть HTML страницы, защищённой социальным блокировщиком
2. найти там все вхождения style=»display: none;» — обычно их не очень много.

Пример «взлома» социального блокировщика:

Но каждый раз лазить в исходный код не очень удобно и я… сделал онлайн сервис, который сам извлекает для вас данные, скрываемые социальными блокировщиками, его адрес: https://suip.biz/ru/?act=social-locker-cracker

Там я реализовал обход четырёх социальных блокировщиков и добавил «эвристический» анализ — он включается если никакой из этих 4 х блокировщиков не подошёл, то тогда просто выводится содержимое всех блоков с style=»display: none;».

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

Тот сайт, который я показываю на скриншотах, как будто бы распространяет пиратское ПО. Я посмотрел ссылки с помощью обходчика социальных блокировщиков — оказалось, что все скрытые ссылки абсолютно беспонтовые: ведут на демо версии программ или вообще на официальный сайт. В некоторых статьях ссылок вообще нет. Такой «маркетинг» меня заинтересовал и я решил поискать другие сайты этого же автора.

Поиск сетки фальшивых пиратских сайтов

Этот сайт за CloudFlare — Ha ha, classic!

• Cloudflare, Inc. — это сегодняшние IP адреса
• GoDaddy.com, LLC — аукцион, парковщик доменов и тому подобное
• Contabo GmbH — вполне возможно реальный хостинг, где размещён этот сайт

Итак, вероятно, что IP этого сайта 173.249.15.230. На securitytrails на настоящее время по этому IP информации о связанных с ним сайтов нет.

Поэтому идём на сервис «Список сайтов на одной IP», в качестве исходных данных вводим 173.249.15.230 и получаем там:

• haxsofts.com
• crackways.com
• crackmafia.org

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

Верификация IP сайта с помощью cURL

Для верификации IP обычно я использую следующую команду:

curl -v 173.249.15.230 -H ‘Host: АДРЕС_САЙТА’
curl -v 173.249.15.230 -H ‘Host: macwinsofts.com’

Или так, если нужно проверить сайт на HTTPS протоколе:

curl -v https://173.249.15.230 -H ‘Host: macwinsofts.com’

Но сервер 173.249.15.230 настроен так, что абсолютно любой хост, хоть даже если туда написать «dfkgjdfgdfgfd» он перенаправляет на адрес с HTTPS, то есть на «https://dfkgjdfgdfgfd». А запросы по HTTPS сам сервер не принимает вовсе — там веб-сервер не настроен на их обработку и 443 порт даже не октрыт.

В принципе, доказать, что данный сервер настроен на обработку хоста macwinsofts.com можно косвенно, например, данный запрос практически мгновенно вызовет ошибку 503:

curl -v 173.249.15.230/wp-content/uploads/2018/10/ReiBoot-Crack-Mw.png -H ‘Host: fake.com’

А вот данный запрос хотя в конечном счёте также вызовет ошибку 503, но заставит сервер надолго «задуматься»:

curl -v 173.249.15.230/wp-content/uploads/2018/10/ReiBoot-Crack-Mw.png -H ‘Host: macwinsofts.com’

Видимо, там из-за особенностей настройки происходят бесконечный редиректы и в конце концов соединение сбрасывается по таймауту.

Это способ позволяет в том числе брутфорсить файлы и папки:

curl -v 173.249.15.230/.htaccess -H ‘Host: macwinsofts.com’

И совсем интересный результат вызывает вот такой запрос:

curl -v 173.249.15.230/wp-content/uploads/2018/10/ReiBoot-Crack-Mw.png -H ‘Host: ya.com’

Заключение

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

Возможно владелец ожидает роста посещаемости для включения настоящей монетизации или распространения вирусов.

Связанные статьи:

• Утилиты для сбора информации и исследования сети в Windows и Linux (56.3%)
• Исследование на основе открытых источников с OSRFramework (поиск по почте, нику, домену) (55.5%)
• Social Mapper: инструмент анализа социальных сетей, который ищет связь между профилями через распознавание лиц (55.5%)
• Построение интерактивных карт камер, принтеров, твитов и фотографий (55.5%)
• Как сохранить всю информацию из профилей Facebook (55.5%)
• Продвинутый поиск в Гугл (RANDOM — 50.7%)

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

Источник: hackware.ru

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

Любая страница в интернете — это по сути HTML-код, который по-другому называют «исходный код».

В нём можно посмотреть некоторую полезную информацию для SEO. Например, как прописаны теги и метатеги, вроде title, description и Last-Modified, установлены ли счётчики аналитики и многое другое. Посмотреть код можно и с компьютера, и с телефона.

Покажем, как вызвать код страницы и как найти любой элемент в коде.

Что такое исходный код страницы и зачем его смотреть

Код страницы — это структура тегов, в которой зашифрованы все видимые и невидимые элементы контента: тексты, изображения, счётчики, скрипты и т. д.

HTML-код сайта выглядит так:

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

Как посмотреть код сайта с компьютера

Покажем на примере самых популярных браузеров: Google Chrome, Яндекс.Браузер, Apple Safari, Microsoft Edge, Mozilla Firefox, Opera. Но принцип одинаковый во всех браузерах.

Google Chrome

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

• на Windows — Ctrl + U;
• на Mac — Cmd (⌘) + Option (⌥) + U.

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

Откроется новая вкладка с кодом.

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

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

Более быстрые способы сделать то же самое:

• с помощью горячих клавиш Ctrl + Shift + I на Windows, Cmd (⌘) + Option (⌥) + I на Mac;
• правой кнопки мыши, кликнув «Просмотреть код».

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

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

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

В обоих случаях код откроется в отдельной вкладке. Также код можно посмотреть с помощью горячих клавиш Ctrl + U.

Чтобы открыть код в той же вкладке, что и просматриваемая страница, вместо «Посмотреть код страницы» нужно выбрать пункт «Инструменты разработчика» или нажать Ctrl + Shift + I на Windows, Cmd (⌘) + Option (⌥) + I на Mac, как и в Chrome.

Apple Safari

Для просмотра кода в Safari необходимо сначала войти в «Настройки» браузера, кликнув по надписи Safari в верхнем левом углу экрана.

Затем в открывшемся окне выбрать раздел «Дополнительно» и поставить галочку напротив «Показывать меню «Разработка» в строке меню» в нижней части окна:

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

Код откроется в нижней части страницы:

Microsoft Edge

Просмотреть код в Microsoft Edge можно с помощью правой кнопки мыши → команда «Просмотреть исходный код»:

Код откроется в новой вкладке. Можно и с помощью горячих клавиш Ctrl + U.

Также его можно посмотреть через меню браузера. Для этого нужно в правом верхнем углу кликнуть на три горизонтальные точки и выбрать команду «Другие инструменты» → «Средства разработчика»:

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

Горячие клавиши здесь тоже работают: Ctrl + Shift + I на Windows, Cmd (⌘) + Option (⌥) + I на Mac.

Mozilla Firefox

Код открывается в отдельной вкладке с помощью правой кнопкой мыши по команде «Исходный код страницы»:

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

А можно и просто нажать горячие клавиши Ctrl + U — это работает во всех браузерах.

Инструменты разработчика здесь тоже можно открыть горячими клавишами Ctrl + Shift + I на Windows, Cmd (⌘) + Option (⌥) + I на Mac или кликнув правой кнопкой мыши и выбрав пункт «Исследовать»:

Панель откроется снизу или справа на странице.

Opera

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

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

То же самое можно сделать сочетанием клавиш Ctrl + U.

Чтобы открыть инструменты разработчика, в этом же меню можно выбрать «Проверить код элемента» или нажать комбинацию горячих клавиш Ctrl + Shift + I на Windows, Cmd (⌘) + Option (⌥) + I на Mac.

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

Способы отличаются в зависимости от операционной системы телефона.

Android

Открыть код элемента на телефоне можно с помощью команды view-source, которую необходимо добавить перед URL в адресную строку:

view-source:https://site.ru/page-1

Во вкладке откроется исходный код страницы:

Открыть инструменты разработчика подобным способом не получится. Если это необходимо, установите специальные приложения. Например, VT View Source.

iOS

На iPhone ни в Safari, ни в Google Chrome по команде «view-source:» код не откроется. Необходимо установить специальные приложения для просмотра кода. Например, HTML Viewer Q или iSource Browser.

iSource Browser — полноценный браузер для iOS, с помощью которого можно просматривать HTML-код страниц:

Как найти любой элемент в коде

Чтобы найти что угодно в открытом исходном коде, откройте поиск по странице. Обычно это можно сделать сочетанием клавиш Ctrl + F или через меню браузера и команду «Найти…» или «Найти на странице…»:

В открывшемся окошке введите начало фразы или тег, который хотите найти. Например, viewport:

Найденный элемент браузер выделит цветом.

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

335 0 Поделиться в соцсетях:
Оставьте свой комментарий
Чтобы оставить комментарий, авторизуйтесь

Топвизор-Журнал в Телеграм

Читайте важные новости и полезные статьи первыми Подписаться

Советуем почитать

Как бесплатно проверять позиции в Топвизоре с помощью Яндекс.XML

Проверки позиций в Топвизоре платные. Но у нас есть способ проверять позиции бесплатно, о котором мало кто знает.

Команда Топвизора Секреты Топвизора 02.02.2021 6154 3

Как структура и каннибализация влияют на позиции сайта

Подробный кейс агентства Art Promo. Расскажем, как мы поднимали сайт склада хранения личных вещей с 26 места на 4 в Яндексе.

Art Promo Личный опыт 17.05.2021 4246 11

Как ускорить выход молодого интернет-магазина из «песочницы» Google

В совете про то, что такое «песочница» Google, почему под фильтр попадают молодые сайты и как это исправить.

Источник: journal.topvisor.com

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

Часто возникают ситуации, когда необходимо проанализировать содержимое веб-страницы: посмотреть description, узнать размер какого-то элемента или просто выяснить, какой используется шрифт. С помощью опции «Просмотреть код» можно узнать не только это, но и многое другое – практически всю подноготную сайта.

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

Зачем мне нужен исходный код сайта?

Думаете, если вы не программист или верстальщик, то код вам вряд ли понадобится? На самом деле, он может помочь в разных ситуациях. Код может быть полезен:

• SEO-специалистам. Не всегда есть возможность проанализировать страницу и узнать, есть ли с ней какие-либо проблемы. Например, чтобы узнать Description страницы, можно не пользоваться специальными плагинами и прочими средствами – достаточно открыть исходный код, и описание будет перед глазами. Аналогичным образом можно посмотреть заголовок страницы, узнать, подключена ли Яндекс.Метрика и другие скрипты.
• Для более глубокого анализа конкурентов. Посмотреть, какими способами продвигается сайт, мы можем через код: ключевые слова, мета-теги и прочее – все это доступно для обычного пользователя.
• Веб-дизайнерам. Речь снова идет о конкуренции, но и не только. Когда дизайнер создает свой сайт, он часто обращается к различным ресурсам, чтобы посмотреть, как расположены те или иные элементы. Все это мы можем узнать на любом сайте: какой отступ у этой кнопки, какого она размера, сколько пикселей та фотография и так далее.
• Для лучшего понимания кода. Изучив основы HTML-кода и CSS-стилей, вы сможете понять, как работает ваш верстальщик и какие элементы следует оптимизировать.

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

Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей

Как узнать код сайта

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

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

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

Способ 1: Функция «Посмотреть код»

Открываем страницу, код которой нужно просмотреть, и кликаем по любой области правой кнопкой мыши. В отобразившемся меню выбираем «Посмотреть код». Также вы можете воспользоваться комбинацией клавиш «CTRL+SHIFT+I».

В результате мы попадаем в инспектор браузера – на экране появляется дополнительное окно, где сверху находится код страницы, а снизу – CSS-стили.

Обратите внимание на то, что запуск инструмента разработчика выполнялся в Google Chrome. В другом браузере название кнопки запуска может отличаться.

Способ 2: «Просмотр кода страницы»

Если в предыдущем случае мы могли открыть всю подноготную сайта, то сейчас нам будет доступен лишь HTML-код. Чтобы его посмотреть, находим на сайте пустое поле и кликаем по нему правой кнопкой мыши, затем выбираем «Просмотр кода страницы» (можно воспользоваться комбинацией клавиш «CTRL+U»). Если вы кликните правой кнопкой по элементу сайта, то кнопка «Просмотр кода страницы» будет отсутствовать.

После этого нас перенаправит на новую страницу со всем исходным кодом:

Здесь мы также можем посмотреть все содержимое страницы, однако узнать CSS и изменить данные у нас не получится.

Что такое HTML и CSS

HTML – это язык гипертекстовой разметки, выступающий в качестве строительного материала страницы. С его помощью создается основной контент – текстовая часть, изображения, различные блоки и прочее. Все это заполняется с помощью тегов, специальных команд для браузера, которые вводятся пользователем в специальном файле с расширением .html. Синтаксис выглядит следующим образом:

Например, часто используется такая конструкция:

Это мой первый сайт!

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

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

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

Рассмотрим на небольшом примере, как работают стили:

1. Допустим, у нас есть HTML-тег с текстом «Привет! Это мой первый сайт»:
2. Мы хотим, чтобы текст стал другого цвета. Давайте сделаем его красным! Для этого используются каскадные стили (CSS), в данном случае достаточно для тега body прописать стиль «color: red;». В результате текстовый элемент преобразится, а информацию о его стилях мы можем посмотреть в инспекторе браузера:

Каждый сайт, который вы встречаете, использует связку HTML и CSS. Стоит упомянуть, что еще есть язык программирования JavaScript, который позволяет оживлять страницу. Например, он может активировать формы обратной связи, создать сложную анимацию, установить всплывающие окна и многое другое. Обычным пользователям разбираться в нем не нужно от слова совсем. Если вы собираетесь вести аналитику сайта или просто интересуетесь его содержимым, то в знаниях JavaScript нет никакой необходимости.

Как я могу использовать код

Выше мы рассмотрели лишь основные моменты, связанные с кодом сайта – научились просматривать его и узнали, что такое HTML и CSS. Теперь давайте применим полученные знания на практике – посмотрим, как всем этим пользоваться.

Вариант 1: Редактирование контента

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

Например, доступна возможность изменять содержимое текста – для этого достаточно выбрать нужный текст, кликнуть по нему правой кнопкой мыши и перейти в «Посмотреть код». После этого перед нами отобразится инспектор с выделенным текстом.

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

Чтобы отменить внесенные изменения, достаточно воспользоваться клавишей «F5» – страница будет обновлена, а весь контент станет исходным.

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

Вариант 2: Скачивание картинок

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

1. Выбираем картинку, которую нужно скачать, кликаем по ней правой кнопкой мыши и переходим в «Посмотреть код». После это перед нами откроется инспектор браузера с выделенным тегом – в нем нас интересует значение «src». Там содержится ссылка на картинку, которую нужно скопировать и вставить в браузер.
2. Мы попадаем в окно с необходимым изображением в полном размере. Чтобы его скачать, достаточно кликнуть правой кнопкой мыши и выбрать «Сохранить картинку как…».

Аналогичным образом мы можем выгрузить и фоновое изображение, но его стоит искать через CSS-стили в атрибуте background.

Вариант 3: Просмотр SEO-элементов

С помощью кода можно посмотреть основные SEO-теги. Сделать это можно следующим образом:

1. Открываем страницу, которую нужно проанализировать, и кликаем по пустой области правой кнопкой мыши. Затем выбираем «Просмотр кода страницы».
2. Далее нас перенаправляет на страницу с кодом – здесь мы можем найти такие элементы, как H1, Description, Title и другие. Для удобства рекомендую использовать поиск по странице, который запускается с помощью комбинации клавиш «CTRL+F».

Подобные элементы можно посмотреть и через инспектор кода.

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

Функционал мобильных браузеров сильно ограничен – посмотреть код сайт через инспектор мы не можем. Доступен только вариант с отображением всего HTML-кода страницы. Чтобы им воспользоваться, необходимо перед ссылкой прописать «view-source:». Например, для https://timeweb.com/ru это будет выглядеть так:

view-source:https://timeweb.com/ru

Если нужны расширенные возможности для устройства на Android, то можно поискать специальные приложения, например, VT View Source.

Заключение

• Просматривать и читать исходный код страницы может каждый, и для этого не нужно обладать навыками программирования.
• Код страницы состоит из HTML-элементов и CSS-стилей, изучить которые может любой пользователь.
• Базовые знания позволят изучить SEO-элементы сайта, выгрузить из него картинки, посмотреть используемые элементы и узнать много другой полезной информации.

Источник: timeweb.com