Необходимо быстро посмотреть все изменения на самом сайте, не затрагивая файлы и код сайта, выложенного в Интернет. Например, изменить цветовую гамму какого-либо блока, пододвинуть съехавший элемент и т.д.
Для этого многие вебмастера используют локальные серверы Denwer или OpenServer, запуская полную копия сайта у себя на компьютере. Этот способ универсальный и подойдет для профессионалов, с помощью него можно проверить работу различных скриптов и плагинов, поэкспериментировать с изменением дизайна и отредактировать все файлы сайта, а после теста перенести подходящие изменения непосредственно на сайт.
Пользователям далеким от вебмастерского искусства рекомендую для этих целей использовать браузер. Так как я использую Сhrome, приведу инструкцию со скриншотами именно по этому браузеру. По аналогии можно работать с Opera, Яндекс.Браузер, Mozilla Firefox и другими браузерами, принцип их инструментов схож.
Инструкция 1: как просмотреть весь HTML код сайта в браузере
Открываем необходимую веб-страницу вашего сайта. Кликаем правой кнопкой мыши по необходимому элементу, появится контекстное выпадающее меню браузера с доступными командами:
Рисунок 1. Просмотр всего HTML кода веб-страницы в браузере Chrome
Важно: Команды в выпадающем меню могут отличаться, например, для активных элементов (ссылки, картинки, видео) и неактивных (текст, фон, дивы):
Рисунок 2. Выпадающее меню браузера Chrome
Поэтому если вы не нашли необходимой команды, просто нажмите правую кнопку мыши в другом месте или воспользуйтесь горячими клавишами браузера.
Вернемся к рисунку 1, на нем показана необходимая команда для просмотра всего HTML кода исходной веб-страницы, она называется «Просмотр кода страницы «. Кликаем по команде, откроется новая вкладка с полным кодом исходной веб-страницы, большой плюс ко всему — просмотр доступен с подсветкой синтаксиса:
Рисунок 3. Фрагмент кода данного сайта
Данный инструмент очень полезен для нахождения и правки искомых элементов.
Альтернативные способы просмотра всего HTML кода веб-страницы
Для более быстрого доступа, можно использовать другие способы вызова данного инструмента
- На рисунке 1 мы также видим, что данная команда доступна по сочетанию клавиш
+ ; - Вставить в адресную строку браузера view-source:сайт вместо моего домена вставляем свой адрес;
Оба способа универсальны и должны работать во всех браузерах.
Кому-то поначалу покажется, что это совсем не нужный инструмент, но просмотр всего HTML кода сайта отлично подходит для поиска в коде необходимых элементов, это могут быть ссылки, теги, мета-теги, атрибуты и другие элементы.
Сочетанием горячих клавиш
Рисунок 3. Поиск по коду сайту
После того, как вы ведете запрос в поисковую форму экран переместится к первому найденному элементу, с помощью стрелок можно перемещаться между ними и выбрать необходимый:
Рисунок 4. Поиск по HTML коду сайта
Инструкция 2: как просмотреть и отредактировать HTML и CSS код сайта в браузере Google Chrome
Теперь самая важная часть, в которой я покажу, как можно редактировать HTML и CSS код сайта в браузере. после чего переносить изменения в браузер.
Вот такой полезный инструмент всегда доступен в вашем браузере, экспериментируйте с другими командами, которые вам облегчат редактирование сайта.
Ctrl + U
Как посмотреть исходный код элемента?
Нажмите правую кнопку мыши на интересующем элементе страницы.
Google Chrome : “Просмотр кода элемента”
Opera : “Проинспектировать элемент”
FireFox : “Анализировать элемент”
В других браузерах ищите подобный по смыслу пункт меню.
Всем привет!
Специально вначале статьи выложил всю суть, для тех, кто ищет быстрый ответ.
Информация может быть многим известна, но поскольку пишу для начинающих блоггеров, веб-программистов и прочих старателей, то эта справочная статья обязательно должна присутствовать.
В будущем вы обязательно будете изучать исходный код страниц и отдельных элементов.
Давайте посмотрим на конкретном примере как можно использовать просмотр исходного кода страницы.
Например, мы хотим посмотреть какие ключевые слова (keywords) используются для конкретной страницы. Заходим на интересующую нас веб-страницу и нажимаем Ctrl+U . В отдельном окне или в отдельной закладке откроется исходный код данной страницы. Нажимаем Ctrl+F для поиска фрагмента кода. В данном случае печатаем в окне поиска слово “keywords”. Вас автоматически перебросит на фрагмент кода с этим мета-тегом и выделит искомое слово.
По аналогии можно искать и изучать другие фрагменты кода.
Просмотр всего исходного кода страницы в большинстве случаев не очень удобен, поэтому во всех браузерах существует возможность просмотреть код отдельного элемента или фрагмента.
Давайте применим на конкретном примере просмотр кода элемента. Например, посмотрим есть ли у ссылки атрибут nofollow . Нажимаем правой кнопкой мыши на интересующей нас ссылке и в выпадающем контекстном меню левой кнопкой кликаем по пункту “Просмотр кода элемента” или подобному (в зависимости от вашего браузера). Внизу, в специальном окне для анализа кода, получаем нечто подобное.
Мы видим, что в коде ссылки присутствует rel=”nofollow” . Это значит, что по этой ссылке не будет “утекать” и PR. Об этом подробней поговорим в следующих статьях. Сейчас же важно то, что вы теперь знаете как посмотреть исходный код страницы и исходный код отдельного элемента.
У каждого пользователя интернета есть свои любимые сайты, на которых он проводит длительное время. И только ленивый не задумывался посмотреть, как он создан и из чего состоит. Ответить на все эти вопросы не получиться, так как существует много способов создавать сайт, но вот посмотреть те команды и коды, из которых он состоит – это возможно и общедоступно каждому.
Другой вопрос – поймет ли человек, который не занимается программированием что-то из тех символов, которые составляют код. Но из примеров, которые будут наведены ниже любой пользователь Google Chrome сможет посмотреть отдельные элементы сайтов.
Как просмотреть исходных код html-страницы в браузере от Google
Что того, что бы вы смогли посмотреть код страницы в Chrome необходимо зайти на интересующий вас сайт и выполнить следующие действия:
Два этих пункта отличаются между собой своей функциональностью и информационностью для пользователя, программиста или хакера.
В чем разница между кодом страницы и просто командой «Посмотреть код»
Разбирая каждую из этих функций можно писать отдельную статью. Для программистов эта разница существенная и они понимают в каких случаях необходимо использовать «Посмотреть код», а в каких «Просмотр кода страницы» в браузере Google Chrome.
Но объясняя для обычного пользователя можно разделить эти функции по следующим назначениям:
- «Просмотр кода страницы» необходимо только для того, чтобы увидеть основную комбинацию страницы. В основном – это структура сайта (без дополнительных моделей в виде CSS файлов и прочих дополнений, которые остались в папке создателя сайта). Данная структура не подходит для создания собственной страницы путем «копировать – вставить», но она позволит увидеть, что именно программист делал и в какой последовательности для того, чтобы сайт в браузере Google Chrome имел такой внешний дизайн.
- «Посмотреть код» выводит детальную структуру с выделением всех областей, которые затрагиваются на странице. Если вы наведете на определенный код списка – он выделит элемент на сайте, которому принадлежит.
- Просмотр кода страницы открывается в отдельном браузере без возможности его редактировать. То есть он подходит лишь для копирования и чтения кода сайта. Но это не менее полезная функция.
- «Посмотреть код» изменяем и можно редактировать любой элемент так, как будет удобно вам. Конечно же – эти все изменения будут «жить» до момента обновления страницы, но иногда бывает забавно полазить по тем настройкам и просто понять для чего необходимо то или иное значение, и что будет от того, если его изменить. Не стоит предполагать, что такими действиями вы что-то навредите себе или сайту – данные изменения действуют только в коде вашего Google Chrome и не выходит в сеть.
Рассматриваем вопрос о том, как посмотреть код элемента
Если уж и отвечать на такой вопрос, то напрашивается только вариант с примером. Потому что за одну статью стать человеком, который будет понимать эту тематику (веб разработчиком) – очень трудно, но показать на примере, чтобы вопрос был исчерпан – сделать намного легче.
Функционал кода элемента очень широкий, поэтому берем один из слов на сайте браузера Google Chrome. Мы пожелали рассмотреть какие ключевые слова (в коде он будет прописан, как «keywords») использовались для нашего сайта. Для этого выполняем следующий алгоритм:
Другие способы использования данной функции в браузере Google Chrome
В общем, продолжая отвечать на вопрос, как посмотреть код элемента и зачем он нужен, следует перечислить его функции. А именно благодаря возможности посмотреть код элемента любого сайта в браузере Google Chrome мы можем:
- Увидеть структуру сайта начиная от head («шапка сайта») и заканчивая end (конечной командой любой программы);
- Просмотреть все функции сайта, а именно: ссылки на другие сайты, дополнительные модули с внешних сайтов и наличие встроенных счетчиков по сбору различной информации;
- Узнать, запрещено ли копирование с сайта или нет;
- В коде будет записаны все ссылки на другие страницы сайта, а также их оформление и последующие действия после клика по ним.
Это далеко не конечный список. Но следует напомнить, что без специальных знаний – «читать» код страницы Google Chrome практически невозможно и полученные данные обычному пользователю практически не нужны.
Не работает пункт «Просмотр кода элемента»
Следует сразу сказать – каждый сайт будет с открытым доступом к кодам элементов. То есть даже самые популярные и дорогие сайты будут открыты для просмотра их кода. Поэтому, в случае, если пункт в браузере Google Chrome не активен или выдает ошибку имеет следующие возможные причины:
- Профиль пользователя поврежден;
- Наличие вредоносного ПО на компьютере;
- Блокировка определенным расширением для увеличения производительности (даже такое может быть).
Исправляем поврежденный профиль пользователя
Чтобы создать новый профиль, необходимо удалить старый с вашего компьютера. Для этого выполняем следующее:
- Закрываем Google Chrome и запускаем встроенный браузер Windows Explorer.
- Вводим в адресную строку следующую команду: %LOCALAPPDATA%\Google\Chrome\User Data\.
- Когда каталог откроется, ищем папку «Default» и добавляем к ее названию «Backup», чтобы получилось следующее: «Backup Default».
- Теперь после нового запуска браузера Хром, будет создан новый профиль.
Удаляем вредоносные ПО или его остатки
Если новый профиль не открыл нам доступ к коду элемента страницы и мы по прежнему видим ошибку, следует выполнить следующие действия:
- Открываем командную строку Windows («Выполнить») и вводим туда команду «cmd».
- Вписываем в строчку следующую команду: RD /S /Q «%WinDir%\System32\GroupPolicyUsers».
- После подтверждения действия, вбиваем эту: RD /S /Q «%WinDir%\System32\GroupPolicy».
- Теперь «gpupdate /force» (без ковычек).
Если все правильно было сделано, то после перезагрузки компьютера Google Chrome будет открывать код элементов и работоспособность браузера будет в норме.
Умение изменить исходный код страницы – полезный навык для продвинутого пользователя Интернета. С помощью подмены HTML кода, вы сможете изменить открытую веб-страницу как вам угодно. В этой статье мы расскажем, как изменить код страницы в Google Chrome. Впрочем, в других браузерах все делается аналогично, потому трудностей возникнуть не должно.
Что такое HTML код страницы?
Каждая страница, которую вы открываете в браузере, имеет свой код на языке разметки HTML. Этот код представляет собой теги и текст. Теги это своеобразные метки, которые указывают браузеру, как отображать ту или иную часть сайта. Текст – это наполнение страницы, то, что видит пользователь. Также к странице могут быть подключены CSS стили, которые задают внешний вид элементов страницы. Чтобы изменить исходный код сайта не нужно досконально знать HTML и CSS и скоро вы в этом сами убедитесь.
Зачем изменять веб-страницу?
Вы можете подменить данные на сайте, изменить текст сообщения , сделать фейковый скриншот. Обратите внимание, что все изменения видны только вам и при перезагрузке страницы они исчезнут. Также измененные данные не будут реальными. Например, если у меня на есть 10 долларов, а я изменю на 100, то денег у меня больше не станет. Это лишь отображение страницы браузером. Пример:
После:
Для примера я возьму этот же сайт и изменю предыдущий анонс статьи “ ” Открываю главную страницу в Google Chrome. Нажимаю ПКМ по элементу, который я хочу изменить, например заголовок анонса и выбираю “Посмотреть код”.
В открывшемся окне переходим на вкладку Elements и видим HTML код страницы. В нем нужно найти интересующий нас текст. (подчеркнут красным)
Теперь удалю старый текст и впишу новый.
Вот и все, название анонса изменено. Теперь я изменю сам анонс, метки и рубрику.
Вставить другую картинку можно изменив атрибут src в теге img.
Если открыть любую веб-страницу, то она будет содержать в себе типичные элементы, которые не меняются от вида и направленности сайта. В примере 4.1 показан код простого документа, содержащего основные теги.
Пример 4.1. Исходный код веб-страницы
Заголовок
Первый абзац.
Второй абзац.
Скопируйте содержимое данного примера и сохраните его в папке c:\www\ под именем example41.html. После этого запустите браузер и откройте файл через пункт меню Файл > Открыть файл (Ctrl+O) . В диалоговом окне выбора документа укажите файл example41.html. В браузере откроется веб-страница, показанная на рис. 4.1.
Рис. 4.1. Результат выполнения примера
Элемент предназначен для указания типа текущего документа - DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать .
Существует несколько видов , они различаются в зависимости от версии HTML, на которую ориентированы. В табл. 4.1. приведены основные типы документов с их описанием.
| DOCTYPE | Описание |
|---|---|
| HTML 4.01 | |
| Строгий синтаксис HTML. | |
| Переходный синтаксис HTML. | |
| В HTML-документе применяются фреймы. | |
| HTML 5 | |
| В этой версии HTML только один доктайп. | |
| XHTML 1.0 | |
| Строгий синтаксис XHTML. | |
| Переходный синтаксис XHTML. | |
| Документ написан на XHTML и содержит фреймы. | |
| XHTML 1.1 | |
| Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML. Как видите, никакого деления на виды это определение не имеет, поскольку синтаксис один и подчиняется четким правилам. | |
Разница между строгим и переходным описанием документа состоит в различном подходе к написанию кода документа. Строгий HTML требует жесткого соблюдения спецификации HTML и не прощает ошибок. Переходный HTML более «спокойно» относится к некоторым огрехам кода, поэтому этот тип в определенных случаях использовать предпочтительнее.
Например, в строгом HTML и XHTML непременно требуется наличие тега
Тег