Як налагодити веб-сайти на мобільних пристроях?

Як люди налагоджують веб-сайти на мобільних пристроях?

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

Це правильна відповідь, не впевнений, чому Блейн залишив її лише як коментар!

Станом на iOS 6 доступна віддалена налагодження: https://stackoverflow.com/a/12762449/72428

В OS X ви можете використовувати веб-інспектор Safari на пристроях iOS Simulator AND iOS 6.

1. Спочатку увімкніть меню розробника в Safari на робочому столі.

2. Потім увімкніть віддалену налагодження на вашому пристрої iOS (або симуляторі).

   Налаштування> Safari> Додатково> Веб-інспектор (УВІМК.)

3. Поверніться до Safari на своєму комп’ютері, натисніть меню розробника та виберіть свій пристрій (наприклад, iPhone Simulator, iPhone)

За допомогою Google Chrome для Android Beta тепер ви можете робити віддалену налагодження за допомогою інструментів розробника, вбудованих у Google Chrome на вашому робочому столі. Ось відео, яке демонструє, як це працює.

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

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

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

Сподіваюся, це допомагає.

У Chrome:

Налаштування -> Інструменти -> Інструменти розробника -> Налаштування (праворуч внизу сайту) -> Агент користувача (у меню вкладки) -> «Замінити агент користувача»

• iWebInspector для iOS справді дивовижний для налагодження веб-сторінок у iOS.

  

  Оновлення: з моменту розміщення цієї відповіді iOS та OS X оновились, і тепер Safari на вашому Mac може підключатися до Mobile Safari та налагоджувати його.

• Перевірте Firebug Lite .

• для Chrome на Android віддалена налагодження непогана!

Існує кілька способів налагодження DOM та JS на мобільних пристроях. За допомогою Adobe Shadow ви також можете перевіряти localStorage.

• weinre
• Adobe Shadow
• Для Mac і iPhone: iWebInspector

Існує закладка для полегшеної версії 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 (віддалений веб-інспектор) . Це також..

• MIHTool iOS App : обгортка для weinre. Доступна безкоштовна версія та платна версія.

• SocketBug : утиліта віддаленої налагодження, побудована за допомогою Socket.IO

• jsConsole : простий інструмент командного рядка JavaScript. Однак він також надає можливість переходу до інших вікон браузера для віддаленого управління та налагодження цього вікна - будь то в іншому браузері або на іншому пристрої взагалі.

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

Він синхронізує мобільний веб-перегляд з комп'ютером і дозволяє виконувати веб-перевірку та маніпуляції DOM.

Відкрийте симулятор iOS, який постачається з Xcode, потім відкрийте Safari, і ви побачите цю опцію в меню "Розробка"

Працює так само, як Firebug

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

Існує цей букмарклет, який дозволяє використовувати Firebug на Safari iOS. Вам потрібно скопіювати закладку на робочий стіл і надіслати її електронною поштою на пристрій iOS, але в іншому випадку це працює:

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

Я знаю, що це запитання було задане давно, але все ж сподіваюся, що моя відповідь допоможе.

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

Я вважаю це дуже корисним, оскільки ви можете бачити результат з різних браузерів, встановлених на вашому пристрої.

Ви можете використати це посилання для отримання детальної інформації

http://wiki.netbeans.org/MobileBrowsers

Оскільки Firebug Lite перестав працювати, я перейшов на Eruda , яка надає консоль, дослідник DOM та деякі інші функції. Ви можете ввести його на будь-яку сторінку за допомогою закладки.

Чи використовуєте ви php для вибору агента користувача?

якщо так, я використовую .. Fennec, а потім додаю агента користувача fennec до списку винятків для мобільних пристроїв, який буде

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

Додано: Коли я просто роблю обмін CSS для мобільних пристроїв, я використовую цей сценарій і додаю до нього вищевказаний виняток для fennec.

Ви можете підключити iPhone або iPad до комп'ютера Mac і скористатися інструментами розробника Safari. https://developer.apple.com/safari/tools/ Як варіант, є кілька інструментів в Інтернеті, які можуть зробити те саме. Перевірте http://farjs.com

Я б запропонував використовувати: https://www.vanamco.com/ghostlab/

Це платформа, яку ви можете налагодити у декількох мобільних пристроях одним клацанням миші.

Виконуючи дію у браузері, можна вибрати розповсюдження на інші пристрої, підключені до приватної IP-адреси (і ці пристрої повинні підключатися до однієї мережі та використовувати IP-адресу).

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