[Chrome] Chrome-devtools: отладка страницы H5 мобильного терминала ios-safari (ios-webkit-debug-proxy)

Debug iOS Chrome Webkit

скажи заранее

Если вы хотите увидеть галантерейные товары, вы можете пропустить главу «Говорить в авангарде».

Такого рода статьи на Baidu «роют мешок», но говорить «не с кем драться» неприятно, а резюме таково:

  1. Skoop: Под Win7, сделайте эту партию, до последнего «SCOOP Установить iOS-Webkit-Debug-Proxy», скажите мне через стену?
  2. У меня есть куча плагинов без NPM, и, наконец, я до сих пор не могу его использовать.
  3. На последнем шаге NMP сказал мне: «Я могу это прочитать, но не могу отладить», я разбил клавиатуру?
  4. ......

Я был так напуган, что быстро сфотографировал таунхаус моей жены.

镇楼

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

chrome-devtools отлаживает страницу H5 мобильного терминала IOS

Проще говоря, это—

Я привязываю «console.log(1)» к «отправить» btn, затем, когда я нажимаю «отправить» на мобильной странице H5, Chrome на ПК выводит 1

кто-то спросил

В: Страница H5 моего мобильного терминала также может быть отлажена под хромом на стороне ПК, зачем мне отлаживать реальную машину? Например:

反方意见

О: Это все еще зависит от спроса.Если вашему бизнесу это не нужно, то естественно оно ему и не понадобится.Например:

  1. Когда приложение встроено в H5, как вы отлаживаете некоторые нативные взаимодействия и как узнать, определен ли нативный метод?
  2. Как сторона ПК имитирует и реагирует на отладку, когда мультитач выполняется на странице H5?
  3. При использовании некоторых сторонних подключаемых библиотек или API-интерфейсов существуют строгие суждения, а ненастоящие машины отлаживать непросто, что делать?
  4. ......

Следующий шаг — галантерея, позволяющая произвольно отлаживать страницы H5, страницы WebView, проверять, есть ли WebView в приложении, и находить его онлайн-адрес!


1. Среда (успешные тестовые примеры)

  1. Браузер Chrome для ПК (версия 45, 46)
  2. Браузер Safari для iOS (11.2.6)
  3. система выигрыша (win7, win10)
  4. USB-кабель для передачи данных

2. Подготовка программных средств

Я интегрировал все это на github, я не доволен, пожалуйста, поставьте звезду, форкните

github: chrome_ios_safari_ios-webkit-отладка-прокси

Лучше всего "Скачать ZIP" здесь, не знаю, сколько лет уйдёт на снос

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

  1. iTunes
  2. ios-webkit-debug-proxy-1.8-win64-bin.zip
  3. Chrome45.0.2454.85_64_installer

СОВЕТЫ: ​​Версия Google 45 является причиной, конечно, также быть последней, сзади будет сказано, всегда будет небольшая проблема

Конечно, если не получится, зайди ко мне на гитхаб и потихоньку спускайся,(^▽ ^)


3. Настройте браузер iPhone Safari

«Настройки» > «Safari» > «Дополнительно» > «Открыть веб-инспектор».

Как показано ниже:

iphone01


4. Откройте iTunes и подключите кабель для передачи данных

После того, как iphone будет подключен к ПК, появится запрос «доверять ли компьютеру», нажмите «ОК», и iTunes также получит устройство iphone. Если есть следующая картинка, соединение установлено успешно.

iTunes01


5. Откройте распакованный каталог ios-webkit-debug-proxy-1.8-win64-bin.

Я, например, распаковал на диск F, выложил картинку для наблюдения

win01

Откройте cmd, введите диск и выполните следующую команду

ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html

Появится следующее сообщение, соединение установлено успешно!

cmd01


6. Основной учебник

Как упоминалось выше, прослушиваемый порт — 9221, затем откройте chorme45 и введите http://127.0.0.1:9221/.

45-01

Нажмите «Doudou» (то есть ваше оборудование), вы обнаружите, что внутри пусто, вы не открывали страницы H5, откройте страницу с сафари H5, обновите хром, вы найдете больше, чем несколько данных

45-02

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

45-03

Скопируйте адрес в адресную строку, чтобы войти в интерфейс отладки!

45-04
iphone02

Брат Нин! Брат Нин! О, на неправильном наборе. консольный ввод

alert('Hello World!')

Мобильный терминал всплывает, успех

iphone03

Консоль нельзя нажимать, мол это ты, хай версия хрома, подожди.

Давайте сделаем привязку DIY к кнопке «Baidu», чтобы увидеть, действительно ли консоль проста в использовании.

45-05

Нажмите «Baidu» на ios, и выскакивает true, ОК

Затем давайте попробуем точку останова, щелкнем только что связанный метод, войдем в кеш Chrome и выполним отладку точки останова.

45-06

Нажмите «Baidu» и обнаружите, что не можете войти! Далее идет черная технология——

Дважды щелкните верхнюю правую кнопку со стрелкой

45-07
45-08

Затем нажмите «Baidu», чтобы узнать! Введите это, возврат будет текущим элементом btn dom

45-09

Аплодисменты здесь (^▽ ^)

Откуда ты знаешь, что здесь это работает? ... глоток старой крови, горсть горьких слез


7. Набор альтернативных проблем, которые невозможно отладить

1. Проблема с тем, что консоль старшей версии Chrome не может быть введена

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

58-01

Нажмите на консоль, чтобы выдать ошибку, и измените оценку строки «if(error){console.error(error)……» на «if(!error){console.error(error)…. . . " то есть поставить егоНетoff, а затем ctrl+s для решения проблемы.TIPS: Если обновится, то приходится заново перезапускать, что не очень удобно в этом плане.

Вот, спросите у великого бога, есть ли способ навсегда сопоставить spector.js с рабочей областью, чтобы решить способ обновления и перезапуска

2. Chrome отключается

описание проблемы: Под хромом появляется слово "Отключено от цели", и отладка прекращается.

45-10

решение: Перезапустите службу «ios_webkit_debug_proxy», открытую cmd, очистите кеш хрома, перезапустите хром, чтобы решить эту проблему, и не выполняйте некоторые черные операции, страница отладки крайне нестабильна.

3. Когда cmd открывает службу debug_proxy, она не может подключиться к мобильному телефону и не отвечает

описание проблемы: при выполнении оператора «ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/spector.html» отображается следующее

cmd02

Нет ответа от подключенного устройства или возвращается сообщение об ошибке, предупреждение и т. д., указывающее, что устройство не подключено.решение: проверьте, подключен ли iTunes к вашему устройству, снова подключите и отключите USB-порт, перезапустите службу и даже перезагрузите компьютер, чтобы попробовать. Если это все еще не работает, загрузите другую версию, чтобы попробовать.

github: google/ios-webkit-debug-proxy

TIPS: Следует отметить, что если этот шаг уже был проделан, порт, который открывает хром-ввод 9221, также должен быть пустой страницей.

4. Проблема в том, что младшая версия Chrome не может быть отлажена

описание проблемы: В 30-й версии страницу отладки spector.html настроить нельзя.

решение: 30+ версий, страница devtools.html заброшена, chrome ниже 30 следует вводить в URL

chrome-devtools://devtools/devtools.html?ws=localhost:9222/devtools/page/1

Затем войдите на страницу отладки.

TIPS:page/1 и 9222 — это значения, переданные в проверяемом элементе dom через порт 9221, и они должны быть согласованы.


о

сделать: o︻そ╆OVE▅▅▅▆▇◤ (все в небе)

блог: http://blog.csdn.net/mcky_love

Самородки: https://juejin.cn/user/1996368846268334

Лофтер: http://zcxy-gs.lofter.com/

гитхаб: https://github.com/gs3170981?tab=repositories

sf: https://segmentfault.com/u/mybestangel/articles


заключительные замечания

Призрак знает, сколько решений я перепробовал, сколько хром-версий скачал, написал бесполезных статей, плюс куча репостов заняла домашнюю страницу Baidu.

你的良心不会疼吗?

Неудивительно, что Google — лучшая поисковая система, печально.