Используйте свисток для отладки мобильных страниц

внешний интерфейс HTTPS GitHub JavaScript

whistleЭто кроссплатформенный прокси-инструмент для веб-отладки на основе Node. Его можно использовать как обычный http-прокси или использовать для захвата, изменения и обработки запросов http, https, websocket и туннелей, таких как: изменение хостов, методы запроса , коды состояния ответа, заголовок запроса (ответа), содержимое запроса (ответа) и т. д., в основном могут управлять всеми аспектами веб-запросов и поддерживать функции расширения подключаемых модулей, в этой статье в основном рассказывается о том, как использоватьwhistleДля отладки мобильных страниц, установки и использования свистка и другого контента обратитесь к Github:GitHub.com/avme/whist это….

Проблемы, возникающие при отладке мобильных устройств

По сравнению со стороной ПК, отладка веб-страниц на мобильном терминале в основном сталкивается со следующими тремя проблемами:

  1. Без Консоли ошибки js страницы не могут быть просмотрены и переданыconsole.xxxвывод журнала отладки
  2. Невозможно просмотреть и изменить структуру DOM и стиль страницы.
  3. Не могу отладить

Как правило, мобильные страницы отлаживаются на эмуляторе в браузере Chrome на ПК, но не все мобильные страницы можно отлаживать на эмуляторе на ПК, например, некоторые встроенные страницы приложений, которым необходимо вызывать локальный API приложения, или проблемы совместимости тестовых страниц. и т. д., вы можете увидеть реальный эффект только при работе на реальной машине.В настоящее время вы можете использовать свисток для решения первых двух проблем, указанных выше, посредством простой настройки (в настоящее время вы не можете получить отладочную информацию страницы через страницу js, функция отладки на данный момент не поддерживается, вы можете пройтиconsole.logвместо):

Используйте свисток, чтобы просмотреть ошибки js страницы и пройтиconsole.xxxвывод журнала отладки

whistleВнутренне реализует удаленную консоль, похожую на браузер.Logплатформы, вам нужно всего лишь настроить простые правила свистка для автоматического захвата ошибок страниц и вывода информации на консоль дляm.baidu.com/Например, посколькуhttps://m.baidu.com/Доступ к нему осуществляется по https, сначала по свисткуВключить блокировку https, чтобы перехватить и изменить https-запрос, мобильному телефону необходимоНастроить прокси свистка, когда все будет готово, можно настроить следующие правила:

m.baidu.com log://
# 如果你想同时注入js脚本，可以用下面一种方式
# 在mac或linux加载本地js文件/User/xxx/test.js
# m.baidu.com log:///User/xxx/test.js
# 在windows上加载本地js文件D:\xxx\test.js
# m.baidu.com log://D:\xxx\test.js
# 直接从whistle的Values配置的key-value里面获取脚本
# m.baidu.com log://{test.js}

Среди них Значения свиста относятся к:avme.GitHub.IO/свисток/веб…, метод сопоставления не ограничивается сопоставлением доменных имен, но также включает различные режимы сопоставления, такие как путь, обычное совпадение, подстановочный знак и точное совпадение.справочная документация.

Мы используем Values ​​от whistle для внедрения сегмента js в лог, который в основном используется для вывода данных через console.error, console.warn, console.log и т. д., и имитации выброшенного исключения:

m.baidu.com log://{test.js}

test.js:

console.error({ error: true });
console.warn({ error: true, warn: { test: true } });
console.log(123456);
// 模拟抛出异常
console.notAFunction('test');

Эффект следующий:

log

Используйте свисток для просмотра и изменения структуры DOM и стиля страницы.

whistleИнтегрированныйweinreтакже нужно только настроить правило для изменения структуры DOM и стиля веб-страницы через weinre на ПК:

m.baidu.com weinre://test

в,weinre://testсерединаtestЭто просто классификация weinre для предотвращения слишком большого количества подключений на странице отладки weinre Эффект следующий:

weinre

Использование свистка для внедрения vConsole

vConsoleЭто легкая, масштабируемая, передняя панель отладки разработчика для мобильных веб-страниц, разработанная командой WeChat.Основной принцип — имитировать консольную функцию браузера ПК путем внедрения js на страницу.jsСоглашение переходит на указанную веб-страницу (m.baidu.com/)инъекцияvConsole.js, настроить правило свиста:

m.baidu.com js://{vConsole.js}

Эффект следующий:

vConsole

Примечание. vConsole и weinre нельзя использовать одновременно.

Есть еще много сценариев применения для свистка, которые будут постепенно выводиться вам в будущем.Для получения дополнительной информации, пожалуйста, посетите Github свистка:GitHub.com/avme/whist это…, если у вас есть какие-либо вопросы или предложения, пожалуйста, не стесняйтесь спрашиватьissueилиPR.

Категории