Как посмотреть исходный код страницы сайта в браузере | открыть HTML CSS код
Разработчики браузеров позаботились об удобстве тех, кто создает сайты, открываемые в этих самых браузерах, а именно – о вебмастерах. Они добавили в стандартные функции инструменты разработчика, с помощью которых можно легко открыть и посмотреть исходный код страницы сайта в браузере: HTML, CSS, JavaScript (JS), получить различные полезные данные о структуре сайта, провести его технический анализ. В общем, увидеть много полезного.
Конечно же, данными инструментами пользуются не только создатели сайтов для работы, но и простые пользователи, которым исходный код позволяет посмотреть различные полезных данных.
Например, можно узнать ссылку на исходную картинку, видео или какой-то файл, узнать точный код цвета какого-либо элемента, посмотреть теги, фон, стили, проверить ошибки CSS и прочее.
Из этой стать вы узнаете, как в браузере посмотреть исходный код страницы сайта (как открыть HTML, CSS, JavaScript код сайта).
Как открыть исходный код страницы в браузере
Открыть исходный код веб страницы в браузере можно двумя способами:
- С помощью горячих клавиш;
- Открыть из контекстного меню.
Ctrl + U – комбинация горячих клавиш для просмотра исходного кода всей страницы сайта в отдельном новом окне. Стандартные для всех браузеров: Google Chrome, Opera, Mozilla Firefox, Яндекс браузера, IE.
Также в инструменты разработчика можно войти следующим образом:
- Вызвать контекстное меню, кликнув правой кнопкой мыши в любой части страницы сайта, на которой нужно посмотреть HTML, CSS код;
- Нажать в контекстном меню пункт «Просмотр кода страницы», как это показано на скриншоте ниже. (Скриншот сделан в Google Chrome. В некоторых других браузерах пункт меню будет немного отличаться. Например, в Opera будет «Исходный текст страницы»)
Просмотр кода страницы сайта в браузере
Как открыть исходный код страницы сайта
Для того чтобы быстро найти нужный код, слово или текст на странице можно использовать стандартное для всех браузеров сочетание горячих клавиш поиска: Ctrl + G.
Просмотр кода элемента | исследовать элемент | проинспектировать элемент
Если вдруг нужно просмотреть не весь исходный код, а вывести на экран лишь отдельную его часть, какой-то участок на странице, то предыдущий инструмент не подойдет. Для этого в инструментах разработчика есть другая функция, о которой пойдет речь ниже.
Как просмотреть код элемента на странице:
- Открыть нужную страницу сайта;
- Вызвать контекстное меню правой кнопкой мыши;
- Затем нажать пункт, соответствующий вашему браузеру.
Google Chrome: «Просмотреть код»
Opera: «Просмотреть код элемента»
Яндекс браузер и Mozilla Firefox: «Исследовать элемент»
Проинспектировать отдельный элемент
Кроме того, можно использовать комбинации клавиш на клавиатуре для быстрого доступа к инспектированию элемента.
Горячие клавиши (кнопки):
Google Chrome: Ctrl+Shift+I и Ctrl+Shift+C
Opera: Ctrl+Shift+I и Ctrl+Shift+C
Mozilla Firefox: Ctrl+Shift+I и Ctrl+Shift+C
Яндекс браузер: Ctrl+Shift+I и Ctrl+Shift+C
После проделанных действий, в этом же окне браузера откроется исходный код web страницы:
Посмотреть HTML CSS код сайта
Весь HTML код будет в левой большой колонке. А CSS стили – в правой.
Посмотреть css стили в браузере
Преимуществом данного способа, безусловно, является и то, что у пользователя есть возможность изменить исходный код, править стили. То есть, можно редактировать стили на сайте и посмотреть, как он будет выглядеть с теми или иными стилями, без необходимости сразу вносить изменения в файлы, которые находятся на серверах хостинга. Чтобы изменить или добавить программный код, необходимо сделать двойной клик на нужном фрагменте или участке. Конечно же исправление кода в браузере не внесется на серверах хостинга. Поэтому в дальнейшем, в любом случае, придется копировать этот код и прописать в файлы.
В этой видео-инструкции подробно рассказано и показано, как работать с инструментами разработчика:
Вот так вот просто в режиме онлайн, прямо в браузере, можно посмотреть исходный код страницы сайта, получить основные данные о HTML и CSS коде, изменить и скопировать их, без необходимости скачивать файлы этого сайта на компьютер.
Кстати, неопытных интернет-пользователей, изменивших код страницы и ждущих, что он сохранится, ждет разочарование. Ведь после обновления страницы, все изменения на ней пропадут. Этого мало, чтобы взломать сайт ��
Как посмотреть исходный код на телефоне Android
Еще хотелось бы заметить, что инструменты разработчика доступны не только в десктопной версии браузеров, то есть, на компьютерах и ноутбуках. На телефонах и планшетах (Android, IOS) можно также посмотреть исходный код.
Для этого следует добавить к URL инспектируемой страницы приставку view-source:
Как посмотреть php-код программы в браузере
Иногда требуется вывести php-код программы непосредственно на экран браузера или прочитать его и передать в виде текста. Итак, возможно ли передать код php-скрипта так, чтобы он был в том виде, в котором он содержится в файле на сервере? В этой статье рассмотрим короткую программу на языке программирования php, которая передаёт свой собственный код в браузер при обращении к ней. Рассмотрим сразу два варианта: как передать код программы на php в браузер для того, чтобы его можно было прочитать. И второй вариант: просмотр исходного кода php-скрипта в том виде, в котором он хранится в php-файле на сервере.
Как передать код программы на php в браузер
Сразу приведу готовый листинг программы, которая будет выдавать собственный код в браузер. После этого, разберём, как же он работает и, слегка его упростив, получим программу, которая передаёт php-код, который содержится в ней. Итак, собственно программа:
Как всё это работает:
В переменную $file_handle вносим имя файла, из которого запускается этот скрипт, из переменной среды окружения $_SERVER[‘SCRIPT_FILENAME’] и открываем его на чтение. Это позволит автоматически определять php-скрипт, код которого нужно передать для просмотра в браузере.
После этого запускаем цикл построчного обхода этого файла (пока в нём будет что читать): while (!feof($file_handle))
Читаем в переменную $line очередную строку из файла: $line = fgets($file_handle);
И выдаёт эту переменную в печать: echo htmlspecialchars($line) . ‘<br>’;
С последней строчкой возникают проблемы, так как функцией htmlspecialchars() мы преобразуем специальные символы в HTML-сущности. Такие, как угловые скобки и всё, что может быть интерпретировано браузером, как элементы языка HTML. И в конце строки вставляем HTML-тег <br> для того, чтобы новая строка отображалась в браузере с новой строчки.
Всё это хорошо работает и позволяет посмотреть php-код в браузере, но если посмотреть полученный код, он будет во-первых без табуляций и пробелов в начале строк в самом браузере, а в коде страницы, все HTML-сущности будут заменены на символы HTML. Ну и в-третьих, в этом коде будут встречаться вставленные HTML-теги <br> .
Но, в общем и целом, можно скопировать полученный в браузере php-код, вставить его в php-скрипт и он будет рабочим.
Как просмотреть исходный код php-скрипта в том виде, в котором он хранится в php-файле на сервере
Для того, чтобы избежать всех этих заморочек с HTML-разметкой, можно просто передать значение переменной $line в браузер: echo $line; , закомментировав строку с форматированным выводом:
И тогда, в самом браузере может собраться чёрте-что, но открыв HTML-код страницы можно увидеть исходный php-код со всеми пробелами, табуляциями и всем прочем, что находится в исходном php-скрипте. И именно этот код будет полностью идентичным с тем, что находится на сервере.
Резюме
Таким простым способом можно посмотреть php-код любого скрипта, находящимся на сервере, вызвав его способом, описанным выше.
Конечно для этого нужно иметь доступ к серверу. Однако, данный способ может быть полезным, когда требуется собрать php-скрипт из нескольких частей, передав эти части по обычному http или https протоколу.
Как посмотреть код страницы сайта | HTML
Я предпочитаю браузер Mozilla Firefox, именно с него сделанные скриншоты будут показаны ниже. В других браузерах есть похожие инструменты преимущественно с теми же горячими клавишами клавиатуры (см. комментарии ниже).
Горячие клавиши <Ctrl>+<Shift>+<C> или <F12>
- Навести курсором мышки на интересующий элемент.
- Нажать правую кнопку мышки — «Исследовать элемент».
- Открывается такой вот помощник для разработчиков. Теперь остаётся только нажать на ссылку адреса background
Горячие клавиши <Ctrl>+<U>
Как открыть полный исходный код страницы
- Нажать сочетание горячих клавиш, озвученных выше, либо, наведя на пустое место сайта и не выделяя какого-либо элемента, вызвать контекстное меню — «Исходный код страницы».
- Ввести в адресную Пример:
Как искать информацию в исходном коде: <Ctrl>+<F>
Горячими клавишами <Ctrl>+<F> выводится поле поиска, куда можно ввести любой текст.
Как открыть часть HTML сайта
- Выделить интересующий элемент.
- Нажать правую кнопку мышки — «Исходный код выделенного элемента».
Самое интересное, что я использую все эти методы анализа страницы, а не только <Ctrl>+<Shift>+<C> .
Серверные скрипты, такие как PHP, увидеть не удастся.
7 комментариев:
Иван Десятый Сурьезное дело NMitra Один из самых часто задаваемых вопросов Ирина Иванова Оля-я, я за тобой не успеваю! У тебя столько всяких нужностей для меня, но пока перевариваю, ты уже снова даешь очень важное! Я только успеваю в закладки складывать и плюсики ставить)))
Оля, а для особо одаренных можно в Хроме такое же сделать? NMitra Для Google Chrome:
<Ctrl>+<Shift>+<C> или http://4.bp.blogspot.com/-2EIj7WE6Zkg/U3MOBdio0CI/AAAAAAAAEbU/l2BPSXovmU0/s00/kod-elementa.png
<Ctrl>+<U> или http://1.bp.blogspot.com/-2IqqSc7LOTo/U3MOBdqx2XI/AAAAAAAAEbY/8-x8R5SDyHI/s00/kod-stranitsy.png
Посмотреть код выделенного фрагмента в отдельном окне мне не удалось. NMitra Сама такая же: несмотря на то, что закладки раскидываю по папкам их всё равно огромное множество. NMitra Для IE горячая кнопка F12 или пункт в контекстном меню "Проверить элемент" http://4.bp.blogspot.com/-zkakqbjuN7U/U3MXsQ0hqmI/AAAAAAAAEbs/P-1CfElpjjg/s00/proverit-element.png
Ирина Иванова Ага, взяла на замету)) Теперь можно дальше делать задуманное. Благодарю.
Как посмотреть php код сайта
Допустим, Вы создаёте свой сайт, сосотоящий из PHP-страниц, которые содержат HTML-код. Эти страницы находятся в корневой папке на хостинге (там же, где и главная index.php ). Понятно, что пользователь, если откроет в браузере средства разработчика, увидит лишь сгенерированный HTML-код.
Вопрос: возможно ли для пользователя при таком раскладе увидеть исходный PHP-код, не взламывая сервер с целью получить доступа к файлам? В частности, прошу Вас упомянуть в ответе программы для сохранения страниц с целью дальнейшего их просмотра с автономном-режиме.
Отмечен как дубликат участниками ReinRaus, A K ♦ , ermak0ff, user194374, Denis Bubnov 6 фев ’17 в 6:52 .
Подобный вопрос задавали ранее и на него уже получен ответ. Если представленные ответы не являются исчерпывающими, пожалуйста, задайте новый вопрос.
2 ответа 2
Это невозможно ровно до тех пор, пока вы случайно не выключите парсинг PHP-кода в .php-файлах.
Тем не менее, обратившись к файлам, к которым пользователь не должен обращаться, он потенциально так или иначе может навредить вам или даже узнать информацию, которую ему не следует знать. Поэтому рекомендуется делать так, чтобы в директории, доступной по HTTP, был всего 1 PHP-файл: index.php . Этот файл в свою очередь должен уже взаимодействовать с другими PHP-файлами, находящимися уровнем выше этого каталога. Примерно так:
Вы сможете обратиться к index.php , скажем, по адресу localhost/index.php , равно как к localhost/robots.txt и localhost/sitemap.xml , но обратиться к файлам MyClass.php и MyAnotherClass.php по HTTP вы никак не сможете.
php код работает на сервере. он отдаёт вашему браузеру страницу как вы её видите. Т.е. к клиенту летит результат работы пхп-файла в виде скомпилированного html. Не сам файл. То о чём вы спрашиваете возможно только по фтп, если через браузер.
Всё ещё ищете ответ? Посмотрите другие вопросы с метками php безопасность или задайте свой вопрос.
Связанные
Похожие
дизайн сайта / логотип © 2019 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2019.11.15.35459
Дата публикации: 2017-01-24
От автора: мне всегда было интересно, как работают чужие сайты. Так и хочется подсмотреть код стороннего скрипта, чтоб и себе такой «замутить». Вот только PHP – это серверный язык, поэтому «списать» чужой код не удастся. Но все-таки, как вывести файл PHP?
О чем это я?
Согласен, заголовок статьи больше ориентирован на продвинутых юзеров. Если вы таким не являетесь (пока), я сейчас поясню, почему скрипт PHP просто так не получится «подсмотреть».
Этот программный язык является серверным. То есть, выполняется на стороне сервера (на хостинге), а не на стороне клиента (в пользовательском браузере). Чтобы все это продемонстрировать, я вставлю в HTML несколько строк кода PHP.
Бесплатный курс по PHP программированию
Освойте курс и узнайте, как создать динамичный сайт на PHP и MySQL с полного нуля, используя модель MVC
В курсе 39 уроков | 15 часов видео | исходники для каждого урока
Теперь сохраним его в файле с расширением .php и откроем в браузере.
Пока ничего необычного. Но теперь давайте просмотрим разметку страницы в браузере:
В ней мы не увидим код скрипта, поэтому вывести файл PHP стороннего ресурса не удастся, если только у вас нет доступа к его серверу. Что мы и доказали путем эксперимента .
А если надо?
Вы, как владелец собственного ресурса, можете предоставить своим пользователям доступ к определенным файлам. Для этого нужно отобразить их содержимое в браузере. Чем мы и займемся.
Чтобы реализовать данное решение, придется выполнить несколько операций:
Считать его содержимое в буфер.
Вывести содержимое на экран.
Бесплатный курс по PHP программированию
Освойте курс и узнайте, как создать динамичный сайт на PHP и MySQL с полного нуля, используя модель MVC
В курсе 39 уроков | 15 часов видео | исходники для каждого урока
Так можно в PHP вывести содержимое текстового файла, картинку. Но код скрипта или разметку страницы точно не получится. Проверено на себе .
Отображаем скрипт
Немного «подровняем» предыдущий пример с помощью функции htmlspecialchars(), которая преобразовывает весь программный код в «читаемый» для браузера:
А можно вообще обойтись всего несколькими строчками. Для этого нам понадобится функция file_get_contents():
Но перед тем как вывести файлы из папки PHP, хотелось бы сделать «допилинг» предыдущего примера. Чтобы код скрипта отображался на экране построчно, нужно все содержимое файла преобразовать в массив. Воспользуемся функцией file():
Получаем имена файлов
Теперь с помощью PHP выведем список файлов. Так как я по своей натуре личность ленивая, то использую самый короткий метод без всяких там функций типа opendir():
В примере для получения имен файлов мы использовали функцию glob(). Она осуществляет поиск согласно шаблону, который передается ей в качестве обязательного параметра.
В качестве необязательных аргументов данная функция принимает различные флаги. Например, с помощью флага GLOB_NOSORT можно отключить сортировку по алфавиту, применяемую функцией к элементам возвращаемого массива.
Ну, на этом и закончим. Вывести список файлов в папке PHP мы научились, отображать содержимое скриптов тоже. Думаю, пока я удовлетворил ваше любопытство .
Бесплатный курс по PHP программированию
Освойте курс и узнайте, как создать динамичный сайт на PHP и MySQL с полного нуля, используя модель MVC
В курсе 39 уроков | 15 часов видео | исходники для каждого урока
Разработка веб-приложения на PHP
Создайте веб-приложение на PHP на примере приема платежей на сайте
Иногда требуется вывести php-код программы непосредственно на экран браузера или прочитать его и передать в виде текста. Итак, возможно ли передать код php-скрипта так, чтобы он был в том виде, в котором он содержится в файле на сервере? В этой статье рассмотрим короткую программу на языке программирования php, которая передаёт свой собственный код в браузер при обращении к ней. Рассмотрим сразу два варианта: как передать код программы на php в браузер для того, чтобы его можно было прочитать. И второй вариант: просмотр исходного кода php-скрипта в том виде, в котором он хранится в php-файле на сервере.
Как передать код программы на php в браузер
Сразу приведу готовый листинг программы, которая будет выдавать собственный код в браузер. После этого, разберём, как же он работает и, слегка его упростив, получим программу, которая передаёт php-код, который содержится в ней. Итак, собственно программа:
Как всё это работает:
В переменную $file_handle вносим имя файла, из которого запускается этот скрипт, из переменной среды окружения $_SERVER[‘SCRIPT_FILENAME’] и открываем его на чтение. Это позволит автоматически определять php-скрипт, код которого нужно передать для просмотра в браузере.
После этого запускаем цикл построчного обхода этого файла (пока в нём будет что читать): while (!feof($file_handle))
Читаем в переменную $line очередную строку из файла: $line = fgets($file_handle);
И выдаёт эту переменную в печать: echo htmlspecialchars($line) . ‘
‘;
С последней строчкой возникают проблемы, так как функцией htmlspecialchars() мы преобразуем специальные символы в HTML-сущности. Такие, как угловые скобки и всё, что может быть интерпретировано браузером, как элементы языка HTML. И в конце строки вставляем HTML-тег
для того, чтобы новая строка отображалась в браузере с новой строчки.
Всё это хорошо работает и позволяет посмотреть php-код в браузере, но если посмотреть полученный код, он будет во-первых без табуляций и пробелов в начале строк в самом браузере, а в коде страницы, все HTML-сущности будут заменены на символы HTML. Ну и в-третьих, в этом коде будут встречаться вставленные HTML-теги
.
Но, в общем и целом, можно скопировать полученный в браузере php-код, вставить его в php-скрипт и он будет рабочим.
Как просмотреть исходный код php-скрипта в том виде, в котором он хранится в php-файле на сервере
Для того, чтобы избежать всех этих заморочек с HTML-разметкой, можно просто передать значение переменной $line в браузер: echo $line; , закомментировав строку с форматированным выводом:
И тогда, в самом браузере может собраться чёрте-что, но открыв HTML-код страницы можно увидеть исходный php-код со всеми пробелами, табуляциями и всем прочем, что находится в исходном php-скрипте. И именно этот код будет полностью идентичным с тем, что находится на сервере.
Резюме
Таким простым способом можно посмотреть php-код любого скрипта, находящимся на сервере, вызвав его способом, описанным выше.
Конечно для этого нужно иметь доступ к серверу. Однако, данный способ может быть полезным, когда требуется собрать php-скрипт из нескольких частей, передав эти части по обычному http или https протоколу.