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

25 октября 2013 Алексей Ершов  Просмотров: 64 344

Как посмотреть исходный код (html код) страницы?

Ctrl + U

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

Нажмите правую кнопку мыши на интересующем элементе страницы.

Далее в контекстном меню кликните левой кнопкой по пункту

Google Chrome: “Просмотр кода элемента”

Просмотр кода элемента в браузере Google Chrome

Opera: “Проинспектировать элемент”

Инспектирование кода элемента в браузере Opera

FireFox: “Анализировать элемент”

Анализ кода элемента в браузере FireFox

 

В других браузерах ищите подобный по смыслу пункт меню.

Всем привет!

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

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

В будущем вы обязательно будете изучать исходный код страниц и отдельных элементов.

Давайте посмотрим на конкретном примере как можно использовать просмотр исходного кода страницы.

Например, мы хотим посмотреть какие ключевые слова (keywords) используются для конкретной страницы. Заходим на интересующую нас веб-страницу и нажимаем Ctrl+U. В отдельном окне или в отдельной закладке откроется исходный код данной страницы. Нажимаем Ctrl+F для поиска фрагмента кода. В данном случае печатаем в окне поиска слово “keywords”. Вас автоматически перебросит на фрагмент кода с этим мета-тегом и выделит искомое слово.

Поиск в исходном коде keywords

По аналогии можно искать и изучать другие фрагменты кода.

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

Давайте применим на конкретном примере просмотр кода элемента. Например, посмотрим есть ли у ссылки атрибут nofollow. Нажимаем правой кнопкой мыши на интересующей нас ссылке и в выпадающем контекстном меню левой кнопкой кликаем по пункту “Просмотр кода элемента” или подобному (в зависимости от вашего браузера). Внизу, в специальном окне для анализа кода, получаем нечто подобное.

Просмотр исходного кода элемента

 

Мы видим, что в коде ссылки присутствует rel=”nofollow”. Это значит, что по этой ссылке не будет “утекать” тИЦ и PR. Об этом подробней поговорим в следующих статьях. Сейчас же важно то, что вы теперь знаете как посмотреть исходный код страницы и исходный код отдельного элемента.

Опубликовано в рубрике Разное, Сайтостроение

Понравилась статья? Не забудьте поделиться с друзьями и коллегами:

«
»
Вы можете пропустить чтение записи и оставить комментарий. Размещение ссылок запрещено.

13 комментариев к записи “Как посмотреть исходный код страницы и код элемента”

  1. Alex 7 июня 2015 в 22:08

    Здесь все понятно, но где здесь, то есть в открывшемся коде элемента прописано название файла, в котором он находится?

    Ответить @
  2. алексей 20 июля 2015 в 13:25

    допустим, я нашел код элемента на интересующий мне странице. Теперь я хочу удалить этот элемент, как мне найти файл в котором этот элемент хранится?

    Ответить
  3. Алексей Ершов 20 июля 2015 в 13:29

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

    Ответить
    • Alex 20 июля 2015 в 13:53

      это ж сколько папок надо перелопатить! А другого способа нет?

      Ответить @
      • Алексей Ершов 20 июля 2015 в 14:03

        Папки “лопатить” не надо. За вас это сделают программы.
        1. В любом файловом менеджере есть функция поиска текста по файлам.
        Например, Total Commander. Зайдите в корень проекта, Alt+F7, укажите текст, который ищете и “Начать поиск”. Вам выдаст файл или список файлов, в которых будет найден данный текст.
        2. По аналогии, можно использовать программы редакторы-кода.

        Ответить
        • Alex 20 июля 2015 в 20:04

          Спасибо. попробую. Создаю новый сайт и не могу убрать пару строчек в подвале, причем в самом файле футера ее нет. А тема навороченная.

          Ответить @
  4. Alex 21 июля 2015 в 00:37

    Ничего не получилось, к сожалению. Все по инструкции делал, но находит “0”. Вот этот будущий сайт: chto-interesnogo.ru Там в футере изначально стоит: Рработает на WordPress тема от WP Blogs Еще и с двумя “р” в начале строки. Тему менять жалко. Я обратную связь уже настроил по ней без плагинов и т.д. А с этой “ерундой” никак не справлюсь.

    Ответить @
    • Алексей Ершов 21 июля 2015 в 14:37

      Нужно разбираться. Без доступов никак.

      Ответить
  5. Лиля 5 августа 2015 в 22:25

    А как сохранить картинку на странице чужого сайта через исходный код? Скопировать изображение и сохранить как не получается.

    Ответить @
    • Алексей Ершов 5 августа 2015 в 23:56

      1. Откройте исходный код страницы Ctrl+U.
      2. Нажмите Ctrl+F и введите строку для поиска:

      .
      3. В атрибуте src будет путь к изображению, откройте его в отдельном окне. Там его можно будет “сохранить как”.
      4. С помощью F3 перемещайтесь к следующему найденном фрагменту. Изображений на странице может быть много, поэтому придется пробежаться по всем, чтобы найти нужное.

      Ответить
  6. Наталья 16 ноября 2015 в 21:15

    Если в при просмотре кода сверху маячат 1 error 5 warnings, то как посмотреть что за ошибка и предупреждения?

    Ответить @
  7. Максим 19 декабря 2015 в 14:11

    В windows 10 не работает кнопка есть но не подсвечена что делать?

    Ответить @
  8. Кристина 22 июля 2018 в 20:16

    Что делать, если элемент не сканируется?

    Ответить @

Оставить комментарий

Для размещения кода в комментарии используйте теги <pre> </pre>, например:


Подписаться, не комментируя