Как открыть инспектор в браузере

Веб-инспекторы – просмотр кода страницы и её составляющих элементов

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

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

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

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

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

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

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

Источник

Обзор инструментов разработки в браузерах

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

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

Как открыть инструменты веб-разработчика в вашем браузере?

Панель разработчика находится в нижней части вашего браузера :

Как её отобразить? Есть три варианта:

Inspector: DOM обозреватель и CSS редактор

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

Если вы не видите Inspector,

Обзор DOM inspector

Для начала, попробуйте нажать правой кнопкой мыши (Ctrl+клик) по элементу HTML в DOM inspector и посмотрите на контекстное меню. Пункты меню могут различаться в разных браузерах, но важными из них являются одни и те же:

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

Обзор CSS редактора

По умолчанию, CSS редактор отображает CSS-свойства применённые к текущему выбранному элементу:

Эти функции особенно удобны:

Вы должно быть уже заметили другие вкладки в CSS редакторе:

Узнать больше

Узнать больше об Inspector в различных браузерах:

Консоль JavaScript

Консоль JavaScript невероятно полезный инструмент для отладки JavaScript, если он не работает, как ожидалось. Она позволяет вам загружать JavaScript вопреки порядку загрузки скрипта в браузере, и докладывает об ошибках как только браузер пытается выполнить ваш код. Для доступа к консоли из любого браузера просто нажмите на кнопку Console. (В Internet Explorer, нажмите Ctrl + 2.) Откроется окно, как показано ниже:

Чтобы понять, что происходит, попробуйте ввести фрагменты кода в консоль один за другим (и затем нажмите Enter):

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

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

Узнать больше

Узнать больше о JavaScript консоли в различных браузерах:

Источник

Вся правда о Chrome (и не только) Web Inspector. Часть 1

Я постараюсь сделать самое полное и подробное описание возможностей Web Inspector, на русском языке.
В первой серии мы залезем в настройки, посмотрим, что умеет консоль и поиграемся с панелью «Elements».

Так как Web-Inspector не переведен на Русский, я буду сохранять оригинальные названия.

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

Какой версией пользоваться?

Почти все описанное здесь, тем не менее, будет работать и в других версиях Web Inspector.

Запускаем Web Inspector

Есть несколько способов открыть Web Inspector:

Вы можете открыть Web-Inspector для Web Inspector, для этого нужно открыть его в отдельной окошке:, а затем запустить его снова одним из приведеннм выше способов.

Настраиваем Web Inspector

Экспериментальные функции

Все новые инструменты сначала попадают в «экспериментальные функции». Чтобы включить их, зайдите в «about:flags», найдите там опцию Enable Developer Tools experiments (Включить экспериментальные инструменты разработчика).

После этого перезапустите браузер.

Будьте осторожны с экспериментальными функциями, они могут работать не так как ожидается и вызывать ошибки.

Я буду рассматривать экспериментальные функции в одной из следующих статей.

Настройки

Давайте откроем диалог настроек нажав на эту кнопку , в правом нижнем углу и посмотрим, что там есть интересного.

Dock to the right

Закрепляет Web Inspector в правой части страницы.
На больших мониторах это позволяет лучше использовать горизонтальное пространство, к тому же, позволяет легко менять широту видимой области браузера, что полезно для быстрого тестирования media queries.

По умолчанию Web Inspector снизу. Можно вытащить его в отдельное окошко, нажав на

Disable Cache

Выключает кэш. Весьма полезная опция, при отладке скриптов и стилей.
Еще можно очистить кэш из панели «Network», нажав там правой кнопкой и выбрав «Clear Browser Cache»

Disable JavaScript

Override device metrics

Более серьезный способ, для тестирования media queries (англ.). Позволяет задать ширину и высоту экрана, а так же маштаб шрифта. В идеале хотелось бы несколько готовых пресетов для популярных мобильных платформ.

Emulate touch events

Позволяет эмулировать touch-события. Полезно, для тестирования мобильных приложений.

Enable source maps

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

Log XMLHttpRequests

Preserve log upon navigation

Если выбрана эта опция, содержимое консоли будет сохранено даже при обновлении страницы.

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

Чтобы посмотреть список горячих клавиш, откройте любую вкладку кроме консоли и нажмите там » ? » (В английской раскладке).

Обратите внимание, что если окошко не влезает полностью, оно обрезается и может скрыть часть информации.

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

Консоль

Что показывать

Можно выбрать, что именно хотим видеть в консоли с помощью этой панели снизу:

Избавляемся от сообщений об ошибках в расширениях

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

Изменяем размер шрифта

Почему-то CTRL+Scroll в консоли не работает.

Зато можно использовать CTRL + для увеличения шрифта, CTRL — для уменьшения и
CTRL + 0 для изначального масштаба.

У меня это работает только в Chrome Canary build, в стабильной версии увеличивается только сам документ.

Команды консоли

Очищаем консоль

Есть несколько способов очистить консоль:

Взаимодействие со вкладкой «Elements»

Выбираем элементы

Изучаем объекты

Есть несколько функций, ползволяющих узнать больше, об элементе. В основном они дублируют функционал панелей из вкладки «Elements».

Следим за событиями

Можно следить за всем, что происходит с элементом, с помощью функции

С помощью второго аргумента можно выбрать тип событий, за которыми вы ходите следить:

Копируем информацию в буфер обмена

Вкладка «Elements»

Эта панель содержит в себе все DOM-Дерево нашей страницы, обновляющееся в режиме реального времени.

Каждый раз, когда на странице изменяются элементы, они обновляются в дереве и наоборот.

Если вы хотите выбрать какой-то элемент из документа, нажмите на кнопку с лупой внизу или CTRL+SHIFT+C и выберите любой элемент.
При наведении мышкой будут показан CSS пусть до элемента, его размеры и отступы.

Путь до элемента

В самом низу панели можно увидеть путь до Элемента. Можно выбрать любой родительский элемент, кликнув на него.

Работа с деревом

Передвигаться по дереву можно стрелками (если вы в другой секции, то можно вернуть фокус, с помощью CTRL+ вверх/вниз ).

Редактирование

Drag&Drop

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

Контекстное меню

Подробная информация

Выделив элемент, можно посмотреть информацию про него, в панели справа.

Computed style

Styles

Можно выключить любое выражение, убрав галку из чекбокса слева.

Раздел element.style показывает стили прописанные в style атрибуте в HTML коде документа,
а раздел Matched CSS Rules показывают все селекторы, заданные с CSS файлах и совпавшие с выбранным элементом.

Добавление правил и выражений

Вы можете добавить свой селектор, нажав на кнопку , а удалить потом не сможете.

Можно добавить новое выражение в уже имеющийся селектор, нажав на закрывающую фигурную скобку правила (или начав изменять последнее выражение нажать Tab ).

Псевдоклассы

Отображение цветов

Нажав на кнопку с шестеренкой , As authored — покажет цвета в том формате котором они были заданы.

Изменение числовых значений

Числовые значения можно изменять с помощью клавиатуры.

Metrics

Здесь можно увидеть размеры и отступы элемента (А если для элемента задан position, то и положение).

Вы можете изменить здесь любое значение, нажав на него дважды.

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

Properties

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

DOM-Breakpoints

Здесь список установленных Dom-Брейкпоинтов.Можно быстро найти элемент, кликнув на название, выключить брейкпоинт, убрав галку, удалить брейкпоинт, нажав на него правой кнопкой мыши.

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

Сохранение изменений

Web Inspector позволяет нам легко модифицировать CSS код. К сожалению, простого способа, позволяющегобыстро сохранить изменения не существует. Есть несколько вариантов

Что дальше?

Немного полезных ссылок

В следующий серии

Я часто использую Web Inspector в работе, но могут быть вещи, которые я не знаю, или забыл упомянуть, поэтому я буду рад любым исправлениям или дополнениям.

Источник