Эруда, забытый артефакт отладки

введение

Какими бы крутыми ни были начальники в своей повседневной работе, они не осмеливаются сказать, что их код полностью свободен от проблем.Если есть проблема, то есть и отладка.Что касается средств отладки, то всех может волноватьfiddler,Charles,chrome devtools,Firebug, удаленная отладка Safari и т. д. более привычны, и даже некоторые из них могут быть мною не использованы;

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

Как говорится: "预先善其事必先利其器", чем я хочу поделиться с вами сегодня, это небольшой инструмент, который может быть проигнорирован людьми, почему он игнорируется людьми? Потому что он был найден на github.4.6kзвезда,457 Fork,Watch 173Раз, то есть количество людей, которые знают это среди десятков миллионов разработчиков, не может превышать 5w, поэтому я решил поделиться волной.Эта статья посвящена руководству, надеясь внести небольшое удобство в разработку для всех.Повышение эффективности:

在日常的移动端开发时，一般都是试用chrome浏览器的移动端模式进行开发和调试，只有在chrome调试完成，没有问题了才会上到真机测试，移动端,宝剑锋从磨砺出，梅花香自苦寒来，做有温度的攻城狮!，公众号：honeyBadger8

вотИТ-альянс Flathead,Я首席填坑官—Сунан, Поделись сердцем и будь теплым осадным львом.

Что такое Эруда?

Erudaчто это? Eruda — фронтендмобильный,мобильныйРазработана панель отладки, похожая наChrome DevToolsМини-версия (не такая мощная, как хром, это точно), в ее основные возможности входят: захватconsoleжурнал, проверка состояния элемента, отображение показателей производительности, захват запросов XHR, отображение本地存储иCookie информация, обнаружение функций браузера и многое другое.

Хотя при ежедневной разработке мобильных терминалов режим мобильного терминала браузера Chrome DevTools обычно используется для имитации различных моделей мобильных телефонов для разработки и отладки, чтобы убедиться в отсутствии проблем с функциями/отображением страниц и т. д. перед отправкой теста. ;

Но, как я уже говорил, это простомоделирование,моделирование, количество современных брендов мобильных телефонов может исчисляться десятками миллионов, различные типы браузеров в мобильных телефонах и даже приложения имеют свои собственныеразличные функцииГрыжа поясничного диска, некоторые из которых особенно заметны, мы должны лечить ее, если мы больны, в противном случаеТест, Продукт, Требования, ЛидНас не отпустят, как в сцене на картинке ниже.

做移动端Web开发的一大痛点就是，在真机运行下无法查看console.log日志和其他信息如网络请求、显示本地存储等信息。如果网页是运行在,首席填坑官∙苏南的专栏交流：912594095、公众号：honeyBadger8

как пользоваться?

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

方式一，默认引入：
<script src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>

方式二，动态加载：

__DEBUG__ && loadJS('http://cdn.jsdelivr.net/eruda/1.0.5/eruda.min.js', ()=>{
  eruda.init();
});//苏南的专栏 交流：912594095、公众号：honeyBadger8

方式三 ，指定场景加载：
//比如线上 给自己留一个后门，
//我们一般的做法是喜欢给某个不起眼的元素，添加一个点击事件，要点它十次、八次以后才开启 debug 模式；
;(function () {
    var src = 'http://cdn.jsdelivr.net/eruda/1.0.5/eruda.min.js';
    if (!/eruda=true/.test(window.location) && localStorage.getItem('active-eruda') != 'true') return;
    document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
    document.write('<scr' + 'ipt>eruda.init();</scr' + 'ipt>');
})();

方式四 ，npm：
 npm install eruda --save

…… 加载的方式很多

маленький, но красивый

Маленький здесь не значит, что его сумка маленькая.Ученики, которые знают его, знают, что его сумка не маленькая (约100kb gzip);
100кб это не так уж и мало.Со слов девушки это:полный, прямо сказать, что это жир, вы мертвы;
здесьмаленький, но красивыйЭто означает, что функции маленькие и мощные, а интерфейс тоже красивый;
Сказав все это, давайте посмотрим, как это выглядит:

做移动端Web开发的一大痛点就是，在真机运行下无法查看console.log日志和其他信息如网络请求、显示本地存储等信息。如果网页是运行在手机浏览器中还算好，可以把网址在电脑上打开查看console信息，但是如果是做APP的内嵌H5页面，那就只能靠开发阶段在浏览器模拟环境中尽量没有Bug,公众号：honeyBadger8

Список функций

console

Не надо нести чушь о роли консоли, все понимают;
раноconsoleДо рождения в наших функциях отладки было слишком много предупреждений, в том числе о текущем мобильном терминале, на мобильном телефоне мы хотим видеть значения параметров, данные, узлы и т.д.alertПечатается большинством, но слишком сыро, и может попасть в сеть случайно;
erudaМожет помочь нам решить эту проблему; все журналы и ошибки могут быть захвачены для нас
даже мы можемchrome, выполнить js-код прямо в консоли;

微信开发必备】h5开发调试，利器Eruda ，公众号：honeyBadger8

Elements

erudaЭто не так интуитивно понятно, как на стороне ПК, но также из-за ограничений способа отображения на мобильной стороне,
Он может перечислить каждый дочерний узел под каждым родительским узлом, когда вы нажимаете на дочерний узел, он перечисляет все свойства, стили, блочные модели и т. д. текущего узла;
Просмотр содержимого тегов и атрибутов; просмотр стилей в Доме; поддержка выделения элементов страницы; поддержка выбора прямым щелчком на экране; просмотр различных событий, привязанных к Дому.
можно даже использоватьPluginsПлагины, как и на стороне ПК, образуют дерево домов;

使用神器eruda 进行移动端调试-，公众号：honeyBadger8 PC、Mobile调试节点对比

Network

Большинство текущих проектов имеют вид front-end и back-end шаринга, становится все больше и больше бизнесов, обрабатываемых фронтендом и различными запросными ресурсами;
Чем больше ты работаешь, тем больше ответственности берешь на себя, тем больше у тебя горшков, больших и плоских~
такNetworkНеобходимость захвата запроса, отправки данных, просмотра, возврата в голову, возврата содержимого и другой информации очевидна, это для нас, чтобы найти проблему, обычно заканчивается вокруг ФБР, появляется большая помощь, например: назад -конец вы говорите запрашивайте меньше параметров, вы читаете логику внешнего кода, это не проблема, но телефон никуда не настраивается, Сеть может видеть очень прямо с тем, что вы запрашиваете.

vConsole便是这样一款很棒的移动端DevTools工具，由大厂企鹅出品。但本文把他定位为男二号，今天的主角男一号是：Eruda！vConsole的同类。,PC、eruda 数据请求对比

Resources

Это то же самое, что и в Chrome DevtoolsApplication + Source, комбинация двух;
Ресурсы Он может просматривать такую информацию, как файлы cookie, localStorage, sessionStorage и т. д., а также может выполнять четкие операции (приложение);
Он также проверяет текущие скрипты загрузки страницы и файлы стилей, видит ресурсы (Источник), такие как изображения, загруженные страницей;
Ну, я чувствую, что сколько бы я ни говорил, это не так прямолинейно, как на картинке выше:

Resources 功能分析

Sources/Info

Источники: просмотрите исходный код страницы, отформатируйте код html, css, js и данные json.
Информация: он в основном выводит информацию об URL-адресе и пользовательском агенте, а также некоторую другую информацию о системе мобильного телефона, а также поддерживает настраиваемый вывод содержимого.

通常写前端页面都在Chrome浏览器的开发模式下进行调试，但是写放在移动端的H5页面时，有时候会遇到在Chrome上调试没有问题，但是在手机的浏览器上有问题的情况；也有的页面是需要放在微信公众号中的，调用了微信JSSDK的方法，必须得通过手机上的微信内置浏览器才能使用，这个时候如果遇到了报错，只能够通过alert一步一步地定位问题。今天发现了一个好用的可以在手机浏览器上直接定位问题的插件：eruda.js,Resources 功能分析

Расширенное использование

Выше только что были представлены некоторые из его основных функций, которые я больше использую в своей работе;
Недавно я обнаружил, что в новой версии гораздо более мощные функции, которыми я пользовался раньше.1.0.5, похоже, что плагина нет;
Наверно смотрел, они достаточно мощные, в том числе вышеперечисленныеDom tree, Эта часть плагина фактически не применялась, поэтому не打肿脸充胖子Теперь заинтересованные студенты могут посмотреть сами.
Если вы чувствуете, что существующие плагины не могут удовлетворить ваши потребности, он также поддерживает написание пользовательских плагинов.

конец:

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

Для онлайн-проблем наш общий подход заключается в том, чтобы добавить событие клика к неприметному элементу и щелкнуть его десять или восемь раз, прежде чем открыть.debug 模式;

Приведенный выше QR-код действительно является настоящей официальной демонстрацией, не беспокойтесь о подпрограммах, есть также ссылки:eruda.liriliri.io/

адрес гитхаба:GitHub.com/off-calendarday/пока…

宝剑锋从磨砺出，梅花香自苦寒来，做有温度的攻城狮!，公众号：IT平头哥联盟

Автор: Сунан-Главный специалист по заполнению карьеров

Ссылка на сайт:blog.CSDN.net/WeChat_4325…

Группа связи: 912594095[资源获取/交流群],публика:honeyBadger8

Данная статья является оригинальной и авторские права принадлежат автору. Для коммерческой перепечатки обращайтесьIT平头哥联盟Авторизованная, некоммерческая перепечатка, просьба указывать оригинальную ссылку и источник.