Веб-инспекторы – просмотр кода страницы и её составляющих элементов
Для того, чтобы сделать подробный просмотр (инспект) того или иного элемента на странице вам понадобиться сделать клик правой кнопкой мыши (пкм) и выбрать в выпадающем меню один из следующих пунктов: «проинспектировать элемент» (Opera); «исследовать элемент», а лучше «инспектировать элемент с помощью Firebug» (Firefox); «просмотр кода элемента» (Chrome). Горячие клавиши для вызова инспектора у Оперы: Ctrl + Shift + I.
У вас должно появиться что-то наподобие этого:
Благодаря встроенному инспектированию элементов, обучение практическим аспектам вёрстки сайтов может стать для вас настоящей игрой. Лично я, таким образом, очень часто просматриваю понравившиеся мне оригиналы бэкграундов сайтов (картинки, заключённые в CSS свойство background), а также смотрю всю подноготную вёрстки того или иного сайта, чтобы научится новым для себя приёмам, чего и вам советую.
В Opera Dragonfly доступно отслеживание сетевого трафика, имеется журнал ошибок, встроенная консоль, интеллектуальная подсветка кода и элементов на странице, отладчик JavaScript, просмотр ресурсов страницы и многое другое.
Стоит отметить, что Opera Dragonfly изначально встроена в каждую версию Оперы и обновляется автоматически, без уведомлений и вашего участия.
Также хочется продемонстрировать такую интересную особенность встроенного веб-инспектора Mozilla Firefox, как 3D просмотр, вот уж действительно порадовали:
Самое главное, что вы должны были узнать и понять об инспектировании элементов страницы я уже написал выше, остальное, на мой взгляд, вопрос практики, а не теории, поэтому на сегодня всё, спасибо за ваше внимание, успешной разработки сайтов!
Веб-инспектор Safari руководство
О веб-инспекторе Safari
Примечание: Этот документ был раньше названным Руководством по Инструментам Разработчика Safari. Это было обновлено для поддержки Safari 6.1.
Веб-Инспектор является инструментом веб-разработки с открытым исходным кодом, встроенным в Safari, упрощающий моделировать, оптимизировать и отлаживать Ваш веб-контент на iOS и OS X.
Считайте это руководство, чтобы начать использовать веб-Инспектора.
Сразу
Этот документ организован областями веб-интерфейса Inspector.
Начать
Изучите, как включить и настроить появление веб-Инспектора.
Соответствующая глава: быть ориентированным
Проверьте DOM и ресурсы
В основе веб-Инспектора возможность проверить Объектную модель документа (DOM). Веб-Инспектор показывает Вам структуру Вашего DOM, как воспринято механизмом рендеринга Safari, WebKit. Но DOM не все, что можно проверить. Внешние ресурсы и локально хранившие данные — такие как сценарии, таблицы стилей и автономное хранение — могут быть проверены, обеспечив понимание для доступных данных к Вашему веб-контенту.
Соответствующая глава: ресурсы и DOM
Измерьте и улучшите производительность страницы
Веб-Инспектор обеспечивает комплект инструментов, которые можно использовать для определения количества скорости веб-страниц. Можно контролировать сетевые запросы, как они загружают, наблюдают вычисления макета страницы, выполняемые WebKit, представляющим механизм, и профилируют эффективность функций JavaScript и селекторов CSS.
Соответствующая глава: временные шкалы
Отладка JavaScript
Повернитесь к веб-Инспектору, когда спутается Ваша логика фронтэнда. Веб-Инспектор предлагает среду отладки, позволяющую Вам выполнение сценария паузы, и наблюдайте значения своих переменных, поскольку они определяются.
Соответствующая глава: отладчик
Взаимодействуйте с консолью
Поднимите капот своих веб-страниц и взаимодействуйте непосредственно с Вашим веб-контентом в консоли.
Соответствующая глава: консоль
Как использовать этот документ
При чтении этого документа следуйте вместе с веб-Инспектором, открытым в Safari. В то время как Вы читаете о ее функциях практического опыта обучения, рекомендуется активно использовать веб-Инспектора на этой странице.
См. также
WWDC 2013: Узнавание веб-Инспектора обеспечивает сквозной контроль веб-Инспектора UI.
WWDC 2013: Получающий все возможное веб-Инспектор описывает усовершенствованные понятия использования питания веб-Инспектора в ваших интересах.
Руководство по Разработке Расширений Safari поставляет поэтапные направления для создания расширений Safari с помощью Дополнительного Разработчика.
Списки ссылок Расширений Safari классы JavaScript, методы и свойства можно получить доступ с расширениями Safari.
Руководство по веб-контенту Safari предлагает руководство для разработки веб-контента для iOS.
Отладка в мобильном Safari
Есть несколько способов потестировать и подебажить сайт или веб-приложение в мобильном Safari:
Во всех трех случаях понадобится Mac и десктопный Safari со включённым Web Inspector.
Как включить Web Inspector в Safari
Если в воем Safari на Mac вы не можете найти веб-инспектор, значит его нужно включить. Для этого, из главного меню перейдите Safari – Preferences – Advanced (Safari – Настройки – Дополнения), отметьте пункт Show Develop menu in menu bar (Показывать меню Разработка в строке меню). В меню появится пункт Develop (Разработка), а в контекстном меню Safari, пункт для вызова веб-инспектора Inspect Element (Исследовать Элемент).
Горячие клавиши для вызова веб-инспектора: Opt + Cmd + I
Используя команды меню Develop, можно просматривать код веб-страниц, менять юзер агент, включать и отключать различные элементы страниц, чистить кэш и другое.
Отладка мобильного Safari с помощью User Agent и Web Inspector
Самый простой способ заглянуть «под капот» мобильного сайта – использовать веб-инспектор десктопного Safari, эмулируя необходимое iOS устройство. Способ не заменит честного тестирования на физических устройствах, так как не учитывает всех их особенностей, однако будет полезен при верстке или быстрой диагностики проблемы, когда реального устройства нет под рукой.
Чтобы эмулировать работу сайта на мобильном Safari, перейдите на сайт, включите режим адаптивного дизайна Develop – Enter Responsive Design Mode (Разработка – Войти в режим адаптивного дизайна), затем выберите устройство и при необходимости юзер агент (версию мобильного браузера).
Для отладки используйте веб-инспектор. Доступны те же инструменты инспектора, что и для десктопной версии сайтов, включая консоль.
Отладка мобильного Safari с помощью iPhone или iPad
Часто ошибка может воспроизводится на определенной версии браузера, операционной системе или устройстве. Поэтому способ тестирования и отладки на реальных iPhone или iPad самый «честный» из перечисленных. Однако он же самый неудобный и затратный: множество устройств надо иметь при себе, заряжать, поддерживать.
Чтобы провести отладку, подключите кабелем iPhone или iPad к Mac. Если появится сообщение Доверять этому компьютеру?, выберите Да, тем самым разрешив доступ к устройству.
В настройках мобильного Safari: Settings – Safari – Advanced (Настройки – Safari – Дополнения) включите Web Inspector (Веб-инспектор).
На устройстве в мобильном Safari перейдите на сайт, отладку которого хотите провести. Затем откройте Safari на Mac. Если устройство корректно подключилось, то в меню Develop (Разработка) появится пункт с названием вашего устройства, а в подменю будет пункт с названием открытого на устройстве сайта. Клик по нему запустит веб-инспектор и вы сможете провести отладку.
Отладка мобильного Safari с помощью симулятора iOS в Xcode
Удобный способ для разработки и тестирования адаптивных сайтов и веб-приложений на устройствах максимально приближенных к реальным.
Симулятор все же не реальное устройство, за то не требуется держать «зоопарк» различных девайсов, а переключение между ними происходит в несколько кликов мыши.
Откройте Xcode. В меню выберите Xcode – Open Developer Tool – Simulator (Xcode – Открыть инструменты разработчика – Симулятор). Когда симулятор запустится, рекомендую сразу закрепить его в Dock, чтобы каждый раз не запускать Xcode.
Выберите устройство для эмуляции в меню Hardware – Device.
В устройстве на эмуляторе откройте Safari и перейдите на сайт. Затем откройте Safari на Mac. В меню Develop (Разработка) появится пункт с Simulator – Модель выбранного устройства, а в подменю будет пункт с названием открытого на устройстве сайта. Клик по нему запустит веб-инспектор и можно будет провести отладку.
Полезные ссылки
На этом всё. Но вы можете поддержать проект. Даже небольшая сумма поможет нам писать больше полезных статей.
Если статья помогла или понравилась, пожалуйста поделитесь ей в соцсетях.
Быстрый совет: отладка Mobile Safari с помощью Web Inspector
Russian (Pусский) translation by Yuri Yuriev (you can also view the original English article)
С недавним выпуском Safari 6 и iOS 6 теперь можно использовать веб-инспектор для создания и отладки веб-сайтов на рабочем столе и на мобильном Safari. Как? Процесс настройки простой. Следуйте этому руководству, и у вас под рукой появятся очень мощные средства отладки для мобильных устройств практически мгновенно.
Современные инструменты для разработчиков браузеров оказали огромную помощь в создании веб-сайтов и веб-приложений. Chrome имеет инструменты для разработчиков. Fire Fox? Firebug. Сафари? Веб-инспектор. Все чрезвычайно мощные инструменты в веб-разработке.
Как бы то ни было, до этого момента отладка веб-сайтов и веб-приложений на мобильных устройствах была трудной задачей. Поскольку Safari и Chrome работают на движке webkit, есть много общего в том, как рабочий стол и мобильный браузер отображают веб-макет. Таким образом, большинство дизайнеров/разработчиков создают и настраивают свои веб-сайты на рабочем столе, используя один из этих браузеров, предполагая, что в результате действия движка webkit страница будет одинаково выглядеть и на мобильном устройстве.
Однако мобильные и настольные платформы на самом деле совершенно разные. Они имеют различную ёмкость памяти, потенциал производительности, устройства ввода и сетевое подключение. Поэтому стало крайне важно, чтобы отладочные инструменты дизайнера для мобильных устройств стали более эффективными и соответствовали аналогам на рабочем столе.
Новые программные версии Apple для iOS 6 и Safari 6 привнесли множество функций инструментов отладки для настольных компьютеров, которые мы все знаем и любим по мобильным устройствам. Этот урок покажет простой процесс получения настроек для отладки мобильных сайтов с помощью веб-инспектора Safari.
Вначале обратите внимание на совместимость: для пользователей Windows есть несколько плохих новостей. Вы можете отлаживать только удалённый веб-инспектор на Mac. Safari 6 для Windows недоступен. Кроме того, Safari 6 доступен только для компьютеров Mac с OSX Lion и выше.
Методы использования веб-инспекторов
Существует два метода использования веб-инспектора в мобильном Safari:
Мы рассмотрим оба этих метода и выберем наиболее подходящий для вашей ситуации.
Шаг 1. Убедитесь, что вы в курсе
Реальный метод устройства: чтобы использовать веб-инспектор в тандеме с реальным iDevice, вам понадобится следующее:
Метод виртуального устройства: чтобы использовать веб-инспектор в тандеме с симулятором iOS, вам понадобится следующее:
Проверка версий программного обеспечения: чтобы проверить, используете ли вы iOS 6 на вашем iDevice, перейдите в «Settings > General > About» на вашем устройстве.
Чтобы проверить, используете ли вы Safari 6, откройте панель инструментов Safari и нажмите «Safari> About Safari».
Чтобы убедиться, что вы используете Lion, нажмите на логотип Apple в строке меню и выберите «About this Mac»
Чтобы убедиться, что вы используете правильную версию Xcode, откройте Xcode и выберите «Xcode> About Xcode»
Шаг 2. Включение инструментов разработчика
Вы должны включить инструменты разработчика и веб-инспектора в настольных и мобильных версиях Safari.
Метод реального устройства: если вы собираетесь использовать реальное устройство, подключите его к своему Mac через USB.
Метод виртуального устройства: если вы собираетесь использовать имитатор iOS, откройте Xcode, затем щёлкните правой кнопкой мыши значок док-станции и выберите «Open Developer Tool > iOS Simulator».
Mobile Safari: на вашем реальном iDevice или в симуляторе iOS перейдите в «Settings > Safari > Advanced» и включите «Web Inspector».
Desktop Safari: если вы этого ещё не сделали, убедитесь, что ваши инструменты разработчика в Safari включены. Вы сможете в этом убедиться, открыв «Develop» в строке меню.
Если вы не видите «Develop» в строке меню, перейдите в панель меню и нажмите «Safari > Preferences > Advanced» и установите флажок «Show develop menu in menu bar».
Шаг 3. Проверьте свой веб-сайт
Теперь, когда у вас открыт iOS Simulator или ваш iDevice подключен к Mac через USB (или оба!), вы готовы начать использовать веб-инспектор на своем сайте.
Чтобы начать проверку веб-сайта, у вас должно быть мобильное Safari, запущенное на устройстве и имеющее одну из вкладок, открытую для веб-сайта. Если у вас нет мобильного Safari, вы увидите сообщение «No Inspectable Applications».
Чтобы начать проверку, просто введите URL-адрес страницы, которую вы хотите проверить в мобильном Safari, а затем выберите этот сайт в меню «Develop». Вы можете начать проверку сайтов на своем реальном iDevice или с симулятора iOS. Когда вы выберете страницу, на странице появится синее наложение, указывающее ваш выбор.
Выбрав сайт, веб-инспектор Safari откроется и позволит вам начать проверку вашего веб-сайта. Вот оно!
Заключение
Теперь, когда в ваших руках есть веб-инспектор Safari, у вас гораздо больше контроля при создании и отладке веб-сайтов и веб-приложений.
Ниже примеры некоторых вещей, которые вы можете теперь делать, когда отлаживаете мобильные сайты:
Вся правда о 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 в работе, но могут быть вещи, которые я не знаю, или забыл упомянуть, поэтому я буду рад любым исправлениям или дополнениям.
