Инспектор кода chrome

Заметка: активирована адаптивная версия сайта, которая автоматически подстраивается под небольшой размер Вашего браузера и скрывает некоторые детали сайта для удобства чтения. Приятного просмотра!

04.04.2013

Раздел: Инструменты

Здравствуйте, уважаемые читатели блога Siteon! В этой статье мы обсудим то, без чего я просто не представляю успешное обучение вёрстке сайта, речь пойдёт о полнофункциональных наборах средств веб-разработчика таких как Opera Dragonfly, Mozilla Firefox с его плагином Firebug и тому подобных веб-инспекторах. Так как для сёрфинга по Интернету я предпочитаю использовать браузер Opera, то и в данной статье я сделаю упор именно на Opera Dragonfly 1.1, однако для вас самое главное — это просто узнать, что такие инструменты есть, их достаточно много и они есть для каждого браузера, а потому грех ими не пользоваться.

Для того, чтобы сделать подробный просмотр (инспект) того или иного элемента на странице вам понадобиться сделать клик правой кнопкой мыши (пкм) и выбрать в выпадающем меню один из следующих пунктов: «проинспектировать элемент» (Opera); «исследовать элемент», а лучше «инспектировать элемент с помощью Firebug» (Firefox); «просмотр кода элемента» (Chrome). Горячие клавиши для вызова инспектора у Оперы: Ctrl + Shift + I.

У вас должно появиться что-то наподобие этого:

Итак, перед нами мощнейшее оружие для вёрстки, с помощью которого можно просмотреть, а благодаря наглядности и понять, как и что у нас работает. Мы можем просматривать CSS файлы любого сайта, HTML и JavaScript коды, а также «на лету» их менять! Да, дорогие читатели, одна из интереснейших особенностей инспектирования элементов заключается в том, что мы можем, так сказать, редактировать любой сайт «онлайн», и смотреть, что будет, если бы разработчики здесь сделали так, а здесь эдак. Мы можем подключать, отключать или менять то или иное CSS свойство, проигрывать яваскрипт, даже дописывать свой текст посреди чужой статьи и тому подобное, естественно, всё это видно только нам.

Благодаря встроенному инспектированию элементов, обучение практическим аспектам вёрстки сайтов может стать для вас настоящей игрой.

Лично я, таким образом, очень часто просматриваю понравившиеся мне оригиналы бэкграундов сайтов (картинки, заключённые в CSS свойство background), а также смотрю всю подноготную вёрстки того или иного сайта, чтобы научится новым для себя приёмам, чего и вам советую.

В Opera Dragonfly доступно отслеживание сетевого трафика, имеется журнал ошибок, встроенная консоль, интеллектуальная подсветка кода и элементов на странице, отладчик JavaScript, просмотр ресурсов страницы и многое другое.

Предлагаю посмотреть этот короткий и красивый видео-ролик, посвящённый встроенному веб-инспектору от Оперы — Opera Dragonfly:

Стоит отметить, что Opera Dragonfly изначально встроена в каждую версию Оперы и обновляется автоматически, без уведомлений и вашего участия.

Также хочется продемонстрировать такую интересную особенность встроенного веб-инспектора Mozilla Firefox, как 3D просмотр, вот уж действительно порадовали:

Самое главное, что вы должны были узнать и понять об инспектировании элементов страницы я уже написал выше, остальное, на мой взгляд, вопрос практики, а не теории, поэтому на сегодня всё, спасибо за ваше внимание, успешной разработки сайтов!

С уважением, Сергей Рудь.

Следующая статья >>

Статья оказалась вам полезной? Подпишитесь, чтобы не пропустить новые!

Вы можете помочь развитию проекта, сделав всего 1 клик:

Спасибо!

Подписка по Email

Получайте уникальные уроки о создании, продвижении и заработке на сайте первыми! Пора опережать конкурентов и экономить своё время.

Подписка
  • Следовать в twitter:
  • Подписаться по RSS:
  • Подписаться по E-mail:
  • Следить ВКонтакте:
  • Следить на Facebook:

.

Я предпочитаю браузер Mozilla Firefox, именно с него сделанные скриншоты будут показаны ниже.

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

Горячие клавиши или

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

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

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

Горячие клавиши

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

  • Нажать сочетание горячих клавиш, озвученных выше, либо, наведя на пустое место сайта и не выделяя какого-либо элемента, вызвать контекстное меню — «Исходный код страницы».
  • Ввести в адресную view-source:URL_интересующей_страницы Пример: view-source:http://shpargalkablog.ru/2014/05/see-html.html

Как искать информацию в исходном коде:

Горячими клавишами выводится поле поиска, куда можно ввести любой текст.

Как открыть часть HTML сайта

  1. Выделить интересующий элемент.
  2. Нажать правую кнопку мышки — «Исходный код выделенного элемента».

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

Серверные скрипты, такие как PHP, увидеть не удастся.

.

Top-Inspector – сервис проверки позиций в поисковых системах Яндекс и Google.

Позиции в сервисе проверяются ежедневно. Основной функционал сервиса:

  • ежедневная проверка позиций сайта
  • до 4-х регионов в одном проекте
  • сравнение позиций с конкурентами
  • проверка релевантных страниц
  • просчет wordstat
  • история позиций ключевого слова
  • просчет топов (3/10/30) — с возможностью фильтрации
  • импорт слов из Яндекс Метрики и Google Analytics
  • группировка и сортировка фраз
  • отчеты позиций за любую дату (сравнение дат, сравнение периода)
  • выгрузка отчетов в CSV и XLS
  • гостевой доступ
  • автоматическая рассылка отчетов на e-mail
  • получение данных по API
  • реферальная программа

Стоимость снятия позиций по одному слову в месяц (каждый день) по двум поисковым системам составляет 60 копеек. Стоимость проекта рассчитывается из количества слов умноженных на количество регионов.

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

Зарегистрироваться!

Бесплатный съём 500 позиций по двум ПС

Добавить комментарий

Закрыть меню