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

Я предпочитаю браузер Mozilla Firefox, именно с него сделанные скриншоты будут показаны ниже. В других браузерах есть похожие инструменты преимущественно с теми же горячими клавишами клавиатуры (см. комментарии ниже).

Горячие клавиши `<Ctrl>+<Shift>+<C>` или `<F12>`

Задача: скопировать изображение паучка.

Навести курсором мышки на интересующий элемент.
Нажать правую кнопку мышки — «Исследовать элемент».
Открывается такой вот помощник для разработчиков. Теперь остаётся только нажать на ссылку адреса background

Если щёлкнуть на серые треугольнички, то можно посмотреть вложенные элементы. Путь от предка к родителю показан голубыми стрелками. Есть эффективный поиск тегов и их количества. Я также часто открываю вкладки «Вычислено» и «Блоковая модель». Да и возможности других вкладок и иконок занимательны.

Горячие клавиши `<Ctrl>+<U>`

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

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

Ввести в адресную

view-source:URL_интересующей_страницы

Пример:

view-source:http://shpargalkablog.ru/2014/05/see-html.html

Как искать информацию в исходном коде: `<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
Ирина Иванова: Ага, взяла на замету)) Теперь можно дальше делать задуманное. Благодарю!!!

Как посмотреть код страницы сайта | HTML

Горячие клавиши <Ctrl>+<Shift>+<C> или <F12>

Горячие клавиши <Ctrl>+<U>