Как отлаживать веб-сайты на мобильных устройствах? - PullRequest
71 голосов
/ 26 апреля 2011

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

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

Ответы [ 15 ]

19 голосов
/ 08 февраля 2012

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

18 голосов
/ 26 апреля 2011

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

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

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

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

17 голосов
/ 02 июля 2013

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

Начиная с iOS 6 доступна удаленная отладка: https://stackoverflow.com/a/12762449/72428

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

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

    Настройки> Safari> Дополнительно> Веб-инспектор (ВКЛ)

  3. Вернитесь в Safari на своем компьютере, откройте меню «Разработчик» и выберите свое устройство (например, iPhone Simulator, iPhone)

9 голосов
/ 23 октября 2012

В Chrome:

Настройки -> Инструменты -> Инструменты разработчика -> Настройки (справа внизу сайта) -> Пользовательский агент (в меню вкладок) -> «Переопределить пользовательский агент»

7 голосов
/ 06 мая 2012
  • iWebInspector для iOS действительно великолепен для отладки веб-страниц в iOS.

    iWebInspector screenshot

    Обновление: с тех пор, как я опубликовал этот ответ, iOS и OS X обновились, и теперь Safari на вашем Mac может подключаться и отлаживать Mobile Safari.

  • Выезд Firebug Lite .

  • для Chrome на Android, Удаленная отладка неплохо!

6 голосов
/ 23 марта 2012

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

  • weinre
  • Adobe Shadow
  • Для Mac и iPhone: iWebInspector
3 голосов
/ 09 июня 2015

Существует букмарклет для облегченной версии 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) . Также есть ..

  • Приложение iOS для MIHTool : оболочка для weinre. Доступна бесплатная и платная версия.

  • SocketBug : утилита удаленной отладки, построенная с использованием Socket.IO

  • jsConsole : простой инструмент командной строки JavaScript. Тем не менее, он также предоставляет возможность соединяться с другими окнами браузера для удаленного управления и отладки этого окна - будь то в другом браузере или на другом устройстве в целом.

2 голосов
/ 30 мая 2014

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

enter image description here

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

2 голосов
/ 07 марта 2012

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

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

1 голос
/ 04 декабря 2016

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

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

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

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

http://wiki.netbeans.org/MobileBrowsers

...