Номер телефона

Последнее обновление:

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

Как посмотреть исходный код веб-страницы? Например, при помощи псевдопротокола view-source:

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

В браузерах Firefox

Например, именно так будет обстоять дело в браузерах Firefox. Правда, у них есть некоторые нюансы. Если браузер поновее, то исходный код откроется в соседней вкладке браузера (при этом данная вкладка, разумеется, вначале будет открыта браузером). А вот если браузер постарше, например, Firefox 20…30…40, то исходный код откроется в отдельном окне «упрощенного» браузера, которое обладает минимальным набором функций – достаточных лишь для просмотра исходного кода, ну, и для копирования оттуда всего кода или его части.

А как открыть исходный код вебстраницы программно в Firefox?

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

view-source:

Этот псевдопротокол указывается перед самым начало URL веб-страницы, исходный код которой необходимо посмотреть. Например, вот так будет выглядеть содержимое адресной строки браузера Firefox (URL) при просмотре исходного кода главной страницы нашего сайта:

view-source:http://www.dissertacii-diplom-ufa.ru/index.html

Обратите внимание: псевдопротокол view-source ставится ПЕРЕД протоколом, по которому открывается вебстраница (например, http или https). Этот способ работает в Firefox. В других браузерах, возможно, следует использовать какие-то иные способы просмотра исходного кода программным образом. И вот что получится:

Как видно, фактический URL страницы http://www.dissertacii-diplom-ufa.ru/index.html, изменился т.е. псевдопротокол в адресной строке браузера отображается. Однако, во всплывающей подсказке так и фигурирует прежний URL.

После этого исходный код вебстраницы можно, например, редактировать. Некоторые браузеры позволяют это делать сами. А если говорить о Firefox до версии примерно 50…52, а это Firefox, основанные на модели XUL, то для них можно использовать специальный плагин под названием Page Hacker. Кстати, очень удобный. После чего, нажав заданную комбинацию клавиш, можно перевести страницу в редактируемое состояние.

Этот плагин, на самом деле, всего-навсего добавляет атрибут contenteditable=”true” к тегу body html-страницы. И после этого она становится редактируемой:

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

Теперь его можно редактировать по своему усмотрению. Ну, и потом. к примеру, сохранить на жесткий диск компьютера (нажав Файл -> Сохранить как). Или просто выделив код (частично или полностью) и скопировать его в буфер обмена, затем вставить в тот или иной (текстовый) документ.

Программный просмотр html-кода веб-страницы очень полезен при работе с ним средствами javascript

Знатоки javascript могут возразить: есть же, мол, например, свойство innerHTML. Равно как и outerHTML. Которые позволяют взять полностью, например, содержимое тегов body, head и т.д. – вплоть до комментариев. За исключением, быть может, DOCTYPE.

Все верно, да не совсем. Ибо взятие исходного кода при помощи псевдопротокола view-source: и при помощи outerHTML (или innerHTML) – это две существенные разницы. Потому что:

  1. При использовании outerHTML (или innerHTML) браузер вначале пропарсит html-код страницы, после чего построит ее DOM. А это означает, что он, в том числе, самостоятельно закроет незакрытые теги, а также исправит иные некорректные места в html-коде, насколько это в его силах. И только потом уже отдаст его в виде outerHTML или innerHTML.
  2. Тогда как при использовании псевдопротокола view-source исходный код будет выдан браузером в состоянии как есть, т.е. без коррекции неправильного html-кода.

И тут все зависит от того, для каких целей необходим исходный код страницы. Если для работы с DOM – то тогда лучше пользоваться, в самом деле, outerHTML или innerHTML. А вот если для обработки текста исходного кода БЕЗ ИСПОЛЬЗОВАНИЯ DOM – вот тогда view-source будет просто незаменимым. В частности, это поможет тогда, когда html-код вебстраницы является некорректным, содержащим ошибки. Ведь нынче это – не такая уж и редкость на сайтах. Далеко не все вебразработчики утруждают себя проверкой выполненной ими верстки на валидаторе.

При этом браузер, в процессе создания DOM, будет пытаться как-то по-своему обрабатывать некорректные места html-кода. Как он их обработает, что получится в итоге – зависит от конкретного браузера. Тогда как работа просто с текстом исходного кода страницы, без использования DOM (а, значит, и без браузерной «самостоятельности») даст разработчику возможность реализовать какие-то свои технологии по парсингу и обработке html. Например, это может быть крайне полезным при создании собственных визуальных html-редакторов (WYSIWYG). Для иллюстрации, «испортим» html-код страницы – например, в 3, 6 и 8 строчках. Т.е. сделаем его заведомо некорректным. И вот что увидим:

Во-первых, весь исходный код заключен в теги <pre>…</pre>. Во-вторых, все теги, которые присутствуют в исходном коде, теперь сами заключены еще в теги <span>…</span>. Т.е. теперь с исходным кодом веб-страницы можно и в самом деле делать все, что угодно. Так как теперь это – лишь текст и не более того. DOM из этого исходного кода браузер уже не создает.

А как потом отобразить этот исходный код в обычном виде в окне браузера?

Т.е. в том виде, который придает ему браузер после анализа и построения DOM. Несложно. Как раз для подобных целей служит оператор eval(). Злоупотреблять им не стоит, но вот для подобных ситуаций он как раз и предназначен.


Комментарии:
Всего комментариев:0
Пожалуйста, не забудьте ознакомиться с правилами оставления комментариев.



Подписаться на комментарии на этой странице

Мы можем выполнить

Другие услуги
Интересная и полезная
информация
НАПИШИТЕ НАМ
Яндекс.Метрика
Номер телефона
© Copyright Все права защищены 2013-2022 Научный консалтинг