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

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

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

Следовательно, очень большое значение для поисковой оптимизации (SEO) имеет то, что находится в исходном коде.

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

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

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

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

Ниже перечислены клавиатурные команды для просмотра исходного кода вашей веб-страницы для PC и Mac .

  • Firefox — CTRL + U (Удерживая нажатой клавишу CTRL, нажмите клавишу»U») Кроме того, вы можете пойти в меню «Firefox», затем нажмите » Web Developer «, а затем» Исходный код страницы «.
  • Internet Explorer — CTRL + U. Или щелкните правой кнопкой мыши и выберите пункт «View Source».
  • Хром — CTRL + U. Вы можете нажать на изображение ключа с тремя горизонтальными линиями в правом верхнем углу. Затем нажмите на «Инструменты» и выберите «View Source».
  • Опера — CTRL + U. Вы также можете щелкнуть правой кнопкой на веб-странице и выбрать «Просмотр исходного кода страницы.»

Макинтош

  • Safari — сочетание клавиш Option + Command + U. Вы также можете щелкнуть правой кнопкой на веб-странице и выберите «Показать Page Source».
  • Firefox — Вы можете щелкнуть правой кнопкой и выберите пункт «исходный текст» или вы можете перемещаться в меню «Сервис», выберите «Web Developer», и нажмите «Page Source.» Сочетание клавиш Ctrl + U.
  • Хром — Перейдите в «Вид», затем нажмите «разработчик», а затем «View Source». Вы также можете щелкнуть правой кнопкой и выберать пункт «Просмотр исходного кода страницы.» Сочетание клавиш Option + Command + U.

После того, как вы знаете, как просмотреть исходный код, вы должны знать, как осуществить поиск в нем.

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

Команды, CTRL + F (найти) поможет Вам быстро просмотреть исходный код важных элементов SEO.

Теги заголовков.

Тег заголовка является самым главным элементом SEO. Это самое главное в исходном коде.

Если вы собираетесь взять одну лишь ценную вещь из этой статьи, обратите внимание на это:

Вы знаете, эти результаты Google предоставляет, когда вы ищете что-то.

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

Верите или нет, я на самом деле видел веб-сайты без тегов заголовков. Давайте попробуем сделать быстрый поиск в Google для термина «Marketing Guides «. Что мы видим:

Вы можете видеть, первый результат поиска для блога KISSmetrics раздел Marketing Guides .

Если мы перейдем по ссылке первого результата поиска и просмотрим исходный код страницы, то можно увидеть в заголовке тег:

Тег заголовка обозначается открывающим тегом: </b>. и заканчивается закрывающим тегом: <b></ <i>title </i>> </b>. Тег заголовка, расположен как правило, в верхней части исходного кода в разделе <b><head> </b>. </i></p> <p>И мы видим, что содержание внутри тега заголовка соответствует тому, что используется в заголовке результата поиска Google.</p> <p>Но не только теги заголовков необходимы для того чтобы быть включенными в результаты поиска Google.</p> <p>Google еще и идентифицирует слова в тегах заголовков в качестве важных ключевых слов, которые, по его мнению актуальны для поиска пользователей.</p> <p>Так что если вы хотите получить определенное ранжирование веб-страницы для конкретной темы, то вам лучше убедиться, что слова, которые описывают предмет включены в тег заголовок. </p> <p>Существует <a href="/markirovki-mogut-byt-raznymi-esli-k-nei-vydvigaetsya-celyi-ryad-vazhnyh.html">целый ряд</a> онлайновых ресурсов, где вы можете узнать больше о том, как <a href="/generator-domenov-onlain-po-klyuchevym-slovam-podbiraem-domen-s-klyuchevym-slovom.html">ключевые слова</a> и теги заголовков играют важную роль в <a href="/masshtabiruemye-veb-arhitektury-ispolzovanie-obshchei-failovoi.html">общей архитектуре</a> вашего сайта.</p> <p>Вот некоторые важные пункты, которые позволят вам помнить о важности ваших Тег заголовков:</p> <ul><li>Убедитесь, что у вас есть только один тег заголовка на веб-страницу.</li> <li>Убедитесь в том, что каждая веб-страница на сайте имеет свой тег заголовок.</li> <li>Убедитесь, что каждый тег заголовок на сайте уникален. Никогда не дублируйте контент определенного тега заголовка.</li> </ul><h3></h3> <p>Следующий <a href="/chto-takoe-heshtegi-v-instagrame-kak-ih-pravilno-stavit-i-dlya-chego-oni-nuzhny.html">важный элемент</a> головной части вашей веб-страницы является мета-тег описания. </p> <p>Это фрагмент вашего контента из 160 символов, который отображается под вашим заголовком в поисковых системах. </p> <p><img src='https://i1.wp.com/infobiz-tools.com/wp-content/uploads/2014/02/read-website.png' height="511" width="500" loading=lazy></p> <p>Я видел сотни сайтов, которые полностью игнорируют этот тег. </span><span>Его очень легко найти в исходном коде: </p> <p><img src='https://i2.wp.com/infobiz-tools.com/wp-content/uploads/2014/02/how-read1.png' width="100%" loading=lazy></p> <p>Таким образом, проверьте и убедитесь, что этот тег присутствует на всех веб-страницах вашего сайта. Что еще более важно, убедитесь, что вы не дублируете его на нескольких страницах.</p> <p>Дублирование мета-тег описания не пинальти для <a href="/naznachenie-i-osnovnye-vozmozhnosti-poiskovyh-sistem-poiskovye-sistemy-chto.html">поисковой системы</a>, но это очень большая маркетинговая ошибка.</p> <p>Многие игнорируют мета тег описания, но вы действительно должны поработать в этом направлении, потому что он считывается поисковой системой.</p> <p>Подумайте о том, что мета-тег описания будет помощью привлечь больше посетителей и увеличить целевые переходы на сайт.</p> <ul><p>Думаю что никак, может быть будучи опытным хакером кто-то и занимается тем что меняет HTML-код на чужой странице и тем самым получает доступ к ней, а вот законопослушным пользователям это сделать совсем не просто, да и не стоит в общем.</p> <p><b>HTML-код страницы ВКонтакте </b> изменить можно.</p> <p>Но вс дело в том, что загрузить изменнную Web-страницу на хостинг вы не сможете - у вас же нет никакого доступа к ftp.</p> <p>А так, можно нажать комбинацию <b>Ctrl + U </b> (Опция Просмотр кода страницы). Откроется код страницы, вы можете скопировать его в любой редактор и отредактировать.</p> <p>Также можно нажать комбинацию <b>Ctrl + S </b> (Опция Сохранить на компьютер). Web-страница загрузится на ваш жсткий диск. При этом, помимо самой страницы, загрузятся все изображения и скрипты, которые на ней используются.</p> <p>Советую воспользоваться <a href="/udobnyi-redaktor-html-neskolko-stranic-besplatnyi-onlain-html.html">удобным html-редактором</a> Notepad++. После его установки на компьютер выбираете в контекстном меню файла пункт Edit with Notepad++ и редактируете с помощью редактора вс, что вам необходимо!</p> <p>Многие пользуется этим для различного рода розыгрышей (подделка переписки, увеличение количество подписчиков, входящих сообщений и тд), а также и в мошеннических целях.</p><p>Сначала вы заходите на ту страничку, которую и собираетесь изменять (редактировать html - код).</p> <p>Далее жмите на клавишу F12 или же сразу наведите курсор мышки на тот элемент, который и хотите поменять. Далее кликаете правой кнопкой мыши и в появившемся окне выбираете пункт Просмотр кода элемента.</p> <li><ol><li>Заходим на станицу в контакте, которую и будем менять.</li> </ol><ol><li>Нажимаем F12, наводя мышку на нужный элемент, нажимаем правую кнопку мыши и выбираем просмотр кода элемента.</li> </ol><p>Меняем правой кнопкой мыши, находим пункт <b>Edit as Html </b>.</p> <p><img src='https://i1.wp.com/info-4all.ru/images/b1921e66d37530e8a6efb4c800dfe829.jpg' width="100%" loading=lazy></p> <p>На скриине видно, что изменилась аватарка.</p> <ol><li>Меняем имя.</li> </ol><p><img src='https://i2.wp.com/info-4all.ru/images/c967300214e00ba6f128af59bc5c7cd9.jpg' width="100%" loading=lazy></p> <p><img src='https://i0.wp.com/info-4all.ru/images/b178ae42285f3f592916be150f5ac305.jpg' width="100%" loading=lazy></p> <p><img src='https://i1.wp.com/info-4all.ru/images/6f98dc6f8e07bbea5070ca6908393e83.jpg' width="100%" loading=lazy></p> <p>Результат.</p> <p><img src='https://i0.wp.com/info-4all.ru/images/b5873665d90cd67279e98e701150bfaf.jpg' width="100%" loading=lazy></p></li> <p>Вы не сможете изменить html-код Вконтакте на самом хостинге Вк, пока менеджер компании не устроит вас программистом.</p> <p>Но вы можете просмотреть код страницы и скопировать его в редактор Wordepad, откуда и будете редактировать html. Для этого нажмите в браузере правой кнопкой мыши и нажмите Просмотр кода страницы.</p> <p><b>HTML код </b> это самый главный язык разметки для разных документов.Все файлы,которые написаны кодом HTML имеют свое расширение такое как-.html или же.htm .<a href="/obmen-dannymi-s-ispolzovaniem-mpi-rabota-s-bibliotekoi-mpi-na.html">Данный код</a> можно открыть в любом вашем <a href="/skachat-tekstovyi-redaktor-na-russkom-obzor-besplatnyh.html">текстовом редакторе</a>, а также существуют <a href="/kak-poluchit-specialnye-prilozhenie-vkontakte-kak-zarabotat.html">специальные приложения</a> для веб-мастеров.</p> <p><img src='https://i1.wp.com/info-4all.ru/images/e969c343f0d8883abc73d9327bcd0747.jpg' width="100%" loading=lazy></p> <p>В браузере нужно перейти туда,где вы хотите исправить код,потом нужно открыть код нужной вам страницы для просмотра. Для этого нужно выбрать пункт меню в браузере.</p> <p>А потом уже можно его отредактировать в редакторе.</p> <p>Код открыли, а он не редактируется.</p> <p>Правильно вы его его видите в режиме просмотра.</p> <p>А вот чтобы редактировать нужно совсем немного, логин и пароль к доступу на правах администратора сайта Вконтакте - но где ж вы его возьмете?</p> <p>Открыть исходный код страницы вы, конечно, сможете. И даже отредактировать его. Но сохранить его на сервер не получится. Только на собственный компьютер.</p> <p>Более того. Подобные сайты не состоят из <a href="/kak-sozdat-html-stranicu-primer-sozdaniya-html-stranicy-v.html">страниц HTML</a>. Они динамически верстаются по шаблону из базы данных так, как это запрограммировано. Ваш браузер отправляет запрос на сервер. Там запускается <a href="/php-skript-dlya-raboty-s-mysql-osnovy-raboty-s-mysql-v-php-svyaz-php-s-bazoi-dannyh.html">скрипт php</a> (например), который собирает необходимые данные воедино и отдат их браузеру под видом HTML. Браузер это кушает и показывает страницу, как будто бы она изначально состояла из того HTML-кода, который слепил ему скрипт.</p> <p>Изменить HTML- код страницы в контакте просто.</p> <p>Открываете <a href="/kak-uznat-aidi-stranicy-vk-kak-uznat-id-stranicy-v-vk-razlichnymi.html">нужную страницу</a>. В меню браузера ищете пункт Показать исходный код (может быть по-другому). Браузер откроет HTML код страницы. Выделяете все, копируете, вставляете в <a href="/tekstovoi-dokument-luchshie-tekstovye-redaktory-dlya-windows-luchshie-tekstovye.html">текстовый документ</a>, и можете изменять.</p> <p>Вот только что вам это даст? Обратно на сайт вы его не засунете. Страница на сайте останется такой же.</p> <p>А такое разве реально? Это же чужой сайт. Как там можно изменить структуру сайта? Пологаю что ни как, если только не взломать его</p> </ul> <p>Как изменить код элемента на сайте — для начала нужно узнать в каком файле находится этот код. Есть много способов, но опишу один, наиболее мне приглянувшийся и который использую сам.</p> <p>Вы можете увидеть код нужного элемента нажав правой кнопкой мыши и исследовать его или посмотреть исходный код страницы. Во всех браузерах аналогичный способ, для каждого существуют определённые дополнения, осуществляющие эти процессы.</p> <p>Каждому что-то удобно или нет — этот вопрос обсуждать не будем. Наша задача — найти файл с расположенным кодом.</p> <h2>Как найти файл:</h2> <p>Я использую <a href="/prostoi-failovyi-menedzher-dlya-android-reiting-failovyh-menedzherov.html">файловый менеджер</a> <a href="/prosmotr-kartinok-total-commander-plaginy-dlya-total-commander-plagin-cloud-dlya.html">Total Commander</a>. Нахожу это очень удобным методом.</p> <p>Итак, например мы нашли элемент, подсветив его в браузере и увидели, что он заключен в <<span>div <span>class =»wpb_wrapper « </span>> </p> <p>Для начала лучше скопировать папку с вашим сайтом с сервера и расположить её в удобном месте, рабочий стол к примеру.</p> <p>Копируем <<span>div <span>class =»wpb_wrapper « </span>> </span> и открываем Commander. Выбираем инструменты — поиск</p> <p>Место поиска — выбираете ранее сохранённую папку с сайтом. Ставите галочку с текстом и вводите искомый <div> или что вам нужно.</p> <p>Программа выдаст расположение всех файлов, в которых он присутствует. Как изменить код сайта — вы уже знаете какой файл нужно редактировать.</p> <p>Если на сервере нет редактора — меняете на компьютере и загружаете по FTP.</p> <p>Экспериментируйте, сокращайте или увеличивайте запрос — найдётся всё, но не стоит искать динамически подгружаемые данные. Естественно они не покажутся.</p> <p>Также с помощью браузера изменяются и стили. Подсветили, увидели номер строки, открыли файл стилей и ввели <a href="/zachem-nuzhny-kvadratnye-skobki-znachenie-slova-skobki-v-slovare.html">нужное значение</a>. Успехов!</p> <p>Мы выпустили новую книгу «Контент-маркетинг в <a href="/obshchenie-v-soc-setyah-psihologiya-spiski-socialnyh-setei-spisok-russkoyazychnyh-socialnyh-setei-soci.html">социальных сетях</a>: Как засесть в голову подписчиков и влюбить их в свой бренд».</p> <form onsubmit="return false;" class="innerContentSubscribe_form swpmc-js-form" data-container=".innerContentSubscribe" data-on-success="swptEvents.blogSubscribeSuccess()"> <p> <input class="inputText js-placeholder" type="text" name="email" id="innerContentSubscribeEmail" value=""></p> <p>Подписаться</p> </form> <p><img src='https://i0.wp.com/semantica.in/wp-content/uploads/2017/11/code-3.png' align="center" width="100%" loading=lazy></p> <p>Исходный код сайта – это совокупность HTML-разметки, <a href="/kak-izmenit-cvet-teksta-podskazki-v-placeholder-s-pomoshchyu-stilei-css.html">CSS стилей</a> и <a href="/javascript-skripty-podklyuchenie-skripta-javascript-skachat-gotovyi-kod.html">скриптов JavaScript</a>, которые браузер получает от веб-сервера.</p> <p><span class="YLlDA5uz9EU"></span></p> <p><b>Больше видео на нашем канале - изучайте интернет-маркетинг с SEMANTICA </b></p> <p><img src='https://i0.wp.com/semantica.in/wp-content/uploads/2017/12/yutub.png' height="37" width="178" loading=lazy></p> <p>Его можно сравнить с набором команд, которые дает солдатам командир. Представьте, что зрители не видят и не слышат начальника. С их точки зрения военные самостоятельно выполняют действия. В нашем случае командир – это браузер, команды – это исходный код, а марширующие солдаты – это конечный результат.</p> <p>Хранится сайт на веб-сервере, который отправляет страницу по запросу пользователя. Запрос – это ввод URL в строке адреса, щелчок по ссылке или нажатие на кнопку отправки данных в форме. Не важно, на каком языке написаны веб-страницы, включают ли они <a href="/programmnaya-chast-kompyutera-programmnoe-obespechenie.html">программную часть</a>. Конечным результатом работы любого серверного алгоритма является набор html-тегов и текста.<br> Исходный код страницы – это набор данных, включающий в себя:</p> <ul><li>html-разметку;</li> <li>стилевую таблицу или ссылку на файл ;</li> <li>программы, написанные на JavaScript или ссылки на файлы с кодом.</li> </ul><p>Эти три раздела обрабатываются браузером. Для сервера это просто текст, который необходимо отправить в ответ на запрос.</p> <h2>Зачем нам может понадобиться изучать исходный код</h2> <p>Все, что мы увидим, мы сможем проанализировать и применить для решения тех или иных задач, которые возникают в ходе работы с сайтом, особенно при его оптимизации. Просмотрев исходный код, мы можем:</p> <ul><li>Увидеть мета-теги своего или чужого сайта для их анализа.</li> <li>Увидеть наличие или отсутствие некоторых элементов на сайте: счетчиков, кодов идентификации в <a href="/evolyuciya-operacionnyh-sistem-kompyuterov-razlichnyh-tipov.html">различных системах</a>, определенных скриптов и прочего.</li> <li>Узнать параметры элементов: размеры, цвета, шрифты.</li> <li>Найти путь к фотографиям и другим элементам, располагающимся на странице.</li> <li>Изучить ссылки со страницы.</li> <li>Найти проблемы с кодом, мешающие в процессе оптимизации сайта: невынесенные в <a href="/defragmentaciya-otdelnyh-papok-optimizaciya-dostupa-k-failam-i-papkam.html">отдельные файлы</a> стили, скрипты, невалидный код.</li> </ul><p>Это основные возможности, но на самом деле, умея читать код, вы сможете узнать о странице намного больше.</p> <h2>Как посмотреть исходный код сайта</h2> <p>Полностью в том виде, в каком он выложен на сервере, из браузера это сделать не удастся. А вот увидеть всю разметку можно, нажав на странице правую кнопку мыши. Здесь и далее на <a href="/kriterii-poiska-informacii-v-internete-kto-ishchet-tot-naidet-sekrety.html">примере Google</a> Chrome.</p> <p><img src='https://i1.wp.com/semantica.in/wp-content/uploads/2018/02/09ffa0c60f.png' align="center" width="100%" loading=lazy></p> <p>Выбираем опцию «Просмотр кода страницы» и получаем полный листинг в отдельной вкладке.</p> <p><img src='https://i1.wp.com/semantica.in/wp-content/uploads/2018/02/11e92d1f09.png' align="center" width="100%" loading=lazy></p> <p>Это просто текст, который придется анализировать, чтобы понять. А вот получить <a href="/kak-rabotaet-v-html5-canvas-primery-risovaniya-kodom-html5-canvas---interaktivnye.html">интерактивный код</a> можно с помощью инструментов разработчика.</p> <h2>Как найти исходный код страницы сайта</h2> <p>Нажимаем на значок меню в браузере. Чаще всего он находится справа и имеет вид трех точек или полосок.</p> <p><img src='https://i1.wp.com/semantica.in/wp-content/uploads/2018/02/712414eef9.png' align="center" width="100%" loading=lazy></p> <p>В разделе <a href="/ustanovka-antivirusa-kasperskogo-polnoe-udalenie.html">дополнительных инструментов</a> выбираем «Инструменты разработчика».</p> <p><img src='https://i0.wp.com/semantica.in/wp-content/uploads/2018/02/48cb60e66c.png' align="center" width="100%" loading=lazy></p> <p>Откроется окно, в котором отображается <a href="/kak-perezapustit-process-zavershenie-aktivnyh-processov-poluchit-sostoyanie.html">активное состояние</a> кода. Это значит, что при щелчке мыши на разметке рядом отобразится стиль элемента, а на странице будут подсвечиваться выбранные блоки.</p> <p><img src='https://i1.wp.com/semantica.in/wp-content/uploads/2018/02/b5c5367f08.png' align="center" width="100%" loading=lazy></p> <p>Во вкладке «Source» можно просмотреть содержимое некоторых файлов: скрипты, шрифты, изображения.</p> <p><img src='https://i1.wp.com/semantica.in/wp-content/uploads/2018/02/8fb9f8a3b8.png' align="center" width="100%" loading=lazy></p> <p><img src='https://i1.wp.com/semantica.in/wp-content/uploads/2018/02/3bab1ab266.png' align="center" width="100%" loading=lazy></p> <p>Во вкладке «Security» доступна проверка сертификата сайта.</p> <p><img src='https://i1.wp.com/semantica.in/wp-content/uploads/2018/02/6d29a11c3b.png' align="center" width="100%" loading=lazy></p> <p>Вкладка «Audits» поможет провести проверку выложенного на хостинг ресурса.</p> <p><img src='https://i0.wp.com/semantica.in/wp-content/uploads/2018/02/1330f57b87.png' align="center" width="100%" loading=lazy></p> <p>Если расположение панели справа неудобно, можно нажать три точки и поменять его, выбрав желаемый пункт.</p> <p><img src='https://i1.wp.com/semantica.in/wp-content/uploads/2018/02/7a0e8305f4.png' align="center" width="100%" loading=lazy></p> <h2>Как посмотреть мета-теги</h2> <p>Каждый html-документ включает в себя теги структуры. Вот некоторые из них:</p> <ol><li>Html – весь документ.</li> <li><span>Head – раздел служебных заголовков. </span></li> <li><span>Title – заголовок страницы (отображается на вкладке). </span></li> <li><span>Body – тело документа. </span></li> <li><span>H1-H6 – заголовки текста страницы. </span></li> <li>Article – статья. </li> <li>Section – раздел. </li> <li>Menu – меню. </li> <li>Div – блок. </li> <li>Span – строка. </li> <li>P – абзац. </li> <li>Table – таблица. </li> </ol><p>Элементы предназначены для логического разграничения разделов на странице, при необходимости они оформляются с помощью стилей. В них размещается текст, который так или иначе виден на странице. Но в <a href="/za-chto-otvechaet-teg-head-chto-soderzhitsya-v.html">теге Head</a> присутствует служебная информация. Для ее указания служат мета-теги. Все что в них записано, предназначено для сервера и поисковых систем.</p> <p><img src='https://i2.wp.com/semantica.in/wp-content/uploads/2018/02/b34bb79f96.png' align="center" width="100%" loading=lazy></p> <p>Их содержимое другим способом узнать невозможно.</p> <p>Обратим внимание на тег Link. С его помощью указываются ссылки на внешние подключаемые файлы. При желании можно увидеть содержимое и сохранить на диск. Для этого наведите указатель на адрес и нажмите ПКМ. Выберите пункт «Open in new Tab».</p> <p><img src='https://i2.wp.com/semantica.in/wp-content/uploads/2018/02/1685995ee1.png' align="center" width="100%" loading=lazy></p> <p>В новой вкладке откроется <a href="/kak-razarhivirovat-fail-rar-na-kompyuter-kak-razarhivirovat-fail-winrar-chto-takoe-rar-fail-ras.html">указанный файл</a>, который можно просмотреть или сохранить.</p> <h2>Как посмотреть исходный код страницы для отладки скрипта</h2> <p>В этом случае удобнее всего открывать страницу на <a href="/rsync-kopirovanie-na-udalennyi-server-ckorostnaya-sinhronizaciya-milliarda.html">локальной машине</a>. Если необходимо только исправить разметку, стили и скрипты, то это можно делать прямо из папки. Html-код просматривается таким же образом. А вот ошибки <a href="/prosteishie-skripty-html-podklyuchenie-skripta-javascript-skachat-gotovyi.html">кода JavaScript</a> можно увидеть во вкладке «Console». Здесь показывает описание ошибки и номер строки, в которой она возникла.</p> <p><img src='https://i0.wp.com/semantica.in/wp-content/uploads/2018/02/990abb1c76.png' align="center" width="100%" loading=lazy></p> <p>Синтаксическую можно увидеть непосредственно в коде. Для этого предназначена вкладка «Source».</p> <p><img src='https://i2.wp.com/semantica.in/wp-content/uploads/2018/02/0961303a76.png' align="center" width="100%" loading=lazy></p> <h2>Как посмотреть код конкретного элемента</h2> <p>Для больших страниц с <a href="/partnerskaya-set-cpa-luchshe-partnerskie-cpa-seti-s-bolshim-kolichestvom-offerov-na.html">большим количеством</a> элементов сложно найти <a href="/chto-takoe-qr-kod-dlya-chego-nuzhen-qr-kod-chto-takoe-qr-kod-i-kak-pravilno-im.html">нужный код</a> во всей разметке. В таком случае следует воспользоваться <a href="/prazdnichnyi-portal-bilain-kak-otklyuchit-platnye-uslugi-na-bilain-otklyuchenie.html">специальной командой</a> <a href="/kak-vyzvat-na-ekran-kontekstnoe-menyu-obekta-kak-otkryt-kontekstnoe-menyu-s.html">контекстного меню</a>. Наведем мышь на фрагмент и нажмем ПКМ. Выберем команду «Просмотреть код».</p> <p><img src='https://i2.wp.com/semantica.in/wp-content/uploads/2018/02/296c218cf5.png' align="center" width="100%" loading=lazy></p> <p>Откроется то же окно, но с фокусировкой на выбранном объекте.</p> <p><img src='https://i1.wp.com/semantica.in/wp-content/uploads/2018/02/2eb093fc23.png' align="center" width="100%" loading=lazy></p> <h2>Резюме</h2> <p>Мы рассказали, что такое исходный код страницы. Достаточно освоить элементарные знания HTML и CSS, и пользуясь <a href="/kak-sozdat-programmu-na-kompyuter-udobnye-instrumenty-dlya.html">удобными инструментами</a> разработчика, вы сможете проводить отладку своих собственных html-документов.</p> <p>Просмотр кода ресурсов в интернете позволит вам учиться не только на собственном опыте, но и использовать реальные рабочие примеры. А для seo-специалистов будут полезны мета-теги, информация в которых может сказать о сайте многое.</p> <p>Эта статья - дополнение к статье про деобфускацию скриптов. Здесь будут рассмотрены основные принципы шифровки и упаковки, <a href="/xp-ekstremalnoe-programmirovanie-na-praktike-chastye-nebolshie.html">слабые места</a> защит, способы ручного снятия, а также <a href="/programma-dlya-perenosa-s-androida-na-kak-perenesti-dannye-s-androida-na-android.html">универсальные инструменты</a> для <a href="/unchecky-chto-eto-za-programma-i-nuzhna-li-ona-programma-unchecky.html">автоматического снятия</a> упаковщиков и навесной защиты со скриптов JavaScript. В <a href="/pochemu-vkontakte-ne-otobrazhaetsya-vremya-kak-skryt-vremya.html">последнее время</a> все чаще исходный код скриптов шифруется или пакуется. Этим начали увлекаться Яндекс, DLE и другие популярные проекты, а красивые байки про "заботу о пользователях", "экономию трафика" и прочую чушь выглядят очень смешно. Что ж, если кому-то есть что скрывать, значит наша задача вывести их на чистую воду.</p><p>Начнем с теории. Из-за особенностей <a href="/nastroika-i-ispolzovanie-veb-brauzera-microsoft-internet-explorer.html">выполнения JavaScript</a> все шифровщики и упаковщики, несмотря на их разнообразие, имеют всего два варианта алгоритма:или как вариант:Второй способ чаще всего используется для защиты <a href="/kak-kode-stranicy-naiti-kod-kak-prosmotret-ishodnyh-kod-html-stranicy-v.html">исходного html-кода</a> страницы, а также разными троянами для внедрения в страницу <a href="/vindovs-7-zhret-operativku-chto-delat-putevoditel-po-internetu---vse-samoe.html">вредоносного кода</a>, например скрытого фрейма. Оба алгоритма могут комбинироваться, "навороченность" и запутанность расшифровщика может быть любой, неизменным остается только сам принцип.</p><p>В обеих случаях получается, что функциям <b>eval() </b> и <b>document.write() </b> передаются полностью расшифрованные данные. Как их перехватить? Попробуйте заменить <b>eval() </b> на <b>alert() </b>, и в открывшемся MessageBox"е вы сразу увидите расшифрованный текст. Некоторые браузеры позволяют копировать текст из MessageBox"ов, но лучше воспользоваться таким вот полуавтоматическим декодером:</p><ol><li> <span>< html > </span></li> <li> <span>< head >< title > JavaScript Decoder </ title ></ head > </span></li> <li> <span>< body > </span></li> <li> <span>< script type = "text/javascript" > </span></li> <li><span>// Функция записи в лог результатов расшифровки </span></li> <li> <span>function decoder (str ) { </span></li> <li> <span> document . getElementById ("decoded" ). value += str + "\n" ; </span></li> <li> <span></script> </span></li> <li> <span><!-- Окно лога --> </span></li> <li> <span>< textarea id = "decoded" style = "width:900px; height:500px;" ></ textarea > </span></li> <li> <span>< script type = "text/javascript" > </span></li> <li> <span></script> </span></li> <li> <span></ body > </span></li> <li> <span></ html > </span></li> </ol><p>Для <a href="/poslovicy-pogovorki-luchshe-sinica-v-ruke-chem-chto-znachit-sinica-v-rukah-chto.html">примера возьмем</a> какой-нибудь скрипт с Яндекса, посмотрев исходный код видим что-то нездоровое:</p><p>Eval(function(p,a,c,k,e,r){e=function(c){return(c<a?"":e(parseInt(<br> c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!<br> "".replace(/^/,String)){while(c--)r=k[c]||e(c);k=}];e=function(){return"\w+"};c=1};while(c--)if(k[c])<br> p=p.replace(new RegExp("\b"+e(c)+"\b","g"),k[c]);return p}("$.1e<br> .18=8(j){3 k=j["6-9"]||"#6-9";3 l=j["6-L"]||".u-L";3 m=j["6-L-17"]<br> ||"";3 n=j["1d"]||0;$(5).2(".6-9").14("7");$(5).2(".6-9").Z("7",8(<br>){3 a=$(5).x();3 o=$(5).x();3 h=$(5).B("C");$(5).v("g-4");$(5).16(<br> $(k).q());3 t=$(o).2("15");3 c=$(o).2(".b-r");3 d=$(o).2(".b-12");<br> [остальной такой же бред отрезан]</p><p>Сразу скажу, что этот скрипт обработан JavaScript Compressor , его легко узнать по сигнатуре - характерному названию фукнции в начале скрипта. Копируем целиком исходный текст скрипта, заменяем первый <b>eval </b> на <b>decoder </b>, вставляем в декодер и сохраняем его как html-страничку.Открываем ее в любом браузере и видим, что в textarea сразу появился распакованный скрипт. Радоваться пока рано, в нем убраны все переносы строчек и форматирование кода. Как с этим бороться написано в статье про деобфускацию .</p><p>Второй пример. Вот html-страничка , накрытая <a href="/otkryt-fail-html-skachat-programmu-kak-otkryt-fail-html-prosteishie.html">программой HTML</a> Protector. Это страница, демонстрирующая возможности программы, поэтому там задействованы все опции: блокировка выделения и копирования текста, запрет <a href="/zachem-nuzhna-pravaya-knopka-myshi-peretaskivanie-failov-pri.html">правой кнопки</a> мыши, защита картинок, скрытие строки состояния, шифрование html-кода и т.д. Открываем исходный код, смотрим. В самом верху уже знакомый нам document.write и зашифрованный скрипт. Запускаем его через декодер, получаем функцию расшифровки основного содержимого:</p><p>Code (JavaScript) :</p> <ol><li> <span>hp_ok = true ;function hp_d01 (s ){ ... вырезано ... o = ar . join ("" )+ os ; document . write (o ) </span></li> </ol><p>Заменяем в функции последний document.write на decoder и вставляем после нее все три оставшихся зашифрованных скрипта:</p><ol><li> <span>< script type = "text/javascript" > </span></li> <li><span>// Сюда вставить зашифрованный скрипт, предварительно </span></li> <li><span>// заменить в нем все вызовы eval() и document.write() на decoder(). </span></li> <li> <span>hp_ok = true ;function hp_d01 (s ){ .... o = ar . join ("" )+ os ; decoder (o ); </span></li> <li> <span>hp_d01 (unescape (">QAPKRV%22NCLEWC .... </span></li> <li> <span>hp_d01 (unescape (<span>">QAPKRV%22NCLEWCEG? HctcQa ... </span></li> <li> <span>hp_d01 (unescape (<span>">`mf{%22`eamnmp? !DDDDDD %22v ... </span></li> <li> <span></script> </span></li> </ol><p>Для удобства в статье скрипты приводятся не полностью, вы же должны копировать их целиком. Открываем декодер в браузере и видим защитные скрипты, добавленные программой, и расшифрованный исходный текст страницы. Для удобства можно расшифровывать только третий скрипт, в котором содержится html-код страницы. Вот и вся защита. Как видите, ничего сложного. Аналогично снимаются и другие защиты html-страниц.</p><p>От ручной расшифровки перейдем к автоматической. Для снятия защит первого типа я немного модифицировал уже известный вам скрипт Beautify Javascript и откомпилировал его в exe-файл. Он без проблем справляется с большинством виденных мной защит и упаковщиков JavaScript.</p><p>Eval.JavaScript.Unpacker.1.1-PCL.rar (12,124 bytes)<br class="clean"></p><br> Для более <a href="/delat-popolnil-ne-tot-nomer-esli-u-vas-bolee-slozhnyi-sluchai.html">сложных случаев</a> придется пускать в ход тяжелую артиллерию. Это <a href="/microsoft-project-pyat-oblachnyh-alternativ-besplatnye-programmy-dlya-upravleniya.html">бесплатный проект</a> , предназначенный для исследования троянов и другого вредоносного кода. Поскольку все программы, предназначенные для защиты авторского права, являются однозначно вредоносными, Malzilla поможет нам в борьбе с ними. Качаем (на сегодняшний день это 1.2.0), распаковываем, запускаем. Открываем вторую вкладку Decoder, в верхнее окно вставляем код зашифрованного скрипта, нажимаем кнопочку <b>Run script </b>.<p><img src='https://i0.wp.com/manhunter.ru/upload/1a/87/1a870b5012697202749e9805fa585605.jpg' width="100%" loading=lazy><br></p><br> В папке <b>eval_temp </b> складываются все результаты выполнения функций eval(), в том числе и промежуточные. Их можно посмотреть, нажав на кнопку <b>Show eval() results </b>, текст откроется в нижнем окне. Его можно скопировать, вставить в верхнее окно и сразу же отформатировать нажатием кнопки <b>Format code </b>. Кроме декодера Malzilla имеет еще множество инструментов и настроек, позволяющих легко снять любую защиту со скриптов JavaScript.<p><img src='https://i1.wp.com/manhunter.ru/upload/ac/a3/aca3d2c4d32a52d784fbb6b0bdecad0e.jpg' width="100%" loading=lazy><br></p><br> Также можно обратить внимание на еще один <a href="/besplatnye-programmy-dlya-windows-skachat-besplatno-pravilnyi.html">бесплатный инструмент</a> для работы с зашифрованными скриптами - FreShow . Функций в нем поменьше, но вполне имеет место быть. С офсайта можно скачать демонстрационный ролик, показывающий пример работы с программой.<p>Как видите, нет ничего сложного в снятии защиты со скриптов JavaScript и с html-страниц. Вы все еще продолжаете защищать свои поганые "аффтарские права"? Тогда мы идем к вам! </p> <br> <br> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy>");</script> </div> </div> <dblock></dblock> <dblock></dblock> <dblock></dblock> <dblock></dblock> </article> </div> </div> <div id="sidebar"> <aside> <div class="inner"> <div> <div class="xyz_wrapper"> <div> </div> </div> <div> </div> </div> </div> </aside> </div> </div> </div> <script type="text/javascript" src="/assets/like.js"></script> </main> <div id="slide-menu"> <div id="slide-menu"> <div class="menu-content"> <div class="slide-menu-close" id="slide-menu-close" title="Закрыть"></div> <dblock></dblock> <ul> <li><span class="link" onclick="go('/category/beeline/')"><i class=""></i> Beeline</span></li> <li><span class="link" onclick="go('/category/internet/')"><i class=""></i> Интернет</span></li> <li><span class="link" onclick="go('/category/tele2/')"><i class=""></i> Tele2</span></li> <li><span class="link" onclick="go('/category/useful/')"><i class=""></i> Полезное</span></li> <li><span class="link" onclick="go('/category/ip-telephony/')"><i class=""></i> IP-Телефония</span></li> <li><span class="link" onclick="go('/category/iota/')"><i class=""></i> Йота</span></li> <li><span class="link" onclick="go('/category/mts/')"><i class=""></i> Mts</span></li> <li><span class="link" onclick="go('/category/megafon/')"><i class=""></i> Megafon</span></li> </ul> <ul> <li><a href="/feedback.html">Контакты</a></li> <li><a href="">Реклама</a></li> <li><a href="">О сайте</a></li> </ul> </div> </div> </div> <div id="slide-search"> <div class="search-content"> <div class="search-form-close" id="slide-search-close" title="Закрыть"></div> <div class="search-form-header"><img src="/assets/vsadu-icon-gray.svg" alt="Портал о мобильных операторах" onerror="this.src='/ui/vsadu-icon-gray.png'" style="height: 45px" loading=lazy> Поиск</div> <form style="position: relative" action="/search" method="get" autocomplete="off"> <input type="text" class="m-seach-field" name="q" placeholder="поиск по сайту" value="" /> <div> <dblock></dblock> </div> <div class="desktop_screen" style="position: absolute;right: 9px;top: 9px;"> <input type="submit" class="button yellow big" value="Найти" /> </div> </form> </div> </div> <script type="text/javascript" src="/assets/slide-menu.3.js"></script> <script type="text/javascript" src="/assets/sticky.min.js"></script> <script type="text/javascript" src="/assets/jquery.lazyload.min.js"></script> <script type="text/javascript" src="/assets/jquery-ui.min.js"></script> <script type="text/javascript" src="/assets/JsHttpRequest.js"></script> <script type="text/javascript" src="/assets/Request.js"></script> <div class="white_section"> <div> <div class="desktop_screen" style="padding: 15px 0;background:#f6f8f2;"> <dblock></dblock> </div> </div> </div> <footer> <div class="footer"> <dblock></dblock> <div class="silver_section"> <div class="content"><div class="inner"> <div class="section group" style="text-align: center"> <div class="col span_1_of_3"> <div style="font-size: 16px; vertical-align: middle; line-height: 45px;"><i class="fa fa-envelope-o"></i> cena5.ru - Портал о мобильных операторах</div> </div> <div class="col span_1_of_3"> </div> <div class="col span_1_of_3"> <a target="_blank" href="https://connect.ok.ru/offer?url=https://cena5.ru/rasshifrovka-koda-stranicy-vkontakte-raspakovka-i-rasshifrovka-skriptov-javascript.html"><img class="soc" alt="Портал о мобильных операторах Одноклассники" src="/assets/ok.svg" onerror="this.src='/ui/icons/ok.png'" loading=lazy></a> <a target="_blank" href="https://vk.com/share.php?url=https://cena5.ru/rasshifrovka-koda-stranicy-vkontakte-raspakovka-i-rasshifrovka-skriptov-javascript.html"><img class="soc" alt="Портал о мобильных операторах ВКонтакте" src="/assets/vk.svg" onerror="this.src='/ui/icons/vk.png'" loading=lazy></a> <a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://cena5.ru/rasshifrovka-koda-stranicy-vkontakte-raspakovka-i-rasshifrovka-skriptov-javascript.html"><img class="soc" alt="Портал о мобильных операторах Facebook" src="/assets/fb.svg" onerror="this.src='/ui/icons/fb.png'" loading=lazy></a> <a target="_blank" href="https://www.twitter.com/share?url=https://cena5.ru/rasshifrovka-koda-stranicy-vkontakte-raspakovka-i-rasshifrovka-skriptov-javascript.html"><img class="soc" alt="Портал о мобильных операторах Twitter" src="/assets/tw.svg" onerror="this.src='/ui/icons/tw.png'" loading=lazy></a> <a target="_blank" href=""><img class="soc" alt="Портал о мобильных операторах Google+" src="/assets/g+.svg" onerror="this.src='/ui/icons/g+.png'" loading=lazy></a> <a target="_blank" href=""><img class="soc" alt="Портал о мобильных операторах Pinterest" src="/assets/pin.svg" onerror="this.src='/ui/icons/pin.png'" loading=lazy></a> <div class="soc-caption">Портал о мобильных операторах в социальных сетях</div> </div> </div> </div></div> </div> <div class="content desktop_screen" style="overflow: inherit; margin-top: 20px"><div class="inner"> <div class="section group"> <div class="col span_2_of_5"> <div class="share-widget"> <script src="https://yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script> <script src="https://yastatic.net/share2/share.js" async="async"></script> <div class="ya-share2" data-services="collections,vkontakte,gplus,odnoklassniki,facebook,moimir,twitter,pinterest,lj,viber,whatsapp,pocket" data-url="https://cena5.ru" data-counter="true" data-limit="6"></div> </div> </div> <div class="col span_3_of_5" style="text-align: center;"> <a class="section_link" href="/feedback.html">Контакты</a> <a class="section_link" href="" style="color: #ff4500 !important;">Реклама</a> <a class="section_link" href="">Вакансии</a> <script> document.write('<a class="section_link" href="mailto:info' + '@cena5.ru">Написать нам</a>') </script> </div> </div> </div> </div> <dblock></dblock> <div class="content"> <div class="inner"> <p style="margin: 20px 0">Copyright © «cena5.ru» 2024 Копирование и видоизменение материалов сайта возможно только после письменного согласия правообладателей. <br /> Статьи защищены законом об авторских и смежных правах, при цитирование материалов проекта «cena5.ru» <span style="text-decoration: underline">прямая открытая ссылка</span> на <strong>cena5.ru</strong> обязательна. <br /> Все права защищены.</p> <dblock></dblock> </div> </div> </div> </footer> <script src="/assets/init.3.js"></script> <div class="push-popup"> <img src="/assets/vsadu-icon.png" style="float: left; margin-right: 10px; margin-bottom: 70px" / loading=lazy> Мы можем оповещать вас о новых статьях,<br /> чтобы вы всегда были в курсе самого интересного. <br /><br /> <button class="button blue uppercase push-button" style="margin-bottom: 10px">Продолжить</button> <button class="button blue-text uppercase push-cancel" style="margin-bottom: 10px">Нет, спасибо</button> </div> <script src="/assets/init.1.js"></script> <div id="p-b"> </div> <style> #yinfo-badge .yinfo-links, #yinfo-badge .yinfo-report { display: none !important } ::shadow .yinfo-links, ::shadow .yinfo-report { display: none !important } </style> <div class="page-top-button wide_desktop_screen hidden"> <div class="page-top-sec"> <a href="/" title="Главная Портал о мобильных операторах"><i class="fa fa-home gray" style="font-size: 32px"></i></a> </div> <div class="page-top-sec"> <a href="" title="О сайте"><i class="fa fa-calendar green" style="font-size: 32px"></i></a> </div> <div class="page-top-sec"> <a title="Связаться с нами" href="/feedback.html"><i class="fa fa fa-commenting-o" style="font-size: 32px; color:#ff4500"></i></a> </div> </div> </body> </html>