Как посмотреть исходный код страницы и что это такое. А так же узнаем некоторые приемы работы с исходником в некоторых браузерах, а так же рассмотрим расширение для Mozilla Firefox. Теперь все по порядку
Что такое исходный код страницы
Это HTML код, который считывает ваш браузер и преобразовывает в ту визуальную версию страницы, которую видит пользователь
Самый простейший код странички для браузера выглядит так
Code
<html>
<head>Это верхняя часть странички
<title>Это заголовок странички и то что отображается в заголовке вашего браузера</title>
</head>
<body>
Вот тут находится содержимое и текст
</body>
</html>
Для пользователя все это будет выглядеть как белая страница с текстом Вот тут находится содержимое и текст Это самая примитивная структура, на самом деле современные сайты со стороны исходника выглядят намного сложнее
view-source и приемы работы с ним в браузерах
view-source Это команда, с помощью которой в браузерах Mozilla Firefox и Google Chrome можно вызвать просмотр кода страницы. Команда встроена в настройки всех остальных браузеров, но в Mozilla Firefox и Google Chrome можно воспользоваться ею для просмотра URL страницы сразу в исходнике, без перехода на сайт.
Как перейти по ссылке сразу в исходный код страницы не открывая её
Возникают случаи, когда нужен прямой переход на исходный код страницы минуя переход на сам сайт, в обход исполнения содержимого. Такое может понадобиться при исследовании заведомо небезопасного ресурса например. Изучать содержимое через исходник совершенно безопасно. Для перехода по ссылке прямо в код сайта нам понадобятся Mozilla Firefox и Google Chrome, к сожалению IE и Opera не поддерживают данную команду
Вызываем исходник www.google.ru
Для этого в адресную строку Мозиллы или Хрома вставляем следующую конструкцию
view-source:http://www.google.ru/
где view-source: это команда отображения, а http://... это адрес отображаемой страницы изнутри
и нажимаем на переход или на Enter. Вуаля! Мы попали в код страницы к Гуглу не загружая страницу
Как увидеть исходный код страниц в других браузерах
Во всех браузерах можно посмотреть страницу изнутри с помощью встроенных средств, но сначала надо перейти на эту страничку
IE - жмем правую кнопку мыши на странице - в меню выбираем Просмотр HTML кода
Или - Меню - Вид - Просмотр HTML кода
Opera - нажимаем правую кнопку мыши в любом месте на странице - в меню выбираем Исходный код или Проинспектировать (во втором случае получим анализ кода со средствами разработки)
Или - Меню - Вид - Средства разработки и получаем целый набор инструментов для исследования и правки кода Opera Dragonfly
Mozilla Firefox - жмем правой кнопкой на любое пустое пространство на странице (только не на картинки) - в меню выбираем Исходный код страницы
Или - Меню - Инструменты - Веб-разработка и получаем так же набор инструментов для исследования
Или комбинация клавиш Ctrl + U
Google Chrome - правая кнопка - в меню выбираем Просмотр кода элемента
Или - Настройки - Инструменты - Посмотреть исходный код
Расширение Mozilla Firefox для работы с исходным кодом
Одним из самых лучших расширений подобного плана является View Source Chart 3.05
Работает оно следующим образом: В контекстное меню браузера добавляется новая команда Отобразить структурную диаграмму и в Меню - Вид тоже появляется строчка Отобразить структурную диаграмму
Выведенный код с помощью этого расширения выглядит разложенным по полочкам по каждому элементу HTML. Выделяются скрипты, стили, Flash объекты. Каждый элемент отображен относительно всей структуры кода сайта
Для исследователей и разработчиков просто отличное расширение
Информация о дополнении и загрузки на сайте addons.mozilla.org