mdebug — это инструмент веб-отладки, разработанный на основе React.

TNTWeb – полное название фронтенд-команды Tencent News в Китае и Тайване. Небольшие партнеры группы имеют опыт и накопленный опыт работы в крупных фронтенд-областях, таких как веб-интерфейс, разработка NodeJS, дизайн пользовательского интерфейса и мобильные приложения. .

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

Команда выступает за совместную разработку с открытым исходным кодом и имеет множество технических экспертов.github.com/tnfe

автор этой статьиЮньфэнадрес проекта:github.com/tnfe/mdebug

1615550396_20_w2880_h2154 (2).png

mdebugдаНовости Tencent Команда TNTWEBЗапущен инструмент веб-отладки, разработанный на базе React, который много лет накапливался в практике мобильной веб-разработки Tencent News WeChat mobile q dual plug-in. По сравнению с инструментами отладки, такими как vconsole и eruda, он написан с использованием современного фреймворка. Он объединяет возможности мониторинга сети, предоставляет более широкие возможности отладки и API-интерфейсы, имеет более мощные возможности захвата сети и прост в доступе и использовании. В этой статье этот инструмент будет всесторонне представлен с точки зрения предыстории, архитектуры, функций, принципов реализации и будущих точек расширения.

1. Предпосылки

Отладка всегда была проблемой в мобильной веб-разработке, и индустрия постоянно ищет лучшие решения для инструментов отладки. отОтладка соединений реальной машины,JS-моделирование,Nodejs-прокси, Программное обеспечение агентаи другие аспекты, чтобы предложить решения для мобильной веб-отладки.mdebugЭто легкая химическая промышленность, которая реализует мобильную веб-отладку с помощью моделирования js. Он прост в использовании и мощен, не полагаясь на какие-либо плагины.

гит-адрес: github.com/tnfe/mdebug

Быстрый опыт: tnfe.github.io/mdebug

2. Введение в функцию

mdebug предоставляет семь полезных функций системы, журнала, сети, элемента, хранилища, агента и производительности. Ниже мы вводим эти функции одну за другой:

1. Система

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

2. Элементы

Представлены элементы DOM текущей страницы, вы можете быстро понять элементы DOM текущей страницы, поддерживать развертывание и свертывание, а также использовать элементы, близкие к элементам Chrome devtools.

3. Журнал

Поддержка отображения нескольких журналов, поддержка классификации журналов, глобальная фильтрация, экспорт журналов, выполнение команд js, поддержка сворачивания и расширения длинных журналов, а также повышение производительности отображения больших объемов журналов.

4. Сеть

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

5. Хранение и файлы cookie

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

6. Фронтальный прокси-сервер

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

7. Производительность

Обратитесь к общим показателям мониторинга производительности в отрасли и выведите текущую производительность страницы.

3. Быстрое использование

1. ES6

 import mdebug from 'mdebug';
 mdebug.init();

2. CDN

(function() {
    var scp = document.createElement('script');
    // 加载最新的mdebug版本
    scp.src = 'https://unpkg.com/mdebug@latest/dist/index.js';
    scp.async = true;
    scp.charset = 'utf-8';
    // 加载成功并初始化
    scp.onload = function() {
        mdebug.init();
    };
    // 加载状态切换回调
    scp.onreadystate = function() {};
    // 加载失败回调 
    scp.onerror = function() {};
    document.getElementsByTagName('head')[0].appendChild(scp);
})();

4. Введение в API

1. init

mdebug.init({
    containerId: '' // mdebug挂载容器id, 如果传空, 内部会自动生成一个不重复的id,
    plugins: [], // 传入mdebug插件
    hideToolbar: [], // 传入需要隐藏的tab id
});

2. addPlugin

mdebug.addPlugin({
    id: '', // tab id
    name: '', // tab对应的中文title,
    enName: '', // tab对应的英文title
    component: () => {}, // tab对应的react组件
});

3. removePlugin

// 支持移除的panel对应的id
/*
System => system;
Elements => elements;
Console => console
Application => application
NetWork => network
Performance => performance
Settings => settings
*/
mdebug.removePlugin([]);

4. exportLog

/*
@returned {
  type: '' // 日志类型
  source: [], // 原始日志
}
@params type
// type等于log, 返回所有的console日志
// type等于net, 返回所有的net日志
*/
mdebug.exportLog(type);

5. on

mdebug.on(eventName, callback);

6. emit

mdebug.emit(eventName, data);

5. Список событий

название события	данные	Сроки триггера
ready	object	mdebug загружен
addTab	object	добавить панель
removeTab	array	снять панель
changeTab	object	Переключение панелей

6. Внедрение основных инструментов отладки в отрасли.

1. JS-симуляция

eruda GitHub.com/off-calendarday/пока…
vconsole blog.CSDN.net/Только извините/AR… Шестилинейная рыба Талант/статья/шаблон…

2. Инструмент захвата пакетов

Fiddler

Блог Woohoo.cn на.com/dizzy/afraid/5140…

Charles блог woo woo woo.cn на.com/Peng-Lan/Afraid/…

ООО, ООО на .cn blog .com / chet lam / fear / ...

Tcpdump

nuggets.capable/post/684490…

USB Bump.IO/notes/2017/…

3. Прокси-инструмент Nodejs

whistle

сегмент fault.com/ah/119000001…

LivePool

woohoo.freesection.com/Sec tool/734…

AnyProxy

Опыт Baidu.com/article/948…

7. Сравнение отраслевых решений

По сравнению с отраслевыми инструментами отладки моделирования js, mdebug находится вРасширяемость,Пользовательский опытБольше думайте и исследуйте.

Восемь, общая структура

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

Девять, принцип реализации

1. Перехватить консольСвязанный исходный код

Через API консоли хука журналы, выводимые консолью, передаются в mdebug для форматированного отображения. Поддержка извлечения журналов, экспорта и других функций.

2. Hook Fetch Ajax Связанный исходный код

mdebug перехватывает сетевые запросы на нижнем уровне, сохраняет информацию, относящуюся к сетевым запросам, в очереди памяти и отправляет соответствующие события в mdebug для отображения. В то же время он поддерживает глобальное извлечение и экспорт журналов сетевых запросов.

3. Performance API

Через API производительности мы можем получить производительность загрузки страницы браузера, загрузку статических ресурсов и т. д.

(1) Производительность страницы

mdebug использует window.performance.timing для получения данных о производительности загрузки страницы и ссылается на методы расчета показателей производительности, обычно используемые в отрасли для предоставления простых и интуитивно понятных данных о производительности для бизнеса.

(2) Статическая загрузка ресурсов

Получите статус загрузки статических ресурсов страницы через performance.getEntries и уведомите сетевую панель mdebug через механизм событий.

(3) Связанный исходный код

GitHub.com/TNF E/ не только продает… GitHub.com/TNF E/ не только продает…

4. Используйте избыточность для управления состоянием

5. Вызов собственного API хранилища для получения, установки и удаления хранилища.

6. В дополнение к управлению состоянием redux, журналу, уведомлению о распределении сетевых данных и обмену данными между mdebug и внешним кодом бизнес-логики через механизм событий шины событий.

10. Будущие точки расширения

В качестве нового исследования мобильных инструментов веб-отладки mdebug может в будущем аккумулировать больше функций в сочетании с бизнес-практиками. Благодаря механизму плагинов его можно свободно комбинировать для использования в бизнесе. Кроме того, мы также изучаем поддержку нескольких интерфейсных фреймворков, и написание плагинов может поддерживать vue, react, native js и т. д. Кроме того, как вводный учебный проект для реагирования, это также проект хорошей практики.