Как просмотреть код страницы в Google Chrome

Обновлено: 21.11.2024

Веб-сайт или веб-страница состоит из различных элементов, включая текст, изображения, видео и т. д. Страница, которая кажется вам очень интерактивной и красочной, на самом деле является кодом, который выполняется в браузере. Этот код называется исходным кодом, который написан с помощью языков программирования, используемых в веб-разработке, таких как HTML, CSS, JavaScript и т. д.

Вы можете очень быстро просмотреть исходный код любой веб-страницы в Google Chrome или других веб-браузерах. Исходный код позволяет вам ознакомиться с форматированием и стилем CSS веб-страницы и ее HTML-кодом вместе со сценариями.

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

Инструкции по просмотру исходного кода в Google Chrome

Способ 1. Просмотр исходного кода страницы

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

Шаг 2. Нажмите «Просмотреть исходный код страницы», чтобы просмотреть исходный код.

Это откроет исходный код в новой вкладке.

Ярлык: чтобы просмотреть исходный код страницы, нажмите клавиши «Ctrl + U».

Способ 2. Проверка

Шаг 1. Как и в предыдущем методе, щелкните правой кнопкой мыши в любом месте веб-страницы, чтобы открыть раскрывающееся меню.

Шаг 2. Выберите "Проверить".

Исходный код будет отображаться на том же экране, что и веб-страница (как показано на изображении).

Ярлык: откройте веб-страницу и нажмите F12 или «Ctrl + Shift + I», чтобы просмотреть ее.

Вот оно! Теперь вы можете легко просмотреть исходный код любой веб-страницы в Chrome.

Что ж, и "просмотреть исходный код страницы", и "проверить" показывают исходный код веб-страницы. Но есть одно различие между результатом, полученным ими обоими.

Брэди Гэвин

Брэди Гэвин
Писатель

Брэйди Гэвин уже 15 лет занимается технологиями и написал более 150 подробных руководств и пояснений. Он рассмотрел все, от взломов реестра Windows 10 до советов по браузеру Chrome. Брэди имеет диплом в области компьютерных наук в колледже Камосан в Виктории, Британская Колумбия. Подробнее.

Являетесь ли вы веб-дизайнером, занимающимся отладкой исходного кода своего сайта, или просто хотите узнать, как выглядит код сайта, вы можете просмотреть исходный HTML-код прямо в Google Chrome. Существует два способа просмотра исходного кода HTML: просмотр исходного кода и проверка с помощью инструментов разработчика.

Просмотр исходного кода с помощью просмотра исходного кода страницы

Запустите Chrome и перейдите на веб-страницу, на которой вы хотите просмотреть исходный код HTML. Щелкните страницу правой кнопкой мыши и выберите «Просмотреть исходный код страницы» или нажмите Ctrl + U, чтобы просмотреть исходный код страницы на новой вкладке.

Откроется новая вкладка вместе со всем HTML-кодом веб-страницы, полностью развернутым и неформатированным.

Если вы ищете определенный элемент или часть в исходном коде HTML, использование View Source утомительно и громоздко, особенно если на странице много JavaScript и CSS.

Проверка исходного кода с помощью инструментов разработчика

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

Откройте Chrome и перейдите на страницу, которую хотите проверить; затем нажмите Ctrl + Shift + I. Рядом с просматриваемой веб-страницей откроется закрепленная панель.

Нажмите на маленькую серую стрелку рядом с элементом, чтобы развернуть его еще больше.

Если вы не хотите видеть весь код страницы по умолчанию, а вместо этого проверяете определенный элемент в HTML, щелкните правой кнопкой мыши это место на странице, а затем нажмите "Проверить".

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

Если вы хотите изменить положение стыковки, вы можете переместить ее вниз, влево, вправо или даже открепить в отдельном окне. Нажмите на значок меню (три точки), затем выберите «Открепить в отдельном окне», «Закрепить слева», «Закрепить внизу» или «Закрепить справа» соответственно.

На этом все. Когда вы закончите просмотр кода, либо закройте вкладку «Просмотр исходного кода», либо нажмите «X» на панели «Инструменты разработчика», чтобы вернуться на свою веб-страницу.

› Что делают ваши функциональные клавиши в Chrome DevTools
› Что такое Markdown и как его использовать?
› Как включить меню «Разработка» в Safari на Mac
› Что такое язык разметки?
› Баланс Paypal в социальных сетях был подделан. Вот как это сделать
› Matter — это долгожданный стандарт умного дома
› QWERTY-клавиатура — самая большая неразгаданная тайна технологий
› 7 основных функций Microsoft Excel для составления бюджета

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

Вводная информация

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

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

Google Chrome

Чтобы просмотреть исходный код веб-страницы в Google Chrome, используйте любой из следующих способов.

Просмотреть только исходный код

Чтобы просмотреть только исходный код, нажмите сочетание клавиш Ctrl + U на клавиатуре компьютера.

Щелкните правой кнопкой мыши пустую часть веб-страницы и выберите Просмотреть исходный код страницы в появившемся всплывающем меню.

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

Откройте Chrome и перейдите на веб-страницу, исходный код которой вы хотите просмотреть.
Нажмите значок "Настройка и управление Google Chrome" в правом верхнем углу окна браузера.
В появившемся раскрывающемся меню выберите Дополнительные инструменты, а затем выберите Инструменты разработчика.
Перейдите на вкладку "Элементы" в верхнем левом углу нового раздела, который появится в нижней части экрана.

В Chrome нажатие F12 или Ctrl + Shift + I также вызывает интерактивный инструмент разработчика. Этот инструмент предоставляет гораздо больше возможностей для взаимодействия с исходным кодом и настройками CSS, позволяя пользователям сразу увидеть, как изменения в коде влияют на веб-страницу.

Мозилла Фаерфокс

Чтобы просмотреть исходный код веб-страницы в Mozilla Firefox, используйте любой из следующих способов.

Просмотреть только исходный код

Чтобы просмотреть только исходный код, нажмите Ctrl + U на клавиатуре компьютера.

Щелкните правой кнопкой мыши пустую часть веб-страницы и выберите «Просмотреть исходный код страницы» в появившемся всплывающем меню.

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

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

В Firefox нажатие F12 или Ctrl + Shift + I также вызывает интерактивный инструмент разработчика. Этот инструмент обеспечивает взаимодействие с исходным кодом и настройками CSS, позволяя пользователям видеть, как изменения в коде влияют на веб-страницу в режиме реального времени.

Просмотр части исходного кода страницы

часть веб-страницы, для которой вы хотели бы просмотреть исходный код. выделенный раздел и выберите «Просмотр источника выбора».

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

Майкрософт Эдж

Чтобы просмотреть исходный код веб-страницы в Microsoft Edge, используйте любой из следующих способов.

Просмотреть только исходный код

Чтобы просмотреть только исходный код, нажмите Ctrl + U на клавиатуре компьютера.

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

Откройте Microsoft Edge и перейдите на веб-страницу, исходный код которой вы хотите просмотреть.
Нажмите значок "Настройки и другое" в правом верхнем углу экрана.
Наведите указатель мыши на Дополнительные инструменты в раскрывающемся меню и выберите Инструменты разработчика в расширенном меню.
Перейдите на вкладку "Элементы" в верхней части окна, которое появляется в правой части экрана.

В Microsoft Edge нажатие F12 или Ctrl + Shift + I также вызывает интерактивный инструмент разработчика. Этот инструмент обеспечивает взаимодействие с исходным кодом и настройками CSS, позволяя пользователям видеть, как изменения в коде влияют на веб-страницу в режиме реального времени.

Microsoft Internet Explorer

Чтобы просмотреть исходный код веб-страницы в Microsoft Internet Explorer, используйте любой из следующих способов.

Просмотреть только исходный код

Чтобы просмотреть только исходный код, нажмите Ctrl + U на клавиатуре компьютера.

Щелкните правой кнопкой мыши пустую часть веб-страницы и выберите Просмотреть источник в появившемся всплывающем меню.

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

Откройте Internet Explorer и перейдите на веб-страницу, исходный код которой вы хотите просмотреть.
Нажмите "Инструменты" в правом верхнем углу.
В раскрывающемся меню выберите Инструменты разработчика F12.

Перейдите на вкладку "Проводник DOM" в левом верхнем углу меню инструментов разработчика.

В Internet Explorer нажатие клавиши F12 вызывает инструмент DOM. Этот инструмент обеспечивает взаимодействие с исходным кодом и настройками CSS, позволяя пользователям сразу увидеть, как изменения в коде влияют на веб-страницу.

Сафари

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

Доступ к параметрам разработчика в Safari

Откройте браузер Safari.
Выберите в строке меню в верхнем левом углу экрана.
В появившемся раскрывающемся меню выберите «Настройки».

Перейдите на вкладку "Дополнительно" и установите флажок "Показать меню "Разработка" в строке меню".

Теперь вы должны увидеть селектор «Разработка» в строке меню Apple в верхней части экрана.

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

У вас должны быть включены параметры разработчика, чтобы следующие шаги работали.

Откройте Safari и перейдите на веб-страницу, исходный код которой вы хотите просмотреть.
В строке меню Apple в верхней части экрана нажмите селектор «Разработка» и выберите «Показать исходный код страницы» в раскрывающемся меню.
В центре экрана нажмите вкладку "Элементы" в верхней части раздела инструментов разработчика.

Щелкните правой кнопкой мыши пустую часть веб-страницы и выберите «Показать исходный код страницы» в появившемся всплывающем меню.

После включения параметров разработчика вы также можете нажать Command + option + U, чтобы просмотреть исходный код страницы.

Опера

Чтобы просмотреть исходный код веб-страницы в Opera, используйте любой из следующих способов.

Просмотреть только исходный код

Чтобы просмотреть только исходный код, нажмите Ctrl + U на клавиатуре компьютера.

Щелкните правой кнопкой мыши пустую часть веб-страницы и выберите Источник страницы в появившемся всплывающем меню.

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

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

Если вы не видите подменю "Разработчик", выберите "Дополнительные инструменты" → "Показать меню разработчика". Затем снова нажмите кнопку меню. Теперь вы должны увидеть запись разработчика в списке.

В Opera нажатие F12 или Ctrl + Shift + I также вызывает интерактивный инструмент разработчика. Этот инструмент обеспечивает взаимодействие с исходным кодом и настройками CSS, позволяя пользователям видеть, как изменения в коде влияют на веб-страницу в режиме реального времени.

Телефон или планшет Android с Chrome

Откройте браузер Google Chrome на телефоне или планшете Android.
Откройте веб-страницу, исходный код которой вы хотите просмотреть.
Нажмите один раз в адресной строке и переместите курсор в начало URL-адреса.
Введите view-source: и нажмите Enter или Go.

Если описанные выше шаги не работают на вашем телефоне Android, используйте этот метод на iPhone или iPad с помощью раздела Safari. Тот же код работает на телефонах Android, единственное отличие заключается в использовании Chrome вместо Safari и процессе создания и редактирования закладки.

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

iPhone или iPad в Safari

Просмотр исходного кода веб-страницы на iPhone или iPad требует немного больше усилий, но это возможно. Этот процесс требует, чтобы вы создали закладку, присвоили ей код JavaScript и использовали закладку на веб-странице для просмотра ее исходного кода.

Если вы предпочитаете использовать приложение для просмотра исходного кода веб-страницы, вы можете загрузить бесплатное приложение View Source из iOS App Store.

Создайте закладку для просмотра исходного кода

Вы также можете нажать и удерживать палец на значке закладки в нижней части экрана, пока не появится меню.

В открывшемся меню коснитесь параметра «Добавить закладку».

Нажмите в поле имени закладки, коснитесь x справа, чтобы удалить текущее имя, и введите "Просмотреть исходный код веб-страницы" в качестве нового имени.

Нажмите "Сохранить" в правом верхнем углу, чтобы сохранить закладку.
Скопируйте весь приведенный ниже фрагмент кода JavaScript.

В Safari для доступа к закладкам нажмите значок закладок в нижней части экрана.

Найдите созданную выше закладку, затем нажмите и удерживайте палец на закладке, пока внизу экрана не откроется меню.
Нажмите в меню пункт "Изменить".

На экране Редактировать закладку коснитесь URL-адреса, затем коснитесь x, чтобы очистить URL-адрес, затем вставьте код JavaScript из шага 7 в поле URL-адреса.

Нажмите «Готово» в правом нижнем углу экрана, чтобы сохранить изменения закладок.

Использовать закладку для просмотра исходного кода

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

В Safari откройте веб-страницу, на которой вы хотите просмотреть исходный код.
Нажмите значок закладок в нижней части экрана.

Нажмите на созданную вами закладку Просмотр исходного кода веб-страницы.

Откроется новая вкладка просмотра Safari, отображающая исходный код веб-страницы.

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

Как закрыть страницу с исходным кодом или инструмент

После просмотра исходного кода на веб-странице вы можете выйти или закрыть ее. Закрытие исходного кода зависит от метода, который вы использовали для его открытия.

Если вы использовали метод Ctrl + U (кроме Edge) или метод щелчка правой кнопкой мыши, закройте новую вкладку, которая открылась в верхней части окна браузера.
Если вы использовали метод разработчика (используя F12 или Ctrl + Shift + I ), снова нажмите те же клавиши или щелкните значок в правом верхнем углу окна инструментов.

Используйте онлайн-инструмент для просмотра исходного кода

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

Узнайте, как был создан веб-сайт, просмотрев его исходный код

Калифорнийский университет
Вашингтонский университет

Дженнифер Кирнин — профессиональный веб-разработчик, помогающий другим в изучении веб-дизайна, HTML, CSS и XML.

Крис Селф (Chris Selph) — сертифицированный CompTIA преподаватель технологии и профессиональный преподаватель информационных технологий. Он также работает администратором сети и сервера и выполняет обслуживание и ремонт компьютеров для многочисленных клиентов.

Что нужно знать

Нажмите правой кнопкой мыши веб-страницу и выберите "Просмотреть исходный код страницы".
Ярлык: нажмите Ctrl+U (ПК с Windows) или Command+Option+U (Mac).
Чтобы использовать инструменты разработчика Chrome, выберите Меню (три точки) > Дополнительные инструменты > Инструменты разработчика.

В этой статье объясняется, как получить доступ к исходному HTML-коду веб-сайта в веб-браузере Google Chrome, а также получить доступ к инструментам разработчика Chrome и использовать их. Просмотр исходного кода сайта — отличный способ для начинающих изучать HTML.

Просмотреть исходный код в Chrome

Как же просмотреть исходный код веб-сайта? Вот пошаговые инструкции, как это сделать с помощью браузера Google Chrome.

Откройте веб-браузер Google Chrome (если у вас не установлен Google Chrome, его можно загрузить бесплатно).

Перейдите на веб-страницу, которую хотите изучить.

Щелкните правой кнопкой мыши страницу и посмотрите на появившееся меню. В этом меню нажмите Просмотреть исходный код страницы.

Исходный код этой страницы теперь появится в виде новой вкладки в браузере.

Кроме того, вы также можете использовать сочетания клавиш Ctrl+U на ПК, чтобы открыть окно с отображаемым исходным кодом сайта. На Mac это сочетание клавиш Command+Option+U.

Используйте инструменты разработчика Chrome

Помимо простой возможности Просмотреть исходный код страницы, которую предлагает Google Chrome, вы также можете воспользоваться превосходными инструментами разработчика, чтобы еще глубже изучить сайт. Эти инструменты позволят вам не только увидеть HTML, но и CSS, которые применяются для просмотра элементов в этом HTML-документе.

Чтобы использовать инструменты разработчика Chrome:

Откройте Google Chrome.

Перейдите на веб-страницу, которую хотите изучить.

Выберите меню из трех точек в правом верхнем углу окна браузера.

В меню наведите указатель мыши на Дополнительные инструменты, а затем в появившемся меню выберите Инструменты разработчика.

Откроется окно с исходным кодом HTML в левой части панели и соответствующим CSS-кодом в правой.

В качестве альтернативы, если щелкнуть элемент на веб-странице правой кнопкой мыши и выбрать "Проверить" в появившемся меню, инструменты разработчика Chrome отобразятся и выделят определенную часть, которую вы выбрали в HTML, с соответствующим CSS, показанным справа. Это очень полезно, если вы хотите узнать больше об определенной части сайта.

Законен ли просмотр исходного кода?

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

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

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

Больше, чем просто HTML

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

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

Простые способы просмотра исходного кода любой веб-страницы на ПК или MAC с помощью любого из популярных веб-браузеров.

Алекс Крис Обновлено 17 февраля 2022 г. Оставить комментарий

Всегда полезно знать, как просмотреть исходный код вашего веб-сайта или любого веб-сайта. Этот навык может оказаться очень полезным при работе над SEO, устранении неполадок или просто при желании посмотреть, как выглядит исходный HTML-код веб-сайта.

В этом посте вы узнаете о простых способах просмотра кода любого веб-сайта на любой платформе. Приступим.

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

Сафари

Чтобы просмотреть исходный код веб-сайта на Mac с помощью Safari, перейдите на нужную страницу и используйте следующую комбинацию клавиш: Option+Command+U.

Кроме того, вы можете щелкнуть правой кнопкой мыши в любом месте страницы и выбрать "Показать исходный код страницы" в раскрывающемся меню.

Гугл Хром

Чтобы просмотреть исходный код веб-сайта на Mac с помощью Chrome, перейдите на нужную страницу и используйте сочетание клавиш: Option+Command+U.

Вы также можете щелкнуть страницу правой кнопкой мыши и выбрать "Просмотреть исходный код страницы" в раскрывающемся меню.

Файрфокс

При использовании Firefox на Mac сочетание клавиш для просмотра исходного кода: COMMAND + U

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

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

Гугл Хром

При использовании Google Chrome на ПК вы можете просмотреть исходный код веб-сайта с помощью сочетания клавиш: CTRL + U.

Файрфокс

При использовании Firefox на ПК сочетание клавиш для просмотра исходного кода: CTRL + U

Опера

При использовании Opera на ПК сочетание клавиш для просмотра исходного HTML-кода страницы: CTRL + U

Майкрософт Эдж

Сочетание клавиш для просмотра исходного кода страницы при использовании браузера Microsoft Edge на ПК: F12 и CTRL+SHIFT+I

Как просмотреть HTML-код определенного элемента страницы?

Вместо просмотра HTML-кода всей страницы вы можете просмотреть код отдельных элементов страницы с помощью параметра ПРОВЕРИТЬ ЭЛЕМЕНТ, доступного во всех популярных браузерах, таких как Google Chrome, Firefox и Safari.

Процесс прост. Откройте страницу в новом окне браузера, а затем выделите часть страницы с помощью мыши.

Нажмите правой кнопкой мыши и выберите ПРОВЕРИТЬ в раскрывающемся меню.

Это откроет инструменты разработчика и покажет вам код HTML, связанный с конкретным элементом или разделом страницы.

Вот краткая демонстрация того, как это сделать с помощью Google Chrome.

Как скачать весь исходный код веб-сайта?

Чтобы загрузить исходный HTML-код веб-сайта, перейдите с помощью своего любимого браузера на страницу, а затем выберите СОХРАНИТЬ СТРАНИЦУ КАК в меню ФАЙЛ. Затем вам будет предложено выбрать, хотите ли вы загрузить всю страницу (включая изображения) или только исходный код.

Параметры загрузки одинаковы для всех браузеров.

Веб-страница, полная: загружает исходный код страницы и все изображения, файлы CSS и сценарий js, связанные с конкретной страницей. Все файлы сохраняются в папке. Это полезно, когда вам нужно загрузить изображения вместе с HTML-кодом.

Веб-страница, отдельный файл: загружает страницу в формате MHTML (сокращение от MIME HTML). Это форма HTML, которая включает как код веб-сайта, так и любые внешние ресурсы.

Веб-страница, только HTML: загружает HTML и любые другие элементы (например, встроенный код Java Script), найденные в теле страницы.

Почему важно знать, как просматривать исходный код веб-сайта?

Проверяйте наличие тегов H1. Согласно рекомендациям SEO, на странице должен быть только один тег H1. Чтобы проверить, так ли это на вашем веб-сайте, вы можете перейти к одному из своих сообщений и, используя любой из методов, описанных выше, просмотреть исходный HTML-код страницы. Затем вы можете найти и посмотреть, есть ли на странице более одного тега H1.

Проверить, являются ли ссылки nofollow. Один из способов узнать, имеет ли ссылка добавленный тег nofollow (что делает его менее важным для SEO-рейтинга), — просмотреть HTML-код страницы. и проверьте наличие слова «nofollow» внутри элемента. Вы можете сделать это, чтобы проверить ссылки на своем или любом другом веб-сайте.

Оптимизируйте свой веб-сайт для повышения скорости. Хорошей причиной для анализа исходного кода вашего веб-сайта является оптимизация скорости страницы. В качестве отправной точки вы можете просмотреть HTML-код страницы и попытаться определить элементы (включая файлы JS и CSS), которые можно удалить, чтобы уменьшить размер страницы и ускорить ее загрузку. Затем с помощью других инструментов (таких как Google PageSpeed Insights) вы можете продолжить дальнейшую оптимизацию кода.

Ключевые уроки

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

При желании вы можете загрузить код в текстовом файле.Чтобы просмотреть HTML-код определенного элемента страницы, используйте функцию INSPECT, которая является частью инструментов разработчика.

Алекс Крис – консультант по цифровому маркетингу, автор и преподаватель. Он имеет более чем 18-летний практический опыт работы с SEO и цифровым маркетингом. Алекс имеет степень магистра в области электронной коммерции и консультировал компании из списка Fortune 500 в различных отраслях. Он регулярно пишет в блогах о SEO и цифровом маркетинге, и на его работу ссылаются ведущие маркетинговые сайты. Свяжитесь с Алексом в Twitter и LinkedIn.

УВЕЛИЧЬТЕ ВАШ ТРАФИК ОТ GOOGLE В 10 раз. Получите VIP-доступ к эксклюзивным советам по SEO, которыми я делюсь только со своими подписчиками. Загрузите БЕСПЛАТНЫЕ руководства, контрольные списки SEO и шаблоны, чтобы увеличить посещаемость вашего веб-сайта.

Читайте также: