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

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

Ctrl + U

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

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

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

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

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

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

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

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

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

 

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

Всем привет!

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

  1. Alex

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

  2. алексей

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

  3. Алексей Ершов

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

    • Alex

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

      • Алексей Ершов

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

        • Alex

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

  4. Alex

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

    • Алексей Ершов

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

  5. Лиля

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

    • Алексей Ершов

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

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

  6. Наталья

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

  7. Максим

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

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

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


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