Постоянная ссылка на эту статью:GitHub.com/H AOC также 942…

Причина написания этого резюме связана с мобильным проектом на прошлой неделе.debugГоворя о. В тот день, тестовая леди взяла свою собственнуюiphone6sОн подошел ко мне и сказал не открывать страницу. Я подумал: как это возможно, мой мобильный телефон очень хорош, ах,ChromeСредства отладки не сообщали об ошибках! Я взял ее мобильник, посмотрел на него и обнаружил, что он действительно пуст, как только я вошел. WTF (ручной черный знак вопроса)! ! ! Затем пришла проблема, в среде разработки не сообщалось об ошибке, но на реальной машине возникали непредвиденные ситуации, и не было возможностиPC端жертвовать такF12Дафа, как найти проблему и решить ее? Наконец, с моей (Google) изобретательностью я нашел сопоставимыйPC端Способ отладки опыта. Вот краткое изложение, посвященное всем фронтендерам, которые замучены отладкой реальной машины на мобильном терминале, но не имеют возможности начать.

1. vConsoleРекомендуемый индекс: ★★★☆☆

Считается, что панель веб-отладки, произведенная Tencent, считается использованием многих партнеров в интерфейсах.vConsoleДобавлена ​​подвеска небольшей кнопки на вашей веб-странице, вы можете нажать на него, чтобы открыть и закрыть панель отладки, а просмотретьDOM,Console,Networkа также本地存储и другая информация. В основном он может удовлетворить потребности обычной фронтенд-разработки. Он также очень прост в использовании,npmУстановить или импортировать прямо на нужную страницуjs文件,Потомnew VConsole()Вот и все. Незнакомые друзья могут перейти прямо на официальный GitHub, чтобы увидетьREADME. Но это не решило мою проблему, потому что мойbugДостаточно серьезный, чтобы сообщить об ошибке, как только вы войдете на страницу, хрупкийjavascriptВзорвать прямо на месте 💥, страница пуста 😂.

Похожие продуктыeruda

2. CharlesРекомендуемый индекс: ★★☆☆☆

CharlesЭто мощный инструмент захвата пакетов, который может перехватывать в том числеhttpsРазличные сетевые запросы, в том числе удобство просмотра конкретной информации. имеютMac,Windowsа такжеLinuxНесколько версий по конфигурацииWIFIПрокси также могут перехватывать запросы с мобильных телефонов. Ведь немалая часть ошибок фронтенда вызвана сетевыми ошибками или данными, которые не соответствуют ожиданиям (бэкенд сбрасывает котел 😄). Итак, перехвативhttpЗапросите, проверьте конкретную информацию и данные запроса, вы можете получить много полезной информации, которая может помочь в определенной степени.debug. Но софт платный (надеюсь, все поддерживают подлинную версию, помните, что вы тоже разработчик), и позиционировать его нельзяjsСообщается об ошибке, поэтому его можно использовать только как вспомогательный инструмент. Что касается того, как его использовать, в Интернете есть много вводных -один здесь.

3. weinreРекомендуемый индекс: ★★★☆☆

weinre — очень хороший инструмент для проверки веб-страниц, который можно запустить локально, запустивweinreслужбы и встроить абзац в мобильную веб-страницуjsСценарий для реализации связи с компьютером достиг эффекта отладки, аналогичного инструменту разработки браузера, его рабочему интерфейсу иvConsoleПочти, включая просмотрDOM,Console,NetworkПодождите, просто это все делается на компьютере, а не на телефоне.Мобильная отладка инструментов веб-разработчика WeChatТоже в силу этого. Прикрепите простое использованиепредставлять. потому что мойjsДавний взрыв 💥, и этоvConsoleТо же, мне не очень помогло.

4. Mac + IOS + SafariРекомендуемый индекс: ★★★★☆

Если у тебя естьMacКомпьютер и айфон, тогда поздравляю, вы далеки от решенияbugЭто просто мой блог. (вручную смешно)

Шаг 1: Откройте iPhone设置 > Safari浏览器 > 高级 > Web检查器

Шаг 2: ОткройтеMacВверхSafari浏览器 > 偏好设置 > 高级 > 在菜单栏中显示“开发”菜单

Шаг 3: ПодключитеMacКомпьютер и iPhone, и выберите доверять устройству. потом по телефонуSafari浏览器Откройте страницу, которую нужно отладить, и щелкните положение красного прямоугольника на рисунке ниже на компьютере.

Шаг 4: После нажатия он появится, как показано на рисунке ниже, что почти совпадает с интерфейсом отладки компьютера. Вот как я узналjsОб ошибке сообщили, и проблема была успешно решена, завоевав признание барышни 😎.

5. Chrome浏览器 + AndroidРекомендуемый индекс: ★★★★★

Многие мелкие партнеры могут не использоватьMacили не привыкSafari浏览器Это не имеет значения, у Google есть похожие инструменты, и они больше соответствуют привычкам использования каждого. Друзья с лестницами, вы можете смотреть прямоОфициальная документация Google.

Шаг 1: ОткройтеAndroidмобильный телефон设置 > 开发者选项 > USB调试. нет в настройках开发者选项Да, самостоятельноБайду.

Шаг 2: Подключите компьютер иAndroidНа телефоне появится следующий интерфейс, нажмите确定.

Шаг 3: Для васAndroidСкачать мобильную версиюChrome浏览器(поищите сами в крупных магазинах приложений) и на мобильном телефонеChrome浏览器Откройте страницу, которую нужно отладить.

Шаг 4: ОткройтеChrome浏览器, в порядке, отмеченном на рисунке ниже, и по очереди нажимайте кнопку «Открыть». я использую小米5, вы можете видеть, что левая сторона имеетMI 5Подключенный шрифт. Места, где нарисованы линии, находятся на мобильном телефоне.Chrome浏览器и собственный браузерWebViewстраница, которая открывается.

Шаг 5: В правой части каждой страницы естьInspectПроверьте кнопку, нажмите на знакомый вам экран, вам не нужно объяснять это позже! идем с тобой 🚀.

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

Суммировать

Если вы хотите делать свою работу хорошо, вы должны сначала отточить свои инструменты.Нет хороших инструментов или методов отладки.debugЭто кошмар переднего плана. А вот с этими нехитрыми методами я думаю вы отличные фронтовики, помогите девушке немного починитьbugещеso easyиз. Если у вас, ребята, есть хорошие мнения или другие решения, вы также можете обменяться ими в области комментариев.