Горячие клавиши для выбора предыдущего и следующего слоя в Photoshop Перечёркивание крест-накрест
На главную Наверх

08 апреля 2012

Отладка мобильных сайтов в Webkit. Инспектор кода на мобильных устройствах

tools Комментарии

СТАТЬЯ УСТАРЕЛА!

7 марта Abobe представила замечательный комплекс программ, позволяющий синхронно просматривать и проводить отладку сайтов в браузерах Webkit на компе и нескольких планшетах и смартфонах одновременно. Количество подключаемых устройств не ограничено. Поддерживаются как iOS, так и Android.

Как это работает?

Для начала устанавливаем приложение Adobe Shadow для Windows или Mac. Оно должно быть включено во время отладки, без него работать не будет.

Добавлено. Теперь продукт называется Adobe Edge Inspect.

Ставим плагин Adobe Shadow в Google Chrome.

На мобильные устройства ставим соответствующие приложения из Плей Маркета или АппСтора.

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

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

Чтобы вызвать инспектор кода, нужно в выпадающем меню плагина Adobe Shadow кликнуть иконку <> напротив интересующего устройства.

Как открыть удаленный инспектор кода в Adobe Shadow

Можно проводить отладку сайтов на локалхосте. Только в браузере на компе нужно вводить не http://localhost, а IP-адрес компьютера, например, http://192.168.0.101:3000.

А вот просто локальные файлы типа file://website/index.html мобильное приложение не открывает. Нужно использовать или локальный веб-сервер, или поместить такие файлы, например, в паблик-папку dropbox и открывать их из интернета.

В общем, рекомендую Adobe Shadow всем разработчикам, кто верстает под различные устройства. Успехов в создании сайтов с отзывчивой вёрсткой!

© Павел Радьков 2012.

Поделиться
Твитнуть
Плюсануть
Поделиться
Телеграфировать
  • 04 июля 2017

Как правильно использовать переменные в препроцессорах Less и Sass

  • 13 февраля 2016

Как верстальщику получить код ревью

  • 02 мая 2014

Веб-лицензии для платных шрифтов могут стоить вам дорого

  • 01 мая 2014

Бесплатная замена платному Helvetica Neue

  • 25 апреля 2014

Деплой Docpad-сайта на GitHub Pages

  • 07 апреля 2014

Краткое руководство по Маркдауну

  • 10 февраля 2014

О каких дизайнерах мечтают верстальщики

  • 09 февраля 2014

Захват экрана в GIF

  • 06 февраля 2014

Font-weight: bolder для шрифтов со множеством начертаний

  • 04 февраля 2014

Параметры subject и body в mailto ссылках

  • 26 января 2014

Посещённая ссылка при наведении

  • 19 января 2014

CSS-селектор :not. Полезные примеры

  • 24 января 2013

Списки и картинки с флоатами

  • 09 декабря 2012

Pointer-events

  • 27 ноября 2012

Как отключить javascript в Google Chrome

  • 28 октября 2012

Перечёркивание крест-накрест

  • 08 апреля 2012

Отладка мобильных сайтов в Webkit. Инспектор кода на мобильных устройствах

  • 18 марта 2012

Горячие клавиши для выбора предыдущего и следующего слоя в Photoshop

  • 11 марта 2012

HTML-сущности и их UTF-коды

  • 22 февраля 2012

Нарезка в Photoshop — New Layer Based Slice

  • 12 февраля 2012

Как перекрасить поля с автозаполнением в Google Chrome