Объясняем на примерах из вашей (и нашей) жизни.
Режим Разработчика – специальное меню в стандартном браузере Safari, которое открывает доступ к дополнительным функциям приложения. Часть возможностей пригодится разработчикам ПО и сайтов, но каждый из вас найдет в нем нечто полезное.
Для активации меню, которое скрыто по умолчанию, достаточно перейти в настройки (Safari – Настройки
), открыть раздел Дополнения
и активировать последний флаг на странице.
После этого в строке меню появится новый раздел Разработка .
Теперь давайте посмотрим, что интересного можно найти в открывшемся разделе.
Очень часто бывает необходимо открыть тот или иной сайт в Сhrome или другом приложении. Делать это следует, например, для просмотра 360-градусного видео на YouTube или корректного отображения Flash на странице.
Чтобы не копировать путь из адресной строки и не вставлять его в другом приложении, используем пункт Открыть страницу с помощью из меню Разработка .
Когда нужно сохранить данные с сайта или загрузить картинку, которая защищена от выделения, пригодится данный режим просмотра. Открыть его можно из меню Разработка – Показать ресурсы страницы
или воспользоваться сочетанием клавиш Command + Alt (Option) + A
.
Слева в браузере можно просмотреть используемые на странице шрифты и картинки. Продвинутым пользователям пригодятся скрипты, фреймы и таблицы стилей.
Когда нужно удалить все служебные данные, сохраненные в памяти части страниц и прочий мусор, можно быстро очистить системный кэш.
Такая опция расположена в меню Разработка – Очистить кэши (Command + Alt (Option) + E ), а ниже есть возможность вовсе отключить кэширование данных при работе с браузером.
Во время работы через медленный Wi-Fi в кафе или отеле может пригодиться функция отключения загрузки скриптов и картинок. Находится она в нижнем блоке меню Разработка.
Каждый пункт отвечает за отключение определенных данных на странице. Для экономии трафика или повышения скорости загрузки страниц используем отключение картинок, остальные пункты применяем в экспериментальных целях при некорректной работе того или иного сайта.
Когда понадобится узнать, как выглядит страница на экране iPhone или iPad, обязательно пригодится адаптивный режим просмотра, который разработчики OS X назвали Пользовательский агент
.
Находится он в уже знакомом меню Разработка . После активации данного режима над открытой страницей появятся кнопки для переключения вариантов отображения. Всего в пару нажатий можно увидеть верстку сайта на экране iPhone и iPad любой модели.
Есть режимы отображения страницы в других браузерах и при низком разрешении экрана.
Как видите, меню Разработка включает в себя несколько полезных опций, которые могут пригодиться большинству пользователей компьютеров Mac.
Было показано, каким образом можно расширить возможности Safari в помощью сторонних плагинов и утилит. Однако на этом ваши возможности не заканчиваются. Вы можете получить доступ к опциям Safari, которые обычно зарезервированы для разработчиков. Для этого достаточно запустить программу Terminal, ввести из командной строки всего лишь одну команду, после чего вы получите доступ к целому миру новых возможностей - невероятных и неоценимых.
Выполняя настройку продуктов Apple в соответствии с личными потребностями, вы можете заметить, что многие из предлагаемых рецептов имеют и оборотную сторону, т. е. издержки. Например, вы можете выполнить перепрошивку вашего телефона, но после этого обнаружить, что последующие обновления программного обеспечения работать не будут. Вы можете держать свою домашнюю папку на своем iPod, но при этом вы будете нуждаться в подключении iPod каждый раз, когда вам потребуется воспользоваться компьютером. Это всего лишь два конкретных примера, но общее правило выглядит примерно следующим образом: чем больше работы требует внесение какой-либо модификации, тем выше отдача. Проиллюстрируем это еще одним примером: с помощью Terminal можно творить настоящие чудеса, но для этого вам придется выучить внушительное количество команд и их опций.
Пожалуй, единственным исключением из этого правила является меню Debug в браузере Safari. Активизировать меню Debug в Safari предельно просто, выгод от этого - не сосчитать, и при этом никаких отрицательных побочных эффектов не наблюдается. То есть, с хакерской точки зрения, данный рецепт предлагает только выгоды. С учетом его простоты, давайте применим его на практике. Как уже говорилось ранее, для этого достаточно запустить приложение Terminal и из командной строки ввести следующую команду:
1defaults write com.apple.Safari IncludeDebugMenu 1В приложении Terminal после запуска этой команды не произойдет ничего. Если при этом у вас был раскрыт браузер Safari, то, на первый взгляд, вам может показаться, что команда не возымела никакого действия. Однако это не так. Чтобы увидеть изменения, внесенные в результате запуска команды, закройте Safari, а затем перезапустите его вновь - и вы увидите, что в строке меню появилась новая команда - Debug (рис. 2.14).
Как только вы активизируете меню Debug, вы обнаружите, что это меню открывает вам множество ранее недоступных опций Safari. Большинство опций представляют интерес только для разработчиков. Однако некоторые из них по-настоящему могли бы доставить вам удовольствие. Хотите, например, узнать, сколько ресурсов потребляет Web-серфинг с помощью Safari? Самый простой способ получить ответ на этот вопрос - воспользоваться опцией Start Stress Test из меню Debug. Как только вы выберете эту команду, Safari выйдет на сайт http://del.icio.us и начнет загружать страницу за страницей, одновременно отслеживая объем проделанной работы (рис. 2.15).
Это позволяет не просто оценить объем трафика Safari. Для тех пользователей, которые ленятся самостоятельно искать интересные Web-страницы, стресс-тест Safari всегда найдет парочку страниц, которые могут представлять интерес. Чтобы завершить стресс-тест, снова раскройте меню Debug и выберите из него команду Stop Stress Test. Не такой любопытной, но не менее полезной по сравнению со стресс-тестом Safari будет возможность выбрать пользовательского агента через меню Debug. Это позволит вам пользоваться Safari, выдавая его серверам за другой браузер. На первый взгляд эта возможность кажется проблематичной функцией сомнительной полезности. Зачем вообще представляться серверам как другой браузер?
В конце концов, вы ведь гордитесь тем, что вы - пользователь Mac! Но не следует торопиться с выводами. Рано или поздно вы натолкнетесь на такой сайт, который потребует, чтобы все посетители пользовались Internet Explorer. Если вы будете открыто сообщать такому серверу о том, что вы пользуетесь Safari, то можете считать, что вам не повезло - вам откажут в обслуживании. Если же Safari будет выдавать себя за Windows MSIE 6.0, то вам будет позволено зарегистрироваться и получить желаемый сервис, так как сайт, предоставляющий сервис, будет введен в заблуждение и «поверит» тому, что вы - один из клиентов Windows (рис. 2.16).
Правда, это не обязательно означает, что сайт чудесным образом начнет корректно работать с Safari. Если сайт использует ActiveX, то Safari не сможет работать с этим сайтом, вне зависимости от того, насколько хорошо приложение маскирует свою идентификационную информацию. Однако существует множество сайтов, поддерживающих только Internet Explorer (IE) исключительно из-за лени или небрежности разработчиков кода. Это, подчеркнем, происходит не потому, что Safari не может надлежащим образом визуализировать информацию и взаимодействовать с серверами, а из-за того, что Web-мастер пошел по самому легкому пути и решил, что ему будет проще поддерживать только Internet Explorer. В таких случаях, вам поможет замена пользовательского агента через меню Debug, что позволит вам получать доступ к сайтам, ранее для вас недоступным.
С помощью пользовательского агента можно добиться и многого другого. Например, если вы хотите добиться более быстрого просмотра, можно сообщать серверам о том, что вы используете Mobile Safari 1.0 - таким образом, выдавая себя за пользователя iPhone. Некоторые страницы открываются только для пользователей Mobile Safari (классический пример - http://reader.mac.com/), а многие другие сайты автоматически перемещают пользователей Mobile Safari на страницы с более низкой полосой пропускания. Например, Amazon переправляет пользователей Mobile Safari на страницу с менее интенсивной полосой пропускания и выглядящую более просто (рис. 2.17).
Если никакие хитрости с применением пользовательского агента не помогут вам добиться желаемого результата, то меню Debug все равно как минимум избавит вас о необходимости поисков подходящего браузера в папке Applications. Если вы попали на такой проблематичный сайт, который не открывается с помощью Safari, выберите из меню команды Debug → Open Page With…, а затем выберите из списка подходящий браузер (рис. 2.18).
Однако возможности, предоставляемые меню Debug, не заканчиваются трюками с пользовательскими агентами. Когда вы активизируете меню Debug, вы получите в свое распоряжение и удивительно универсальный и многопрофильный инструмент для инспекции сайтов. С его помощью вы сможете исследовать любой элемент страницы, который вас заинтересует, причем отображение кода будет полностью отображать уровень вложенности, а также будет использовать цветовое выделение синтаксических элементов для дополнительного удобства. Чтобы запустить Web Inspector для всей страницы целиком, вам потребуется перейти к строке меню (Debug → Show Web Inspector), но если вас интересует не вся страница, а лишь какие-то из ее элементов, то для этого достаточно навести курсор на нужный элемент, щелкнуть правой кнопкой мыши и выбрать из контекстного меню команду Inspect Element. Вы увидите именно ту часть страницы, которую и требовалось исследовать (рис. 2.19).
Наконец, меню Debug предоставляет и множество других возможностей. Например, вы можете отключить поддержку RSS, если вы пользуетесь для чтения каналов RSS приложением Mail или независимым средством чтения RSS, например, таким как NetNewsWire. Кроме того, с помощью меню Debug можно добиться интересных визуальных эффектов - например, сделать окно Safari прозрачным (рис. 2.20).
Существует и еще множество интересных опций, которые, правда, в большей степени заинтересуют разработчиков - например, утечки памяти (world leaks), профилировка (profiling) и т. д. Однако одна из наиболее полезных опций, которые можно найти в меню Debug - это большой список клавиатурных комбинаций Safari. Эти клавиатурные комбинации перечислены в файле, о котором знают немногие пользователи. При этом если ими пользоваться грамотно, клавиатурные комбинации могут здорово сэкономить вам время при интенсивной работе с браузером (рис. 2.21).
Если в ваши намерения не входит активизация меню Debug, но при этом вам все же требуется доступ ко всем этим удобным клавиатурным комбинациям, в строке адреса браузера введите следующий путь к файлу: file:///Applications/Safari.app/Contents/Resources/Shortcuts.html и установите на него закладку. Файл с клавиатурными комбинациями - это локальный файл, хранящийся в пакете Safari, но к нему гораздо проще получить доступ через браузер, чем тратить время на последовательное раскрытия папок и пакетов в поисках нужной вам информации.
Активизировав меню Debug в Safari, логично было бы поинтересоваться, а нет ли этой скрытой возможности и в других приложениях Apple. Согласитесь, было бы просто замечательно, если бы вы имели возможность обращаться с любым приложением так, как это делают разработчики. К сожалению, скрытое меню Debug есть не во всех приложениях, хотя в некоторых оно присутствует. Например, попробуйте выполнить операцию, аналогичную описанной в этом рецепте, по отношению к приложению iCal - вы также обнаружите меню Debug, хотя и с менее богатыми возможностями, чем в Safari. Наконец, в заключение следует сказать, что если вы хотите вновь скрыть меню Debug, то для этого достаточно запустить приложение Terminal и дать следующую команду:
1defaults write com.apple.Safari IncludeDebugMenu 0
Начиная с Safari на iOS 6 и более поздних версиях можно отлаживать мобильный веб-контент с вашего Mac. Вы можете просмотреть ошибки JavaScript, редактировать атрибуты HTML, изменить свойства CSS, так же, как при разработке для Safari на OS X. В этом разделе описывается, как использовать веб-инспектор для отладки веб-контента на iOS.
Вы должны проверить ваш веб-контент как на десктоп системах, так и на различных устройствах iOS. Если у вас нет iOS устройств для тестирования, вы можете использовать iOS Simulator из iOS SDK. Поскольку есть разница между веб-страницами на iOS и OS X, вы должны специально проверить свой контент на iPhone и iPad или эмулировать аппаратное устройство в симуляторе. При тестировании в Safari на любой платформе, вы можете использовать Веб-инспектор для отладки веб-контента.
Веб-инспектор содержит ценную информацию о том, что могло бы идти не так в вашем веб-контенте. Даже при том, что веб-инспектор доступен через Safari на OS X, вы можете использовать его, чтобы проверить контент, который загружается в Safari или в любой UIWebView на iOS.
Когда Веб-инспектор на IOS включен, подключите устройство к Mac с помощью кабеля USB. Появляется пункт меню в меню Разработка Safari на OS X, как показано на рисунке ниже. Если имя устройства не сразу появляется в меню Разработка, попробуйте перезагрузить Safari и/или повторно подключить кабель.
Название пункта меню будет либо именем каждого устройства, подключенного и/или название симулятора. Подменю со страницами доступными в iOS Safari. Приложение должно быть запущено на переднем плане для того, чтобы появиться в меню Разработка. Выберите страницу, которая вас интересует, и Веб-инспектор откроется в новом окне.
Все функции Веб-инспектора на OS X, такие как время HTTP запросов, профилирование JavaScript, или манипулирование DOM-деревом доступны также на iOS. Единственное отличие в том, что, выбрав вашу веб-страницу через меню Разработка, вы активно проверяете веб-контент на вашем устройстве, а не на вашем Mac. Если вы переходите на другой адрес на вашем устройстве с все еще открытым Инспектором окна, вы заметите, что инспектируемые данные перезагрузятся для отражения страницы на которую вы перешли.
Создание и отладка веб-сайтов и веб-приложений для мобильных устройств может быть трудной задачей. На рабочем столе у нас есть мощные инструменты для отладки; у большинства браузеров есть веб-инспектор. Но у нас нет таких инструментов для устройств, как iPhone и iPad ... то есть, до сих пор!
С недавним выпуском Safari 6 и iOS 6 теперь можно использовать веб-инспектор для создания и отладки веб-сайтов на рабочем столе и на мобильном Safari. Как? Процесс настройки простой. Следуйте этому руководству, и у вас под рукой появятся очень мощные средства отладки для мобильных устройств практически мгновенно.
Современные инструменты для разработчиков браузеров оказали огромную помощь в создании веб-сайтов и веб-приложений. Chrome имеет . Fire Fox? . Сафари? Веб-инспектор. Все чрезвычайно мощные инструменты в веб-разработке.
Как бы то ни было, до этого момента отладка веб-сайтов и веб-приложений на мобильных устройствах была трудной задачей. Поскольку Safari и Chrome работают на движке webkit, есть много общего в том, как рабочий стол и мобильный браузер отображают веб-макет. Таким образом, большинство дизайнеров/разработчиков создают и настраивают свои веб-сайты на рабочем столе, используя один из этих браузеров, предполагая, что в результате действия движка webkit страница будет одинаково выглядеть и на мобильном устройстве.
Однако мобильные и настольные платформы на самом деле совершенно разные. Они имеют различную ёмкость памяти, потенциал производительности, устройства ввода и сетевое подключение. Поэтому стало крайне важно, чтобы отладочные инструменты дизайнера для мобильных устройств стали более эффективными и соответствовали аналогам на рабочем столе.
Новые программные версии Apple для iOS 6 и Safari 6 привнесли множество функций инструментов отладки для настольных компьютеров, которые мы все знаем и любим по мобильным устройствам. Этот урок покажет простой процесс получения настроек для отладки мобильных сайтов с помощью веб-инспектора Safari.
Вначале обратите внимание на совместимость: для пользователей Windows есть несколько плохих новостей. Вы можете отлаживать только удалённый веб-инспектор на Mac. Safari 6 для Windows недоступен . Кроме того, Safari 6 доступен только для компьютеров Mac с OSX Lion и выше.
Существует два метода использования веб-инспектора в мобильном Safari:
Мы рассмотрим оба этих метода и выберем наиболее подходящий для вашей ситуации.
Поскольку отладка мобильных устройств с веб-инспектором - это новая функция, вам необходимо убедиться, что у вас есть всё самое последнее программное обеспечение.
Реальный метод устройства: чтобы использовать веб-инспектор в тандеме с реальным iDevice, вам понадобится следующее:
Чтобы использовать веб-инспектор в тандеме с симулятором iOS, вам понадобится следующее:
Проверка версий программного обеспечения: чтобы проверить, используете ли вы iOS 6 на вашем iDevice, перейдите в "Settings > General > About" на вашем устройстве.
Чтобы проверить, используете ли вы Safari 6, откройте панель инструментов Safari и нажмите «Safari> About Safari».
Чтобы убедиться, что вы используете Lion, нажмите на логотип Apple в строке меню и выберите "About this Mac"
Чтобы убедиться, что вы используете правильную версию Xcode, откройте Xcode и выберите «Xcode> About Xcode»
Вы должны включить инструменты разработчика и веб-инспектора в настольных и мобильных версиях 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".
Теперь, когда у вас открыт iOS Simulator или ваш iDevice подключен к Mac через USB (или оба!), вы готовы начать использовать веб-инспектор на своем сайте.
На вашем Mac откройте Safari и перейдите в раздел "Develop". Теперь вы должны увидеть любые iDevices (виртуальные или реальные), которые вы подключили и запустили с помощью своего mac. На скриншоте ниже вы увидите, что у меня в меню два устройства: одно - симулятор iOS, а другой - настоящий iPhone, подключенный к моему mac.
Чтобы начать проверку веб-сайта, у вас должно быть мобильное Safari, запущенное на устройстве и имеющее одну из вкладок, открытую для веб-сайта. Если у вас нет мобильного Safari, вы увидите сообщение "No Inspectable Applications".
Чтобы начать проверку, просто введите URL-адрес страницы, которую вы хотите проверить в мобильном Safari, а затем выберите этот сайт в меню "Develop". Вы можете начать проверку сайтов на своем реальном iDevice или с симулятора iOS. Когда вы выберете страницу, на странице появится синее наложение, указывающее ваш выбор.
Выбрав сайт, веб-инспектор Safari откроется и позволит вам начать проверку вашего веб-сайта. Вот оно!
Теперь, когда в ваших руках есть веб-инспектор Safari, у вас гораздо больше контроля при создании и отладке веб-сайтов и веб-приложений.
Ниже примеры некоторых вещей, которые вы можете теперь делать, когда отлаживаете мобильные сайты:
У вас есть инструменты, идите и стройте!
В браузер Safari включено несколько средств для разработчика, позволяющих упростить создание и отладку сайта. К примеру, через Safari можно просматривать, как сайт будет выглядеть на iPhone и iPad. Для этого всего лишь требуется указать соответствующий пользовательский агент через меню Разработка (рис. 7.51).
Рис. 7.51. Выбор пользовательского агента
Также в Safari имеется прекрасный инструмент для отладки HTML и CSS кода под названием веб-инспектор. Для его вызова выберите меню Разработка > Показать веб-инспектор или воспользуйтесь комбинацией клавиш Ctrl +Alt +I . Если у вас нет этого пункта меню, зайдите в настройки браузера, выберите панель Дополнения и поставьте галочку в пункте «Показать меню Разработка в строке меню».
Веб-инспектор выводит список ресурсов, найденных на веб-странице - документы, таблицы стилей, изображения и скрипты. Позволяет увидеть и найти код веб-страницы и стилевые свойства элементов. Интерфейс веб-инспектора продемонстрирован на рис. 7.52. Из всего богатства возможностей программы для вёрстки нас интересует только меню Элементы.
Рис. 7.52. Веб-инспектор
По своему интерфейсу веб-инспектор напоминает Firebug - в левой панели показан HTML-код текущего документа, в правой панели - стиль выбранного элемента. Любой элемент на странице можно выбирать не только через код, но и с помощью инструмента он позволяет выбирать элемент простым щелчком по нему.
Набор стилей в инспекторе представлен в виде раскрывающегося списка, это позволяет компактно включить большой объём информации. Первый пункт «Вычисленный стиль» (рис. 7.53) содержит стиль элемента, который устанавливает браузер на основе собственного стиля, учёта наследования и добавленных свойств.
Рис. 7.53. Вычисленный стиль
Эти стили приведены для информации, менять что-либо в этом пункте нельзя. По цвету, если он представлен, можно щёлкнуть и изменить его формат представления на шестнадцатеричный, RGB или HSL.
Следующий пункт «Атрибут стиля» показывает встроенный стиль, т. е. тот, который задан через атрибут style . Пункт будет пустовать, если такого стиля нет.
Нижележащая группа пунктов показывает стиль текущего элемента и взаимосвязанных с ним элементов (рис. 7.54).
Рис. 7.54. Стиль элемента
Любое свойство в этом списке можно отредактировать, щёлкнув по нему. Универсальные свойства вроде padding или margin выводятся в виде раскрывающегося списка, в котором перечислены отдельные свойства, такие как padding-left , padding-top и др. Напротив каждого свойства стоит галочка, позволяющая быстро отключать свойство. Добавить новое правило можно с помощью меню скрытым за шестерёнкой в правом верхнем углу панели (рис. 7.55).
Рис. 7.55. Меню для добавления новых правил
Пункт «Размеры» демонстрирует блочную модель элемента - ширину и высоту элементов, а также значения отступов, границ, полей и позиционирования (рис. 7.56).
Рис. 7.56. Размеры элемента
Только надо учитывать, что отступами здесь называются свойства padding , а полями margin , т.е. наоборот, а не в привычном понимании.
Данный пункт можно применять не только для определения нужных значений, но и для их установки. Достаточно дважды щёлкнуть по нужному значению и ввести число. Указывать единицы измерения не нужно, по умолчанию принимаются пикселы.
