Что нужно знать
- Щелкните правой кнопкой мыши веб-страницу и выберите Посмотреть исходный код страницы .
- Ярлык: Нажмите Ctrl + В (ПК с Windows) или Команда + Вариант + В (Мак).
- Чтобы использовать инструменты разработчика Chrome, выберите Меню (три точки) > Дополнительные инструменты > Инструменты разработчика .
В этой статье объясняется, как получить доступ к исходному коду HTML веб-сайта в веб-браузере Google Chrome, а также получить доступ и использовать инструменты разработчика Chrome. Просмотр исходного кода сайта — отличный способ для новичков изучить HTML.
Просмотр исходного кода в Chrome
Так как же просмотреть исходный код веб-сайта? Вот пошаговые инструкции, как сделать это с помощью браузера Google Chrome.
-
Открой веб-браузер Google Chrome (если у вас нет Гугл Хром установлен , это бесплатная загрузка).
-
Перейдите к веб-страница, которую вы хотели бы изучить .
-
Щелкните правой кнопкой мыши страница и посмотрите на появившееся меню. В этом меню нажмите Посмотреть исходный код страницы .
-
Исходный код этой страницы теперь появится в виде новой вкладки в браузере.
-
Кроме того, вы также можете использовать сочетания клавиш Ctrl + В на ПК, чтобы открыть окно с исходным кодом сайта. На Mac этот ярлык Команда + Вариант + В .
Хилари Эллисон / Lifewire
как сделать коллаж из картинок на iphone
Используйте инструменты разработчика Chrome
Помимо простогоПосмотреть исходный код страницывозможности, которые предлагает Google Chrome, вы также можете воспользоваться их превосходными Инструменты разработчика чтобы копнуть глубже в сайт. Эти инструменты позволят вам видеть не только HTML, но и CSS, который применяется для просмотра элементов в этом HTML-документе.
Чтобы использовать инструменты разработчика Chrome:
-
Открыть Гугл Хром .
-
Перейдите к веб-страница, которую вы хотите изучить .
-
Выберите трехточечное меню в правом верхнем углу окна браузера.
-
В меню наведите курсор на Дополнительные инструменты а затем выбери Инструменты разработчика в появившемся меню.
-
Откроется окно, в котором слева от панели показан исходный код HTML, а справа — соответствующий CSS.
-
Альтернативно, если щелкнуть правой кнопкой мыши элемент на веб-странице и выберите Осмотреть в появившемся меню появятся инструменты разработчика Chrome и выделят конкретную часть, которую вы выбрали в HTML, с соответствующим CSS, показанным справа. Это очень полезно, если вы хотите узнать больше об определенной части сайта.
как сделать звонок перейти прямо на голосовую почту
Законен ли просмотр исходного кода?
На протяжении многих лет многие новые веб-дизайнеры задавались вопросом, приемлемо ли просматривать исходный код сайта и использовать его для своего обучения и, в конечном итоге, для работы, которую они выполняют. Хотя массовое копирование кода сайта и выдача его на веб-сайте за свой собственный, безусловно, неприемлемо, использование этого кода в качестве трамплина для обучения — это на самом деле то, как много достижений достигнуто в этой отрасли.
Как мы упоминали в начале этой статьи, сегодня вам будет сложно найти работающего веб-профессионала, который бы не научился чему-то, просматривая исходный код сайта! Да, просмотр исходного кода сайта является законным. Использование этого кода в качестве ресурса для создания чего-то подобного также безопасно. Взяв код как есть и выдав его за свою работу, вы начинаете сталкиваться с проблемами.
В конце концов, веб-профессионалы учатся друг у друга и часто улучшают работу, которую они видят и которой они вдохновляются, поэтому не стесняйтесь просматривать исходный код сайта и использовать его в качестве инструмента обучения.
Больше, чем просто HTML
Следует помнить, что исходные файлы могут быть очень сложными (и чем сложнее веб-сайт, который вы просматриваете, тем сложнее, вероятно, будет код этого сайта). В дополнение к структуре HTML, из которой состоит страница, также будут CSS (каскадные таблицы стилей), которые определяют внешний вид этого сайта. Кроме того, многие веб-сайты сегодня включают файлы сценариев вместе с HTML.
доставка еды, которая принимает наличные рядом со мной
Вероятно, будет включено несколько файлов сценариев; фактически, каждый из них обеспечивает работу различных аспектов сайта. Честно говоря, исходный код сайта может показаться сложным, особенно если вы новичок в этом деле. Не расстраивайтесь, если вы не сможете сразу понять, что происходит с этим сайтом. Просмотр исходного HTML-кода — это лишь первый шаг в этом процессе. Приобретя небольшой опыт, вы начнете лучше понимать, как все эти части соединяются вместе, чтобы создать веб-сайт, который вы видите в своем браузере. По мере того, как вы ближе ознакомитесь с кодом, вы сможете узнать из него больше, и он не будет казаться вам таким уж устрашающим.
Часто задаваемые вопросы- Как редактировать HTML-код в Chrome?
Откройте Инструменты разработчика в Chrome, нажав Ctrl (или Команда на Маке) + Шифт + Я . Оттуда нажмите Ctrl ( Команда на Маке) + О и выберите сохраненный исходный файл, который хотите отредактировать, чтобы открыть его.
- Как просмотреть исходный код страницы в Chrome, если просмотр исходного кода отключен?
Если на веб-сайте отключена опция «Просмотр источника», вы все равно сможете заглянуть под капот. В верхней части окна браузера выберите Вид > Разработчик > Посмотреть источник , который должен открыть исходный код веб-страницы.
- Как просмотреть исходный код сайта в Chrome с помощью устройства Android?
Перейдите на веб-сайт, который хотите просмотреть, с помощью приложения Chrome на вашем устройстве, затем выберите адресную строку браузера. Переместите текстовый курсор в крайнее левое положение перед URL-адресом и введите посмотреть источник , затем нажмите Входить или выберите Идти .
