Как отлаживать веб-сайты на мобильных устройствах?

Как люди отлаживают веб-сайты на мобильных устройствах?

Я хотел бы иметь возможность манипулировать HTML и CSS, похожими на использование Inspector в браузере рабочего стола, и отлаживать JavaScript.

Ответ 1

Это правильный ответ, не знаю, почему Блейн оставил его в качестве комментария!

Начиная с iOS 6 доступна удаленная отладка: fooobar.com/questions/89831/...

В OS X вы можете использовать веб-инспектор Safari на устройствах iOS Simulator AND iOS 6.

Сначала включите меню разработчика в Safari на рабочем столе.
Затем включите удаленную отладку на устройстве iOS (или симуляторе).

Настройки > Safari > Дополнительно > Web Inspector (ON)
Вернитесь в Safari на свой компьютер, откройте меню "Разработчик" и выберите свое устройство (например, iPhone Simulator, iPhone).

Ответ 2

Недавно я столкнулся с той же проблемой с мобильным сайтом, который я разрабатывал для работы. Лучшим решением, которое я нашел, было использование Safari UserAgent для Iphone (убедитесь, что у вас есть инструменты разработчика Safari). Вам нужно будет обнаружить, что пользователь приходит с мобильного устройства и перенаправляет их на ваш мобильный url или загружает конкретные таблицы стилей для мобильных устройств, так как этот метод не работает, задавая тип css-носителя.

У Firefox также есть эта возможность, но он не регистрирует стили webkit css (которые, как я полагаю, вы будете использовать, поскольку они работают как для Mobile Safari, так и для Android).

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

Надеюсь, это поможет.

Ответ 3

С Google Chrome для Android бета-версия вы можете теперь удаленная отладка с помощью инструментов разработчика, встроенных в Google Chrome на рабочем столе. Вот видео, демонстрирующее, как это работает.

Ответ 4

В Chrome:

Настройки → Инструменты → Инструменты разработчика → Настройки (правый сайт внизу) → Агент пользователя (в меню вкладки) → "Переопределить пользовательский агент"

Ответ 5

iWebInspector для iOS действительно удивительно для отладки веб-страниц в iOS.

Обновление: поскольку я отправил этот ответ, iOS и OS X обновились, и теперь Safari на вашем Mac может подключаться и отлаживать Mobile Safari.
Отъезд Firebug Lite.
для Chrome на Android, Удаленная отладка - это плохо!

Ответ 6

Существует несколько способов отладки DOM и JS на мобильных устройствах. С помощью Adobe Shadow вы также можете проверить localStorage.

weinre
Adobe Shadow
Для Mac и iPhone: iWebInspector

Ответ 7

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

javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F[i+'NS']&&F.documentElement.namespaceURI;E=E?F[i+'NS'](E,'script'):F[i]('script');E[r]('id',b);E[r]('src',I+g+T);E[r](b,u);(F[e]('head')[0]||F[e]('body')[0]).appendChild(E);E=new%20Image;E[r]('src',I+L);})(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','firebug-lite.js','releases/lite/latest/skin/xp/sprite.png','https://getfirebug.com/','#startOpened');

Вы можете использовать этот второй букмарклет для отображения журнала консоли на Android

javascript:(function(){if((/android/gi).test(navigator.appVersion)){console={"_log":[],"log":function(){var%20arr=[];for(var%20i=0;i<arguments.length;i++){arr.push(arguments[i]);}this._log.push(arr.join(",%20"));},"trace":function(){var%20stack;try{throw%20new%20Error();}catch(ex){stack=ex.stack;}console.log("console.trace()\n"+stack.split("\n").slice(2).join("%20%20\n"));},"dir":function(obj){console.log("Content%20of%20"+obj);for(var%20key%20in%20obj){var%20value=typeof%20obj[key]==="function"?"function":obj[key];console.log("%20-\""+key+"\"%20->%20\""+value+"\"");}},"show":function(){alert(this._log.join("\n"));this._log=[];}};window.onerror=function(msg,url,line){console.log("ERROR:%20\""+msg+"\"%20at%20\""+"\",%20line%20"+line);}window.addEventListener("touchstart",function(e){if(e.touches.length===3){console.show();}});}})();

Там также этот из farjs.com(аналогичный jsConsole)

javascript:(function(){ base_url = 'farjs.com'; base_path = ''; var _my_script=document.createElement('SCRIPT'); _my_script.type='text/javascript'; _my_script.src='http://farjs.com/bookmarklets/injector_v1.js'; document.getElementsByTagName('head')[0].appendChild(_my_script);})()

В дополнение к weinre (Web Inspector Remote). Существует также..

Приложение MIHTool iOS: обертка для weinre. Бесплатная версия и доступная платная версия.
SocketBug: Утилита удаленной отладки, построенная с использованием Socket.IO
jsConsole: простой инструмент командной строки JavaScript. Тем не менее, он также обеспечивает возможность перехода на другие окна браузера для удаленного управления и отладки этого окна - будь то в другом браузере или другом устройстве.

Ответ 8

Adobe только что выпустила новый инструмент для нового инструмента проверки и предварительного просмотра: Adobe Shadow. Страница с инструкциями здесь.

Он синхронизирует мобильный просмотр веб-страниц с компьютером и позволяет выполнять веб-проверку и манипулирование DOM.

Ответ 9

Откройте iOS-симулятор, который поставляется с Xcode, затем откройте Safari и вы увидите эту опцию в меню "Разработка"

Работает так же, как Firebug

Ответ 10

Я использую симулятор с моим прокси-сервером osx, который отправляет запросы на Fiddler, работающие на машине Windows, - что мало помогает в работе с javascript/внутренними элементами для мобильного сафари, но, по крайней мере, показывает мне, что происходит на самом деле провод и позволяет мне перехватывать/регистрировать/анализировать/настраивать вещи "на лету", чтобы выяснить, что работает, а что нет.

Ответ 11

Существует этот букмарклет, который позволяет использовать Firebug для iOS в Safari. Вы должны скопировать букмарклет на рабочий стол и отправить его на свое устройство iOS, но в противном случае он работает:

http://martinkool.com/post/13629963755/firebug-on-ipad-and-iphone

Ответ 12

Я знаю, что этот вопрос был задан давно, но все же надеюсь, что мой ответ поможет.

Вы можете использовать среду IDE NetBeans для отладки с использованием реального устройства Android или IOS. Просто убедитесь, что у вас установлен SDK Android (для устройств Android), откройте свой проект в NetBeans и при запуске выберите устройство Android в качестве браузера.

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

Вы можете использовать эту ссылку для получения более подробной информации

http://wiki.netbeans.org/MobileBrowsers

Ответ 13

Используете ли вы php для определения пользовательского агента?

Если это так, я использую Fennec, а затем добавьте пользовательский агент fennec в список исключений для мобильных устройств, которые будут

if ($_SERVER['HTTP_USER_AGENT'] == '4.0b5') {
    return = true;
}

Добавлено:. Когда вы делаете css-свопы для мобильных устройств, я использую script и добавляю исключение выше это для fennec.

Ответ 14

Вы можете подключить iPhone или iPad к компьютеру Mac и использовать инструменты разработки Safari. https://developer.apple.com/safari/tools/ Кроме того, есть некоторые онлайн-инструменты, которые могли бы сделать то же самое. Проверьте http://farjs.com

Ответ 15

Я бы предложил использовать: https://www.vanamco.com/ghostlab/

Это платформа, которую вы можете отлаживать на нескольких мобильных устройствах одним щелчком мыши.

Выполнение действия в браузере, может выбирать для распространения на другие устройства, подключенные к частному IP (и эти устройства должны подключаться к одной сети и использовать IP-адрес).

Вы увидите интерфейс разработчика Chrome, но там вы можете сделать настройки CSS (изменения будут происходить для всех подключенных устройств) и отладка Javsascript.