предисловие

Отладка веб-страницы на стороне ПК относительно проста.В основном есть несколько методов отладки на мобильном терминале, от простого к сложному, от отладки с помощью симуляции до удаленной отладки, которые условно можно разделить на несколько частей:

1. Имитация отладки мобильного телефона с помощью Chrome DevTools (Google Chrome)

2. Инструмент удаленной отладки Weinre (удаленный веб-инспектор)

3. «Инструменты веб-разработчика» WeChat, которые интегрируют Chrome DevTools и weinre, хорошо справляются со своей задачей.

4. Chrome DevTools для удаленной отладки страниц Android и iOS

5. Eruda — интерфейсная панель отладки для мобильных веб-страниц.

читать инструкции

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

Я в основном обобщаю здесь несколько методов отладки, чтобы мне и другим было удобно узнать больше методов отладки после прочтения статьи; если вы столкнулись с шагом, который вы не можете понять, вы можете оставить сообщение на Baidu или в комментарии область, спасибо!

1. Chrome DevTools имитирует отладку мобильного телефона

Чтобы напрямую использовать инструменты разработчика Google Chrome, вы можете обратиться к рисунку ниже или использовать сочетание клавиш F12 или ctrl+shift+I; лично я считаю, что независимо от того, какой браузер вы используете, просто сначала нажмите F12, а затем Вы можете открыть инструменты разработчика, но не можете открыть его снова.

Этот метод отладки можно использовать не только для имитации отладки мобильного телефона, но и для основного метода отладки страницы на стороне ПК, который в основном используется для отладки мобильного телефона.

После открытия вы увидите интерфейс отладки разработчика, аналогичный следующему интерфейсу: Элементы могут просматривать элементы документа, Консоль может отлаживать JS онлайн и просматривать результаты вывода, Источники могут отлаживать JS и просматривать зависимые ресурсы, а Сеть просматривать все сетевые запросы.

Введите адрес страницы для отладки в адресной строке браузера, выберите имитируемое устройство, а затем вы можете выбрать отладку js для отладки.На правой панели есть кнопка операции отладки, на панели приложения вы можете просмотреть файлы cookie данных, хранящиеся в приложении.

Что делать, если нет модели, которую нужно смоделировать? Конечно, он добавлен. Откройте панель настроек DevTools. Нажмите «Настройка» на левом изображении, и появится правое изображение, как показано ниже:

2. Инструмент удаленной отладки Weinre (удаленный веб-инспектор)

Weinre на самом деле встраивает определенный js в отлаживаемую страницу, чтобы страница могла отслеживаться weinre и открывать панель отладки; следует отметить, что панель отладки weinre не может отлаживать JS и не поддерживает отладку по точкам останова. Для отладки стилей страницы сценарии использования ограничены;

Выбирайте в соответствии с вашими потребностями.blog.CSDN.net/свежий любовник/…;Поскольку я использую меньше и не рекомендую этот инструмент, он здесь только как введение и освобождение; если вы хотите

Давайте обдумаем содержание справочной ссылки для нашего глубокого знания weinre.

3. «Инструменты веб-разработчика» WeChat

Инструмент веб-разработчика WeChat интегрирует DevTools и weinre от Google.Можно сказать, что это набор двух вышеупомянутых пунктов.Для тех страниц H5, которые используются в общедоступных учетных записях WeChat, это лучший выбор;

Этот инструмент отлаживает обычные веб-страницы, такие как Google Chrome, и панель отладки, которую вы видите, аналогична; но если вы хотите отлаживать функции, связанные с WeChat, такие как: JS-SDK, список разрешений и т. д., вы должны использовать этот инструмент.

Адрес загрузки инструмента:Билеты.WeChat.QQ.com/wiki?Он = горячая вода...

Помимо использования URL-адреса для имитации отладки, веб-инструмент WeChat также может выполнять удаленную отладку на телефонах Android. В настоящее время последняя версия не поддерживает удаленную отладку iOS. Откройте панель мониторинга устройства:

После открытия вы увидите следующий интерфейс.Видно, что устройство Huawei было подключено.При удаленной отладке следует обратить внимание на два момента:

1. Мобильный телефон и компьютер используют соединение USB, и мобильный телефон должен включить режим отладки USB (разные мобильные телефоны разные)

2. Установите последнюю версию Google Chrome на свой телефон и откройте его.

Затем нажмите «Проверить», чтобы начать отладку страницы, открытой текущим браузером Google на мобильном телефоне.Я не буду вдаваться в подробности здесь, да и нет нужды углубляться в это, это будет подробно объяснено ниже.

Давайте взглянем на отладку мобильных устройств WeChat. iOS обеспечивает только общее тестирование прокси-сервера. В дополнение к тестированию прокси-сервера Android также имеет отладку ядра X5 Blink. Однако не все мобильные телефоны поддерживают X5 Blink. Поэтому обычно используется отладка прокси-сервера.

После настройки прокси-сервера в сети Wi-Fi мобильного телефона нажмите, чтобы начать отладку, и появится интерфейс мониторинга.Обнаружено, что на самом деле он реализован с помощью weinre, но WeChat улучшил его.По сравнению с прямым использованием weinre, он следующие преимущества:

1. Нет необходимости вручную добавлять скрипт отладки weinre на страницу, что очень удобно

2. Вы можете увидеть полный журнал HTTP-запросов на карточке страницы сетевых запросов. Сеть weinre, и нет никаких ограничений, что вы можете видеть только ajax.

Но есть и недостатки. Поскольку это инструмент, разработанный WeChat, мобильная отладка может отлаживать только страницы, открытые в приложении WeChat, и не все веб-страницы, которые можно открыть в WeChat, могут быть отлажены. Есть подозрение, что инструмент был отфильтрован. внутри.

После перезапуска WeChat вы можете получить доступ к странице в WeChat, которую можно отслеживать, а затем вы можете отладить стиль веб-страницы.В карточке страницы сети вы можете увидеть параметры и результаты ответа каждого запроса.

Короче говоря, если страница отладки является страницей в WeChat (обычно это общедоступная учетная запись), очень эффективно использовать инструменты, предоставляемые WeChat; если это страница в обычном браузере, вы также можете использовать WeChat Chrome DevTools, но лучше не использовать weinre

4. Chrome DevTools для удаленной отладки страниц Android и iOS

Установите новую версию Google Chrome на компьютер, затем введите chrome://inspect в адресной строке, чтобы открыть страницу мониторинга устройств, где вы можете отслеживать устройства iOS и Android, если интерфейс не соответствует картинке, установите последняя версия браузера

Android:

помещение:

2. Установите последнюю версию Google Chrome на свой телефон и откройте его.

Вы обнаружите, что на странице мониторинга устройств есть еще одно устройство Huawei, и вы можете увидеть подключение веб-страницы, открытой Google Chrome, на текущем мобильном телефоне.

а): Вы можете ввести URL-адрес, который будет открыт мобильным телефоном здесь, а затем открыть, текущая страница, отображаемая на мобильном телефоне, изменится

b):проверить означает начать отладку текущей страницы, которая откроет панель отладки (важно)

c): вкладка фокуса, что означает позволить телефону отображать текущее соединение

d):reload означает перезагрузку страницы, то есть обновление

e): закрыть означает закрыть страницу, отображаемую текущим мобильным телефоном.

Затем нажмите «Проверить», чтобы запустить страницу отладки. Обратите внимание, что если браузер Google не может перевернуть стену, страницу отладки нельзя открыть. Вы можете изменить файл hosts в Baidu, чтобы перевернуть стену.

Затем вы можете удаленно отлаживать мобильную веб-страницу так же, как отлаживаете веб-страницу ПК.

iOS (в оконной системе, если это система MacBook, игнорируйте эту часть):

Вы можете обратиться к:блог woo woo woo.cn на.com/collison/afraid/64…

помещение:

1. Установите программное обеспечение iTunes на компьютер, иначе мобильный телефон Apple не сможет нормально распознаваться.После установки кабель для передачи данных подключается к мобильному телефону и компьютеру.

2. Откройте настройки телефона -> Sarafi -> Дополнительно -> Web Inspector -> Включить (по умолчанию выключено, включите)

3. Скачатьios-webkit-debug-proxПрокси (32-битный или 64-битный), его функция заключается в установке прокси-сервера между Chrome и Sarafi, чтобы Chrome на компьютере мог обнаружить страницу, открытую Sarafi на мобильном телефоне.

4. Выполните ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/инспекционный.html в cmd, -f в команде для отладки с помощью встроенного монитора Google (по умолчанию удаленный)

После запуска будет мониторить порт 9222, а потом увидит, что подключено iOS-устройство с именем jiba, а в скобках указан UDID устройства, потом проверим, проверил ли Google Chrome этот порт, на правой картинке есть порт 9222, нет просто добавить вручную

В это время откройте браузер Sarafi на мобильном телефоне, откройте домашнюю страницу Baidu и обнаружите, что браузер может ее обнаружить.Если вы ее не видите, обновите интерфейс мониторинга.Вообще говоря, она автоматически появится в течение 3 секунд.

Нажатие на кнопку проверки также вызывает панель отладки, как показано ниже, обнаружено, что панель отладки iOS не может видеть проекцию экрана мобильного телефона на компьютере, но это не влияет на отладку; но вы можете столкнуться с проблемой, что точка останова не действует при отладке js,

Если вы, к несчастью, столкнулись с этой проблемой, нажмите кнопку в красном поле на рисунке два раза подряд — сначала отключите точку останова, а затем запустите ее, чтобы восстановить функцию отладки конечной точки.Не знаю, почему, но догадываюсь заключается в том, что состояние точки останова восстанавливается во время этого процесса., этот вопрос очень странный.

Использование Chrome для отладки iOS и Android здесь везде, Этот способ использования Google Chrome основан на мобильном браузере Google на Android и браузере Sarafi на iOS, что ограничено конкретным программным обеспечением, но это понятно, ведь удаленная отладка не так просто, как аналоговая отладка

5. Eruda — интерфейсная панель отладки для мобильных веб-страниц.

что такое эруда? Как следует из названия, он используется для отладки страницы на мобильном телефоне.Обратите внимание, что это не на компьютере.Несколько методов отладки, упомянутых выше, представляют собой имитацию отладки на компьютере или удаленную отладку мобильной страницы, но eruda прямо на компе Страница отладки на телефоне.

какая польза? Если вы должны сказать, что преимущество заключается в том, что вы можете напрямую открыть панель отладки, аналогичную панели разработчика на стороне ПК, на мобильном телефоне, основная цель состоит в том, чтобы отлаживать непосредственно на мобильном телефоне, когда мобильная страница отладки на стороне ПК и Эффект бега на мобильном телефоне непостоянен.

Принципиальная схема (диаграмма эффекта отладки на мобильном телефоне):

Конкретная информация:www.oschina.net/p/eruda

В настоящее время я использую его меньше, но это рекомендуемый инструмент отладки. Как правило, разработчики обычно отлаживают страницы непосредственно на ПК (будь то страница для ПК или страница для мобильных устройств), поэтому рекомендуется использовать инструменты веб-разработчика Chrome DevTools или WeChat для отладки в процессе разработки.

Конечно, некоторые студенты говорят, что я использую браузер 360. На самом деле, независимо от того, какой браузер вы используете, кроме разницы в ядре, режим отладки в основном такой же, как Chrome DevTools, здесь я хочу сказать, что вы можете напрямую использовать сторону ПК для отладки общей страницы отладки. , но обнаружил, что эффект запуска на реальной машине не соответствует ожиданиям

Eruda может использоваться для реализации реальной отладки машины для обнаружения и решения проблем.

Вышеуказанные инструменты не существуют независимо друг от друга, и очень вероятно, что для решения проблемы нужна совместная отладка несколькими способами, ведь мы не можем уложиться в один инструмент, и мы должны использовать свои сильные стороны и избегать наши слабости;

Наконец, так как я бэкенд-инженер, я увлекаюсь фронтендом и имею ограниченный опыт. Должно быть много отличных инструментов отладки или методов отладки, которых я не знаю. Если вы знаете, пожалуйста, свяжитесь со мной, и все могут продвигать друг друга.