Советы | Советы по использованию Eruda, артефакта мобильной веб-отладки

внешний интерфейс JavaScript
Советы | Советы по использованию Eruda, артефакта мобильной веб-отладки

Эта статья впервые появилась в моем блоге:dunizb.comОригинальная ссылка:Вы готовы читать .com/2017/10/16/...

Основная проблема мобильной веб-разработки заключается в том, что невозможно просматривать журналы console.log и другую информацию, такую ​​как сетевые запросы, отображать локальное хранилище и другую информацию при работе на реальном компьютере. Если веб-страница работает в браузере мобильного телефона, это неплохо, вы можете открыть URL-адрес на компьютере для просмотра информации консоли, но если это встроенная страница H5 приложения, она может полагаться только на разработку Этап и постарайтесь не использовать его в среде моделирования браузера.Ошибка, но как только H5 выйдет в сеть, будет сложнее сообщить об ошибке, и будет труднее найти проблему, если она зависит от среды приложения для запуска страница в Интернете. Было бы неплохо иметь такие инструменты, как Chrome DevTools, на мобильных устройствах?

vConsole — отличный мобильный инструмент DevTools, созданный Penguin. Но в этой статье он позиционируется как второй главный герой.Eruda! Аналогично vConsole. Если вы не знаете, как отлаживать веб-страницы на мобильных устройствах, эта статья будет вам очень полезна. Если вы пользователь vConsole, вы также можете попробовать Eruda. Если вы хардкорный игрок в мобильной веб-разработке, вы можете выбрать Игнорируйте эту статью спокойно.

Кто такой Эруда?

Всем привет, позвольте представить вам, это мой... Eruda — это панель отладки, предназначенная для мобильного веб-интерфейса, похожая на мини-версию DevTools, ее основные функции включают в себя: сбор журналов консоли, проверку состояния элемента, отображение показателей производительности, сбор запросов XHR, отображение информации о локальном хранилище и файлах cookie, браузер. обнаружение признаков и т. д.

Адрес GitHub:GitHub.com/ из календарного дня/ The..., Эрдуа с отличной внешностью и навыками:

颜值和技能都很棒的Eruda
Подробности можно нажатьздесьВидишь ли, я не буду вдаваться в подробности.

навыки и умения

Это основное внимание в этой статье. Для базового использования Eruda рекомендуется использовать форму CDN и настраиваемые параметры.На странице представлен следующий код:

;(function () {
    var src = '//cdn.bootcss.com/eruda/1.2.4/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>');
})();

eruda.init();Вы можете указать, какие панели инициализировать, и все загружаются по умолчанию.

Такое использование не является неправильным, но если вы хотите следить за Eruda для публикации в Интернете, то мы хотим удалить этот код? Если вам нужно, потому что это не нужно для отладки, Eruda загрузится сразу, значки Eruda появятся на странице. Моя цель, Eruda может оставаться на странице, независимо от того, какая среда, пока мы хотим вызвать, когда он появляется, он не появляется, общий код не нужен, когда он просто не действует.

Я думаю так: сначала введите вышеизложенное в кодsrcпомещатьif, при этом ставяlocalStorageизменить наsessionStorage,active-erudaПараметр также может быть изменен на более короткое имя.Измененный код выглядит следующим образом:

;(function () {
    if (!/eruda=true/.test(window.location) || sessionStorage.getItem('eruda') !== 'true') return;
    var src = '//cdn.bootcss.com/eruda/1.2.4/eruda.min.js';
    document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
    document.write('<scr' + 'ipt>eruda.init();</scr' + 'ipt>');
})();

Этот код означает, что в URL-адресе есть параметрыeruda=trueили в sessionStorageerudaверно для загрузки Eruda. Преимущество этого в том, что когда нам нужно отладить, мы можем добавить параметр после URL-адреса веб-страницы, и он не будет загружаться без отладки.

Однако это можно сделать лучше на этапе разработки, но добавление параметров URL-адреса в онлайн-среде может оказаться обременительным. Поэтому я подумал о том, чтобы щелкнуть элемент на странице 10 раз, а затем загрузить Eruda, щелкнуть 10 или более раз, а затем записать в sessionStorage.eruda=true, затем обновите текущую страницу. Вместо этого нажмите еще 10 раз, чтобы закрыть Eruda. Открывайте или закрывайте Eruda таким относительно скрытым способом, чтобы онлайн-среда также могла свободно открывать или закрывать Eruda.

Пример: Если есть такая страница, то в ней есть текст title

<h2>——规则详情——</h2>
<div>
.....
</div>

тогда мы можемh2связывать тегclickсобытие, метод соединения с именемshowEruda

<h2 onclick="showEruda">——规则详情——</h2>
<div>
.....
</div>

<script>
var count = 0;
function showEruda () {
    if (count >= 10) {    
        var erdua = sessionStorage.getItem('erdua');
        if (!erdua || erdua === 'false'){
            sessionStorage.setItem('eruda', 'true')
        } else {
            sessionStorage.setItem('eruda', 'false')
        }
        location.reload()
    }
    count++
}
</script>

Таким образом, нажатие на детали правила 10 раз вызовет Eruda, а еще 10 кликов закроют Eruda, в любом случае, я думаю, что это хорошо.

Я не знаю, как все его используют?

Эта статья была впервые опубликована в публичном аккаунте"Fullstack-разработчик фронтенда"ID: by-zhangbing-dev, прочитайте последние статьи в первый раз и отдайте приоритет публикации новых статей через два дня. Обратив внимание, ответьте, пожалуйста, личным письмом: Большая подарочная упаковка, отправка по сети качественных видеокурсов онлайн с информацией о дисках, безусловно, сэкономит вам много денег!

Категории