Просматривая бесчисленное множество сайтов в интернете, можно встретить такие, которые очень нам нравятся. Сразу же возникает ряд вопросов. Сайт сделан с помощью самописного кода или какой-нибудь CMS? Какие у него CSS стили? Какие у него мета-теги? И так далее.
Существует много инструментов, с помощью которых можно извлечь информацию о коде страницы сайта. Но под рукой у нас всегда есть правая кнопка мыши. Её-то мы и будем использовать, на примере моего сайта.
Как просмотреть код страницы?
Чтобы посмотреть исходный код страницы сайта, нужно навести курсор мыши на любую область веб-страницы (за исключением изображений и ссылок). После этого нажать на правую кнопку мыши. Перед нами откроется окно с несколькими опциями (в разных браузерах они могут немного отличаться). В браузере Google Chrome, например, это команды:
- назад;
- вперёд;
- перезагрузить;
- сохранить как;
- печать;
- перевести на русский;
- просмотр кода страницы
;
- просмотреть код.
Нам нужно кликнуть на просмотр кода страницы
, и перед нами откроется html код страницы сайта.
Просмотр кода страницы: на что обратить внимание?
Итак, Html код страницы представляет собой пронумерованный список строк, каждая из которых несёт информацию о том, как сделан данный сайт. Чтобы быстрей научиться разбираться в этом огромном количестве знаков и специальных символов, нужно различать разные участки кода.
Например, строки кода, находящиеся в внутри тега head содержат информацию для поисковых машин и веб-мастеров. Они не выводятся на сайт. Здесь можно увидеть, по каким ключевым словам продвигается эта страница, как написаны её title и description. Также здесь можно встретить ссылку, перейдя по которой узнаем о семействе google шрифтов, используемых на сайте.
Если сайт сделан на CMS WordPress или Joomla, то это также будет видно здесь. Например, в этой области выводится информация о теме WordPress или шаблоне Joomla сайта. Увидеть её можно, прочитав содержание ссылок, выделенных синим цветом. В одной ссылке виден шаблон сайта.
Например:
//fonts.googleapis.com/css?family=Source+Sans+Pro%3A400%2C400italic%2C600&ver=4.5.3
Мы увидим CSS стили шрифтов страницы. В данном случае используется шрифт. Это видно здесь – font-family: ‘Source Sans Pro’.
Данный сайт оптимизируется с помощью сео-плагина Yoast SEO. Это видно из этого закомментированного участка кода:
This site is optimized with the Yoast SEO plugin v3.4.2 — https://yoast.com/wordpress/plugins/seo/
Вся информация, находящаяся внутри тега body, выводится браузером на экране монитора. Здесь мы видим html код страницы, а в самом низу находится код скрипта Яндекс метрики. Он облечён закомментированным тегом с текстом:
/Yandex.Metrika counter
Подводим итоги
Проведя довольно поверхностный анализ кода главной страницы сайта, можно сделать вывод о том, с помощью каких инструментов сделана эта страница. Мы увидели на ней:
- CMS WordPress;
- Google шрифт Source Sans Pro;
- тема WordPress – Sydney;
- плагины Yoast;
- счётчик Яндекс метрики.
Теперь принцип анализа html кода страницы сайта вполне понятен. Совсем необязательно держать исследуемую страницу открытой в браузере. Сохранить код страницы себе на компьютер можно с помощью комбинаций клавиш ctrl+a, ctrl+c, ctrl+v. Вставьте её в любой текстовый редактор (лучше Notepad++) и сохраните с расширением html. Таким образом, вы в любое время сможете изучить её глубже и найти больше полезной для себя информации.
Под всеми красивыми изображениями, совершенной типографией, и чудесно размещенными призывами к действию, расположен исходный код вашего сайта.
Ежедневно, этот код ваш браузер превращает во впечатляющие страницы для ваших посетителей и клиентов.
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="/life-hacks-for-pc/statistika-zaprosov-po-klyuchevym-slovam-servis-podbora-slov-v-yandekse-chto.html">ключевые слова</a> и теги заголовков играют важную роль в <a href="/computers/referat-arhitektura-mikroprocessora---struktura-i-obshchaya.html">общей архитектуре</a> вашего сайта.</p>
<p>Вот некоторые важные пункты, которые позволят вам помнить о важности ваших Тег заголовков:</p>
<ul><li>Убедитесь, что у вас есть только один тег заголовка на веб-страницу.</li>
<li>Убедитесь в том, что каждая веб-страница на сайте имеет свой тег заголовок.</li>
<li>Убедитесь, что каждый тег заголовок на сайте уникален. Никогда не дублируйте контент определенного тега заголовка.</li>
</ul><h3></h3>
<p>Следующий важный элемент головной части вашей веб-страницы является мета-тег описания.
</p>
<p>Это фрагмент вашего контента из 160 символов, который отображается под вашим заголовком в поисковых системах.
</p>
<p><img src='https://i2.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://i1.wp.com/infobiz-tools.com/wp-content/uploads/2014/02/how-read1.png' width="100%" loading=lazy></p>
<p>Таким образом, проверьте и убедитесь, что этот тег присутствует на всех веб-страницах вашего сайта. Что еще более важно, убедитесь, что вы не дублируете его на нескольких страницах.</p>
<p>Дублирование мета-тег описания не пинальти для <a href="/iron/kakaya-samaya-luchshaya-poiskovaya-sistema-poiskovye-sistemy-rossii-i.html">поисковой системы</a>, но это очень большая маркетинговая ошибка.</p>
<p>Многие игнорируют мета тег описания, но вы действительно должны поработать в этом направлении, потому что он считывается поисковой системой.</p>
<p>Подумайте о том, что мета-тег описания будет помощью привлечь больше посетителей и увеличить целевые переходы на сайт.</p>
<ul><p>Думаю что никак, может быть будучи опытным хакером кто-то и занимается тем что меняет HTML-код на чужой странице и тем самым получает доступ к ней, а вот <a href="/life-hacks/zakonoposlushnyi-polzovatel-seti-zachem-dobavlyat-neznakomyh-lyudei.html">законопослушным пользователям</a> это сделать совсем не просто, да и не стоит в общем.</p>
<p><b>HTML-код страницы ВКонтакте
</b> изменить можно.</p>
<p>Но вс дело в том, что загрузить изменнную Web-страницу на хостинг вы не сможете - у вас же нет никакого доступа к ftp.</p>
<p>А так, можно нажать комбинацию <b>Ctrl + U
</b> (Опция Просмотр кода страницы). Откроется код страницы, вы можете скопировать его в любой редактор и отредактировать.</p>
<p>Также можно нажать комбинацию <b>Ctrl + S
</b> (Опция Сохранить на компьютер). Web-страница загрузится на ваш жсткий диск. При этом, помимо самой страницы, загрузятся все изображения и скрипты, которые на ней используются.</p>
<p>Советую воспользоваться удобным html-редактором Notepad++. После его установки на компьютер выбираете в контекстном меню файла пункт Edit with Notepad++ и редактируете с помощью редактора вс, что вам необходимо!</p>
<p>Многие пользуется этим для <a href="/life-hacks-for-ios/soobshchenie-na-temu-razvitie-sredstv-svyazi-sotovaya-svyaz-uslovnye-znakisredstv.html">различного рода</a> розыгрышей (подделка переписки, увеличение количество подписчиков, входящих сообщений и тд), а также и в мошеннических целях.</p><p>Сначала вы заходите на ту страничку, которую и собираетесь изменять (редактировать html - код).</p>
<p>Далее жмите на клавишу F12 или же сразу наведите курсор мышки на тот элемент, который и хотите поменять. Далее кликаете правой кнопкой мыши и в появившемся окне выбираете пункт Просмотр кода элемента.</p>
<li><ol><li>Заходим на станицу в контакте, которую и будем менять.</li>
</ol><ol><li>Нажимаем F12, наводя мышку на <a href="/ios/android-kak-menyat-razmer-granic-elementov-border-zachem-nuzhen-v-css-prozrachnyi-border.html">нужный элемент</a>, нажимаем правую кнопку мыши и выбираем просмотр кода элемента.</li>
</ol><p>Меняем правой кнопкой мыши, находим пункт <b>Edit as Html
</b>.</p>
<p><img src='https://i0.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://i1.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://i1.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="/game/chto-daet-kod-stranicy-v-vk-raspakovka-i-rasshifrovka-skriptov-javascript.html">Данный код</a> можно открыть в любом вашем <a href="/life-hacks-for-different-systems/obzor-besplatnyh-alternativnyh-tekstovyh-redaktorov-luchshie.html">текстовом редакторе</a>, а также существуют <a href="/life-hacks-wi-fi/kak-pochistit-kesh-na-androide-samsung-5-ispolzovanie.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="/life-hacks-for-smartphones/avtomaticheskii-perehod-na-stranicu-html-perenapravlenie-na-druguyu.html">страниц HTML</a>. Они динамически верстаются по шаблону из базы данных так, как это запрограммировано. Ваш браузер отправляет запрос на сервер. Там запускается <a href="/game/kak-pishutsya-skripty-na-php-kak-pisat-skripty.html">скрипт php</a> (например), который собирает необходимые данные воедино и отдат их браузеру под видом HTML. Браузер это кушает и показывает страницу, как будто бы она изначально состояла из того HTML-кода, который слепил ему скрипт.</p>
<p>Изменить HTML- код страницы в контакте просто.</p>
<p>Открываете <a href="/ios/kak-zablokirovat-svoyu-staruyu-stranicu-v-kontakte-pochemu-nelzya-srazu-i.html">нужную страницу</a>. В меню браузера ищете пункт Показать исходный код (может быть по-другому). Браузер откроет HTML код страницы. Выделяете все, копируете, вставляете в <a href="/life-hacks-for-smartphones/skachat-vse-tekstovye-dokumenty-vindovs-8-tekstovye-redaktory.html">текстовый документ</a>, и можете изменять.</p>
<p>Вот только что вам это даст? Обратно на сайт вы его не засунете. Страница на сайте останется такой же.</p>
<p>А такое разве реально? Это же чужой сайт. Как там можно изменить структуру сайта? Пологаю что ни как, если только не взломать его</p>
</ul>
<p>Эта статья - дополнение к статье про деобфускацию скриптов. Здесь будут рассмотрены основные принципы шифровки и упаковки, слабые места защит, способы ручного снятия, а также <a href="/life-hacks-for-windows/kak-pochinit-grub2-esli-ubuntu-ne-hochet-zagruzhatsya-pereustanovka-grub-na-sluchai.html">универсальные инструменты</a> для <a href="/life-hacks-for-windows/avtomaticheskoe-snyatie-skrinshotov-zapis-sostoyaniya-monitora.html">автоматического снятия</a> упаковщиков и навесной защиты со <a href="/instructions/podklyuchenie-vneshnego-faila-js-podklyuchenie-skripta-javascript.html">скриптов JavaScript</a>. В <a href="/iron/kak-ubrat-poslednee-poseshchenie-v-vk-kak-skryt-vremya.html">последнее время</a> все чаще исходный код скриптов шифруется или пакуется. Этим начали увлекаться Яндекс, DLE и другие популярные проекты, а красивые байки про "заботу о пользователях", "экономию трафика" и прочую чушь выглядят очень смешно. Что ж, если кому-то есть что скрывать, значит наша задача вывести их на чистую воду.</p><p>Начнем с теории. Из-за особенностей <a href="/internet/neobhodimo-vklyuchit-vypolnenie-javascript-v-brauzere-kak-vklyuchit.html">выполнения JavaScript</a> все шифровщики и упаковщики, несмотря на их разнообразие, имеют всего два варианта алгоритма:или как вариант:Второй способ чаще всего используется для защиты <a href="/game/kak-naiti-element-v-kode-html-kak-posmotret-ishodnyi-kod.html">исходного html-кода</a> страницы, а также разными троянами для внедрения в страницу <a href="/life-hacks-for-pc/ishchem-i-ubiraem-vredonosnyi-kod-na-wordpress-kak-udalit-virus-ili.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>Для примера возьмем какой-нибудь скрипт с Яндекса, посмотрев исходный код видим что-то нездоровое:</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="/life-hacks-for-smartphones/programmy-i-redaktory-dlya-web-razrabotki-html-reader-besplatnyi-html.html">программой HTML</a> Protector. Это страница, демонстрирующая возможности программы, поэтому там задействованы все опции: блокировка выделения и копирования текста, запрет правой кнопки мыши, защита картинок, скрытие строки состояния, шифрование 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="/life-hacks-for-windows/v-kakoi-programme-delayut-proekt-doma-besplatnye-programmy-dlya-proektirovaniya-domov.html">бесплатный проект</a> , предназначенный для исследования троянов и другого вредоносного кода. Поскольку все программы, предназначенные для защиты авторского права, являются однозначно вредоносными, Malzilla поможет нам в борьбе с ними. Качаем (на сегодняшний день это 1.2.0), распаковываем, запускаем. Открываем вторую вкладку Decoder, в верхнее окно вставляем код зашифрованного скрипта, нажимаем кнопочку <b>Run script
</b>.<p><img src='https://i2.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://i0.wp.com/manhunter.ru/upload/ac/a3/aca3d2c4d32a52d784fbb6b0bdecad0e.jpg' width="100%" loading=lazy><br></p><br>
Также можно обратить внимание на еще один <a href="/ios/kisti-fotoshop-skachat-bez-registracii-gde-skachat-kisti-dlya.html">бесплатный инструмент</a> для работы с зашифрованными скриптами - FreShow . Функций в нем поменьше, но вполне имеет место быть. С офсайта можно скачать демонстрационный ролик, показывающий пример работы с программой.<p>Как видите, нет ничего сложного в снятии защиты со скриптов JavaScript и с html-страниц. Вы все еще продолжаете защищать свои поганые "аффтарские права"? Тогда мы идем к вам!
</p>
<p>Мы выпустили <a href="/life-hacks-in-vk/kseniya-nova-kniga-sozdai-svoi-stil-intervyu-chto-takoe-periscope.html">новую книгу</a> «Контент-маркетинг в <a href="/internet/odna-iz-krupneishih-rossiiskih-socialnyh-setei-socialnye-seti---chto-eto.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://i1.wp.com/semantica.in/wp-content/uploads/2017/11/code-3.png' align="center" width="100%" loading=lazy></p>
<p>Исходный код сайта – это совокупность HTML-разметки, <a href="/instructions/obnulenie-stilei-css3-sbros-css-stilei-primery-rabotayushchih.html">CSS стилей</a> и скриптов JavaScript, которые браузер получает от веб-сервера.</p>
<p><span class="YLlDA5uz9EU"></span></p>
<p><b>Больше видео на нашем канале - изучайте интернет-маркетинг с SEMANTICA
</b></p>
<p><img src='https://i2.wp.com/semantica.in/wp-content/uploads/2017/12/yutub.png' height="37" width="178" loading=lazy></p>
<p>Его можно сравнить с набором команд, которые дает солдатам командир. Представьте, что зрители не видят и не слышат начальника. С их точки зрения военные самостоятельно выполняют действия. В нашем случае командир – это браузер, команды – это исходный код, а марширующие солдаты – это конечный результат.</p>
<p>Хранится сайт на веб-сервере, который отправляет страницу по запросу пользователя. Запрос – это ввод URL в строке адреса, щелчок по ссылке или нажатие на кнопку отправки данных в форме. Не важно, на каком языке написаны веб-страницы, включают ли они программную часть. Конечным результатом работы любого серверного алгоритма является набор 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="/reviews/7-v-desyatichnoi-sisteme-perevod-chisel-v-razlichnye-sistemy-schislenii.html">различных системах</a>, определенных скриптов и прочего.</li>
<li>Узнать параметры элементов: размеры, цвета, шрифты.</li>
<li>Найти путь к фотографиям и другим элементам, располагающимся на странице.</li>
<li>Изучить ссылки со страницы.</li>
<li>Найти проблемы с кодом, мешающие в процессе оптимизации сайта: невынесенные в <a href="/life-hacks-for-different-systems/kak-udalit-otdelnye-kuki-v-hrome-kak-chistit-otdelnye-faily-kuki-v.html">отдельные файлы</a> стили, скрипты, невалидный код.</li>
</ul><p>Это основные возможности, но на самом деле, умея читать код, вы сможете узнать о странице намного больше.</p>
<h2>Как посмотреть исходный код сайта</h2>
<p>Полностью в том виде, в каком он выложен на сервере, из браузера это сделать не удастся. А вот увидеть всю разметку можно, нажав на странице правую кнопку мыши. Здесь и далее на <a href="/life-hacks-for-smartphones/chto-takoe-google-talk-funkcii-i-primer-polzovaniya-programmoi-ne-mogu.html">примере Google</a> Chrome.</p>
<p><img src='https://i2.wp.com/semantica.in/wp-content/uploads/2018/02/09ffa0c60f.png' align="center" width="100%" loading=lazy></p>
<p>Выбираем опцию «Просмотр кода страницы» и получаем полный листинг в отдельной вкладке.</p>
<p><img src='https://i0.wp.com/semantica.in/wp-content/uploads/2018/02/11e92d1f09.png' align="center" width="100%" loading=lazy></p>
<p>Это просто текст, который придется анализировать, чтобы понять. А вот получить интерактивный код можно с помощью инструментов разработчика.</p>
<h2>Как найти исходный код страницы сайта</h2>
<p>Нажимаем на значок меню в браузере. Чаще всего он находится справа и имеет вид трех точек или полосок.</p>
<p><img src='https://i0.wp.com/semantica.in/wp-content/uploads/2018/02/712414eef9.png' align="center" width="100%" loading=lazy></p>
<p>В разделе <a href="/life-hacks-for-different-systems/kak-naiti-cheloveka-vk-bez-registracii-dopolnitelnye-instrumenty.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>Откроется окно, в котором отображается активное состояние кода. Это значит, что при щелчке мыши на разметке рядом отобразится стиль элемента, а на странице будут подсвечиваться выбранные блоки.</p>
<p><img src='https://i0.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://i0.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://i0.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://i0.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>Элементы предназначены для логического разграничения разделов на странице, при необходимости они оформляются с помощью стилей. В них размещается текст, который так или иначе виден на странице. Но в теге Head присутствует служебная информация. Для ее указания служат мета-теги. Все что в них записано, предназначено для сервера и поисковых систем.</p>
<p><img src='https://i0.wp.com/semantica.in/wp-content/uploads/2018/02/b34bb79f96.png' align="center" width="100%" loading=lazy></p>
<p>Их содержимое другим способом узнать невозможно.</p>
<p>Обратим внимание на <a href="/life-hacks-for-pc/kak-propisat-fail-css-v-html-vstavka-css-faila-pri-pomoshchi-tega-link.html">тег Link</a>. С его помощью указываются ссылки на внешние подключаемые файлы. При желании можно увидеть содержимое и сохранить на диск. Для этого наведите указатель на адрес и нажмите ПКМ. Выберите пункт «Open in new Tab».</p>
<p><img src='https://i1.wp.com/semantica.in/wp-content/uploads/2018/02/1685995ee1.png' align="center" width="100%" loading=lazy></p>
<p>В новой вкладке откроется <a href="/reviews/fail-prokachki-kakie-parametry-nado-ukazat-chto-takoe-fail-podkachki-princip.html">указанный файл</a>, который можно просмотреть или сохранить.</p>
<h2>Как посмотреть исходный код страницы для отладки скрипта</h2>
<p>В этом случае удобнее всего открывать страницу на локальной машине. Если необходимо только исправить разметку, стили и скрипты, то это можно делать прямо из папки. Html-код просматривается таким же образом. А вот ошибки <a href="/life-hacks-for-pc/pochemu-ne-poluchaetsya-zakommentirovat-kod-s-pomoshchyu-zachem-nuzhny.html">кода JavaScript</a> можно увидеть во вкладке «Console». Здесь показывает описание ошибки и номер строки, в которой она возникла.</p>
<p><img src='https://i2.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="/computers/kak-sdelat-bolshuyu-stranicu-v-odnoklassnikah-kak-uvelichit.html">больших страниц</a> с <a href="/ios/platnye-oprosy-s-bolshim-kolichestvom-anket-platnye-oprosy.html">большим количеством</a> элементов сложно найти <a href="/game/gde-naiti-ishodnyi-kod-mobilnyh-igr-deistvitelno-li-vam-nuzhen-ishodnyi.html">нужный код</a> во всей разметке. В таком случае следует воспользоваться <a href="/life-hacks/uznat-svoi-nomer-megafon-ussd-zapros-kak-uznat-svoi-nomer-megafon-s-pomoshchyu.html">специальной командой</a> <a href="/reviews/chto-takoe-kontekstnoe-menyu-windows-chto-takoe-kontekstnoe-menyu-windows-i-kak-ego.html">контекстного меню</a>. Наведем мышь на фрагмент и нажмем ПКМ. Выберем команду «Просмотреть код».</p>
<p><img src='https://i0.wp.com/semantica.in/wp-content/uploads/2018/02/296c218cf5.png' align="center" width="100%" loading=lazy></p>
<p>Откроется то же окно, но с фокусировкой на выбранном объекте.</p>
<p><img src='https://i2.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="/iron/prilozheniya-po-programmirovaniyu-udobnye-instrumenty-dlya.html">удобными инструментами</a> разработчика, вы сможете проводить отладку своих собственных html-документов.</p>
<p>Просмотр кода ресурсов в интернете позволит вам учиться не только на <a href="/program/razrushayu-mify-na-sobstvennom-opyte-realno-li-zarabotat-na.html">собственном опыте</a>, но и использовать реальные рабочие примеры. А для seo-специалистов будут полезны мета-теги, информация в которых может сказать о сайте многое.</p>
<script type="text/javascript">
<!--
var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})()
//-->
</script><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>
</article>
<div class='yarpp-related'>
<div class="related-items">
<div class="headline">Рекомендуем другие статьи</div>
<div class="items">
<div class="item">
<a href="/life-hacks-for-ios/pochemu-planshet-ne-vyklyuchaetsya-chto-delat-zavis-planshet---chto-delat-vozmozhnye.html" class="item__link">
<img src="/uploads/5ee684d277379108d1f4344cff82eff8.jpg" width="220" height="170" alt="Завис планшет - что делать?" class="item__image" / loading=lazy> <div class="item__title">Завис планшет - что делать?</div>
</a>
</div>
<div class="item">
<a href="/program/videonablyudenie-cherez-usb-kameru-besprovodnaya-usb-kamera-kupit.html" class="item__link">
<img src="/uploads/3f09108ee4d11616ceb00f11bc74ca44.jpg" width="220" height="170" alt="Беспроводная USB камера купить беспроводную мини камеру компьютера Цифровая камера с usb выходом" class="item__image" / loading=lazy> <div class="item__title">Беспроводная USB камера купить беспроводную мини камеру компьютера Цифровая камера с usb выходом</div>
</a>
</div>
<div class="item">
<a href="/life-hacks-for-pc/sem-putei-voiti-v-svoi-lichnyi-kabinet-stoloto-russkoe-loto-obman.html" class="item__link">
<img src="/uploads/ccac20ebebb67804653425f1f60b922d.jpg" width="220" height="170" alt="Столото, Русское лото – обман?" class="item__image" / loading=lazy> <div class="item__title">Столото, Русское лото – обман?</div>
</a>
</div>
</div>
</div>
</div>
</main>
<aside class="sidebar">
<div class="section">
<div class="section__headline">Самое популярное</div>
<div class="sidebar-items">
<a class="sidebar-item" href="/internet/v-chem-smysl-maininga-kak-rabotaet-maining-kriptovalyuty-process.html">
<img src="/uploads/e7ccb6fbe0cf024cedb045c511cf5fad.jpg" width="75" height="75" alt="Как работает майнинг криптовалюты Процесс майнинга криптовалют" class="sidebar-item__image" / loading=lazy> <div class="sidebar-item__title">Как работает майнинг криптовалюты Процесс майнинга криптовалют</div>
</a>
<a class="sidebar-item" href="/game/professiya-programmist-dlya-detei-konspekt-zanyatiya-v-detskom.html">
<img src="/uploads/9d0201b81adc610408d4507ccf6f9186.jpg" width="75" height="75" alt="Конспект занятия в детском саду «Программист – великий волшебник" class="sidebar-item__image" / loading=lazy> <div class="sidebar-item__title">Конспект занятия в детском саду «Программист – великий волшебник</div>
</a>
<a class="sidebar-item" href="/life-hacks-for-ios/aliekspress-prosit-ukazat-proverochnyi-kod-pri-vhode-chto.html">
<img src="/uploads/85f99bb622febba2f51f6ce46c571a8f.jpg" width="75" height="75" alt="Как пройти проверку при входе в аккаунт на Алиэкспресс?" class="sidebar-item__image" / loading=lazy> <div class="sidebar-item__title">Как пройти проверку при входе в аккаунт на Алиэкспресс?</div>
</a>
<a class="sidebar-item" href="/game/otklyuchenie-uslugi-mobilnye-podpiski-kak-uznat-kakie-platnye.html">
<img src="/uploads/ce520cb58283add55341e217e52bd195.jpg" width="75" height="75" alt="Как узнать какие платные подписки от мегафон подключены и как их отключить" class="sidebar-item__image" / loading=lazy> <div class="sidebar-item__title">Как узнать какие платные подписки от мегафон подключены и как их отключить</div>
</a>
<a class="sidebar-item" href="/program/otklyuchaem-parkovku-golovok-na-zhestkih-diskah-western-digital-reshaem-problemu-s.html">
<img src="/uploads/3da81beaafb8a415d987e8678dfc6fbd.jpg" width="75" height="75" alt="Решаем проблему с периодическими подвисаниями игр на пол секунды, секунду" class="sidebar-item__image" / loading=lazy> <div class="sidebar-item__title">Решаем проблему с периодическими подвисаниями игр на пол секунды, секунду</div>
</a>
<a class="sidebar-item" href="/life-hacks-for-windows/kak-sohranit-otkrytye-vkladki-v-mozile-sovety-i-rekomendacii.html">
<img src="/uploads/4b51b28f901cb7b02778c39349e9ede8.jpg" width="75" height="75" alt="Последние открытые вкладки при запуске Mozilla Firefox Как сохранить вкладки после закрытия" class="sidebar-item__image" / loading=lazy> <div class="sidebar-item__title">Последние открытые вкладки при запуске Mozilla Firefox Как сохранить вкладки после закрытия</div>
</a>
</div>
</div>
<script>
// <![CDATA[
$(document).ready(function() {
var floatsidebar = $("#float-sidebar");
var offset = floatsidebar.offset();
var left = offset.left;
var top = offset.top;
var width = $("#float-sidebar").width();
var height = $("#float-sidebar").height();
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
if (scrollTop >= top) {
$('#float-sidebar').css({
left: left + 'px',
position: 'fixed',
top: "50px",
width: width + "px"
});
} else {
$('#float-sidebar').css({
position: 'static',
});
}
});
});
// ]]>
</script>
<div id="float-sidebar">
<div id="laqybe1" style="height:500px;width:270px;" align="center"></div>
</div>
</aside>
</div>
<footer class="footer">
<div class="footer-left">
<div class="footer__logo">
<div class="footer__logo-sitename">radiobud.ru</div>
</div>
<div class="footer__copyright">
<p>© 2024 - radiobud.ru<br /></p>
<p>Обзоры, лайфхаки, игры, программы</p>
</div>
<nav class="footer__nav-1">
<ul>
<li class="menu-item type-post_type object-page "><a href="/sitemap.xml">Карта сайта</a></li>
</ul>
</nav>
</div>
<nav class="footer__nav-2"><ul>
<li class="menu-item type-taxonomy object-category "><a href="/feedback.html">Контакты</a></li>
<li class="menu-item type-taxonomy object-category "><a href="">Реклама</a></li>
<li class="menu-item type-taxonomy object-category "><a href="">О сайте</a></li>
</ul></nav>
<div class="footer__counters">
</div>
<div class="footer__note"></div>
</footer>
</div>
</div>
<script type='text/javascript' src='https://radiobud.ru/wp-content/themes/radiobud.ru/js/scripts.js'></script>
<script type='text/javascript' src='/wp-includes/js/comment-reply.min.js?ver=4.9.1'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var tocplus = { "smooth_scroll":"1","visibility_show":"\u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c","visibility_hide":"\u0421\u043a\u0440\u044b\u0442\u044c","width":"Auto"} ;
/* ]]> */
</script>
<script type='text/javascript' src='https://radiobud.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script>
<script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.9.1'></script>
<script async="async" type='text/javascript' src='https://radiobud.ru/wp-content/plugins/akismet/_inc/form.js?ver=4.0.2'></script>
</body>
</html>
