Skip to content

console增加清空按钮network增加显示请求类型和请求的参数和清空所有请求的按钮 #30

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

console增加清空按钮network增加显示请求类型和请求的参数和清空所有请求的按钮 #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
38a7348
console增加清空按钮和network增加显示请求类型和请求的参数和清空所有请求的按钮
jonyhank Aug 11, 2022
f734a52
按钮位置优化network清除按钮优化只清除当前显示的内容
jonyhank Jan 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.en.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ mdebug.emit(eventName, data);


## development

node v1
1. npm i
2. npm start
3. npm run build
Expand Down
75 changes: 9 additions & 66 deletions docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,71 +1,14 @@
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="ie=edge"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/><meta name="referrer" content="origin"><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="ie=edge"/><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/><title>mdebug</title><script charset="utf-8" src="//static.wehr.qq.com/oels/static/js/lib/jquery/jquery-1.11.3.min.js"></script><style>body{padding-left:10px;padding-right:10px}pre{background-color:#eee;padding:10px;font-size:16px;word-break:break-all;display:block;white-space:pre;margin:1em 0;white-space:pre-wrap;word-wrap:break-word;line-height:1.3}table{border-collapse:collapse}table td,table th{border:1px solid #eee;padding:10px}table th{background-color:#eee}.badge a{margin-right:3px}</style></head><body style="padding-left:10px;padding-right:10px"><h1 align="center"><img src="https://user-images.githubusercontent.com/6822604/130725631-dde49c00-24fe-44c6-a3fd-a5c709ce6e57.png" width="40%" style="max-width:400px"/></h1><p align="center" style="margin:30px 0 10px">基于React开发的移动web调试工具 <a href="https://github.com/tnfe/mdebug/blob/master/CHANGELOG.md">更新日志</a></p><table><tr><th><h4 align="center"><h4 align="center">简单易用</h4></h4></th><th><h4 align="center"></h4><h4 align="center">功能全面</h4></th><th><h4 align="center"></h4><h4 align="center">易扩展</h4></th><th><h4 align="center"></h4><h4 align="center">高性能</h4></th></tr><tr><td width="20%" align="center"><sub>使用cdn方式,一键接入</sub></td><td width="20%" align="center"><sub>类Chrome devtools, <strong>内嵌React开发者工具</strong>,支持日志,网络,元素,代理,存储,性能等, 具有更好的网络捕获能力和丰富的日志展现形式</sub></td><td width="20%" align="center"><sub>暴露内部丰富的事件, 可以和react组件无缝进行集成</sub></td><td width="20%" align="center"><sub>支持大数据量展示, 不卡顿</sub></td></tr></table><div align="center" style="margin-top:20px" class="badge"><a href="https://npmjs.org/package/mdebug" target="_blank"><img src="https://img.shields.io/npm/v/mdebug.svg" alt="NPM Version"/></a><a href="https://github.com/tnfe/mdebug/pulls" target="_blank"><img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs"/></a><a href="https://nodejs.org" target="_blank"><img src="https://img.shields.io/badge/node-%3E%3D%208.0.0-brightgreen.svg" alt="Node Version"/></a></div><h1>一、快速体验</h1><a href="https://tnfe.github.io/mdebug">https://tnfe.github.io/mdebug</a><h2>二、Installation</h2><h4>Install using npm</h4><pre>
npm install mdebug --save
</pre><h2>三、Useage</h2><h3>1.ES6</h3><pre>
import mdebug from 'mdebug';
mdebug.init();
</pre><h3>2.CDN</h3><pre>
(function() {
var scp = document.createElement('script');
// 加载最新的mdebug版本
scp.src = 'https://new.inews.gtimg.com/tnews/9d243fb8/a1f8/9d243fb8-a1f8-4bf7-9047-dfa01d8c9ca0.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);
})();
</pre><h2>四、API</h2><h3>1.init</h3><pre>
mdebug.init({
containerId: '' // mdebug挂载容器id, 如果传空, 内部会自动生成一个不重复的id,
plugins: [], // 传入mdebug插件
hideToolbar: [], // 传入需要隐藏的tab id
});
</pre><h3>2.addPlugin</h3><pre>
mdebug.addPlugin({
id: '', // tab id
name: '', // tab对应的中文title,
enName: '', // tab对应的英文title
component: () => {}, // tab对应的react组件
});
</pre><h3>3.removePlugin</h3><pre>
// 支持移除的panel对应的id
/*
System => system;
Elements => elements;
Console => console
Application => application
NetWork => network
Performance => performance
Settings => settings
*/
mdebug.removePlugin([]);
</pre><h3>4.exportLog</h3><pre>
/*
@returned {
type: '' // 日志类型
source: [], // 原始日志
}
@params type
// type等于log, 返回所有的console日志
// type等于net, 返回所有的net日志
*/
mdebug.exportLog(type);
</pre><h3>5.on</h3><pre>
mdebug.on(eventName, callback);
</pre><h3>6.emit</h3><pre>
mdebug.emit(eventName, data);
</pre><h2>五、事件列表</h2><table><thead></thead><tbody><tr><th><h4><strong>事件名称</strong></h4></th><th><h4><strong>数据</strong></h4></th><th><h4><strong>触发时机</strong></h4></th></tr><tr><td width="33.3%" align="center"><sub>ready</sub></td><td width="33.3%" align="center"><sub>object</sub></td><td width="33.4%" align="center"><sub>mdebug加载完毕</sub></td></tr><tr><td width="33.3%" align="center"><sub>addTab</sub></td><td width="33.3%" align="center"><sub>object</sub></td><td width="33.4%" align="center"><sub>增加面板</sub></td></tr><tr><td width="33.3%" align="center"><sub>removeTab</sub></td><td width="33.3%" align="center"><sub>array</sub></td><td width="33.4%" align="center"><sub>移除面板</sub></td></tr><tr><td width="33.3%" align="center"><sub>changeTab</sub></td><td width="33.3%" align="center"><sub>object</sub></td><td width="33.4%" align="center"><sub>面板切换</sub></td></tr></tbody></table><h2>六、开发</h2><ol><li>npm i</li><li>npm start // 启动开发</li><li>npm run build //打包</li></ol><h2>七、Articles</h2><ol><li>移动端前端开发调试</li><li>Chrome 开发者工具</li></ol><h2>八、Projects</h2><ol><li><a href="https://github.com/liriliri/eruda" rel="nofollow">eruda</a></li><li><a href="https://github.com/Tencent/vConsole" rel="nofollow">vConsole</a></li><li><a href="https://github.com/alexkuz/react-json-tree" rel="nofollow">react-json-tree</a></li><li><a href="https://github.com/abell123456/mdebug" rel="nofollow">基于React的移动端调试解决方案</a></li><li><a href="https://github.com/ghking1/mdebug" rel="nofollow">a useful debugger for mobile</a></li><li><a href="https://github.com/chokcoco/autoDevTools" rel="nofollow">autoDevTools</a></li><li><a href="https://github.com/xyc/react-inspector" rel="nofollow">react-inspector</a></li><li><a href="https://github.com/whinc/web-console" rel="nofollow">web-console</a></li><li><a href="https://github.com/ChromeDevTools/devtools-frontend" rel="nofollow">ChromeDevTools</a></li></ol><h2>九、License</h2><p>The MIT License (MIT). Please see License File for more information.</p><audio src="https://baidu.com"></audio><video src="https://baidu.com"></video><script>window.onload = function () {
window.mdebug.init();
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="ie=edge"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/><meta name="referrer" content="origin"><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="ie=edge"/><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/><title>mdebug</title><script charset="utf-8" src="https://code.jquery.com/jquery-1.10.2.min.js"></script><style>body{padding-left:10px;padding-right:10px}pre{background-color:#eee;padding:10px;font-size:16px;word-break:break-all;display:block;white-space:pre;margin:1em 0;white-space:pre-wrap;word-wrap:break-word;line-height:1.3}table{border-collapse:collapse}table td,table th{border:1px solid #eee;padding:10px}table th{background-color:#eee}.badge a{margin-right:3px}</style></head><body style="padding-left:10px;padding-right:10px"><div onclick="testxhr()">testXHR</div><audio src="https://baidu.com"></audio><video src="https://baidu.com"></video><img src="https://sinaimg.cn/mw690/0065AuX8ly1fr47ztrszbj30og1cwdwv.jpg" style="visibility:hidden"/><script src="https://sinaimg.cn/mw690/0065AuX8ly1fr47ztrszbj30og1cwdwv.jpg"></script><script src="https://sinaimg.cn/mw690/0065AuX8ly1fr47ztrszbj30og1cwdwv.jpg"></script><script>window.onload = function () {
// window.mdebug.init();
console.log('111');
console.warn('111');
$.ajax({
url: '/xx/mdebug',
url: 'https://ug.baidu.com/mcp/pc/pcsearch?username=2123&password=2123',
method:"put",
data:{
name:"aaa",
age:"180"
}
}).done(function (data) {
console.warn('data:::', data);
});
Expand Down Expand Up @@ -101,4 +44,4 @@
test();
}
console.log('111', 11);
// }</script><script src="https://unpkg.com/mdebug@latest/dist/index.js"></script></body></html>
// }</script><script src="/index.js"></script></body></html><script>function testxhr(){console.log("xxxxxXXXXXXXXXXX"),$.ajax({url:"https://ug.baidu.com/mcp/pc/pcsearch?username=2123&password=2123",method:"post",data:{name:"aaa",age:"180"}}).done(function(a){console.warn("data:::",a)})}</script>
4 changes: 2 additions & 2 deletions docs/index.js
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "mdebug",
"version": "2.0.2",
"name": "ttdebug",
"version": "1.0.3",
"main": "dist/index.js",
"module": "dist/index.js",
"jsnext:main": "dist/index.js",
Expand Down
207 changes: 25 additions & 182 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<title>mdebug</title>
<script charset="utf-8" src="//static.wehr.qq.com/oels/static/js/lib/jquery/jquery-1.11.3.min.js"></script>
<script charset="utf-8" src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<style>
body {
padding-left: 10px;
Expand Down Expand Up @@ -47,198 +47,25 @@
</head>

<body style="padding-left:10px;padding-right: 10px;">
<h1 align="center">
<img src="https://user-images.githubusercontent.com/6822604/130725631-dde49c00-24fe-44c6-a3fd-a5c709ce6e57.png"
width="40%" style="max-width: 400px;"/>
</h1>

<p align="center" style="margin: 30px 0 10px;">基于React开发的移动web调试工具 <a
href="https://github.com/tnfe/mdebug/blob/master/CHANGELOG.md">更新日志</a></p>
<table>
<tr>
<th>
<h4 align="center">
<h4 align="center">简单易用</h4 align="center">
</th>
<th>
<h4 align="center"></h4 align="center">
<h4 align="center">功能全面</h4 align="center">
</th>
<th>
<h4 align="center"></h4 align="center">
<h4 align="center">易扩展</h4 align="center">
</th>
<th>
<h4 align="center"></h4 align="center">
<h4 align="center">高性能</h4 align="center">
</th>
</tr>
<tr>
<td width="20%" align="center"><sub>使用cdn方式,一键接入</sub></td>
<td width="20%" align="center"><sub>类Chrome devtools, <strong>内嵌React开发者工具</strong>,支持日志,网络,元素,代理,存储,性能等, 具有更好的网络捕获能力和丰富的日志展现形式</sub></td>
<td width="20%" align="center"><sub>暴露内部丰富的事件, 可以和react组件无缝进行集成</td>
<td width="20%" align="center"><sub>支持大数据量展示, 不卡顿</td>
</tr>
</table>

<div align="center" style="margin-top: 20px;" class="badge">
<a href="https://npmjs.org/package/mdebug" target="_blank"><img src="https://img.shields.io/npm/v/mdebug.svg"
alt="NPM Version" /></a>
<a href="https://github.com/tnfe/mdebug/pulls" target="_blank"><img
src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs" /></a>
<a href="https://nodejs.org" target="_blank"><img
src="https://img.shields.io/badge/node-%3E%3D%208.0.0-brightgreen.svg" alt="Node Version" /></a>
</div>
<div onClick="testxhr()">testXHR</div>

<h1> 一、快速体验</h1>

<a href="https://tnfe.github.io/mdebug">https://tnfe.github.io/mdebug</a>

<h2>二、Installation</h2>

<h4>Install using npm </h4>
<pre>
npm install mdebug --save
</pre>
<h2> 三、Useage</h2>

<h3> 1.ES6 </h3>
<pre>
import mdebug from 'mdebug';
mdebug.init();
</pre>
<h3> 2.CDN</h3>
<pre>
(function() {
var scp = document.createElement('script');
// 加载最新的mdebug版本
scp.src = 'https://new.inews.gtimg.com/tnews/9d243fb8/a1f8/9d243fb8-a1f8-4bf7-9047-dfa01d8c9ca0.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);
})();
</pre>

<h2>四、API</h2>
<h3> 1.init </h3>
<pre>
mdebug.init({
containerId: '' // mdebug挂载容器id, 如果传空, 内部会自动生成一个不重复的id,
plugins: [], // 传入mdebug插件
hideToolbar: [], // 传入需要隐藏的tab id
});
</pre>
<h3>2.addPlugin</h3>
<pre>
mdebug.addPlugin({
id: '', // tab id
name: '', // tab对应的中文title,
enName: '', // tab对应的英文title
component: () => {}, // tab对应的react组件
});
</pre>

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

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

<h3> 5.on</h3>
<pre>
mdebug.on(eventName, callback);
</pre>
<h3> 6.emit</h3>
<pre>
mdebug.emit(eventName, data);
</pre>
<h2>五、事件列表</h2>
<table>
<thead></thead>
<tbody>
<tr><th><h4><strong>事件名称</strong> </h4></th><th><h4> <strong>数据</strong></h4> </th><th><h4><strong>触发时机</strong></h4> </th></tr>
<tr><td width="33.3%" align="center"><sub>ready</sub></td><td width="33.3%" align="center"><sub>object</sub></td><td width="33.4%" align="center"><sub>mdebug加载完毕</sub> </td></tr>
<tr><td width="33.3%" align="center"><sub>addTab</sub></td><td width="33.3%" align="center"><sub>object</sub></td><td width="33.4%" align="center"><sub>增加面板</sub> </td></tr>
<tr><td width="33.3%" align="center"><sub>removeTab</sub></td><td width="33.3%" align="center"><sub>array</sub></td><td width="33.4%" align="center"><sub>移除面板</sub> </td></tr>
<tr><td width="33.3%" align="center"><sub>changeTab</sub></td><td width="33.3%" align="center"><sub>object</sub></td><td width="33.4%" align="center"><sub>面板切换</sub> </td></tr>
</tbody>
</table>
<h2>六、开发</h2>
<ol>
<li>npm i</li>
<li>npm start // 启动开发</li>
<li>npm run build //打包</li>
</ol>
<h2>七、Articles</h2>
<ol>
<li>移动端前端开发调试</a></li>
<li>Chrome 开发者工具</a></li>
</ol>
<h2>八、Projects</h2>
<ol>
<li><a href="https://github.com/liriliri/eruda" rel="nofollow">eruda</a></li>
<li><a href="https://github.com/Tencent/vConsole" rel="nofollow">vConsole</a></li>
<li><a href="https://github.com/alexkuz/react-json-tree" rel="nofollow">react-json-tree</a></li>
<li><a href="https://github.com/abell123456/mdebug" rel="nofollow">基于React的移动端调试解决方案</a></li>
<li><a href="https://github.com/ghking1/mdebug" rel="nofollow">a useful debugger for mobile</a></li>
<li><a href="https://github.com/chokcoco/autoDevTools" rel="nofollow">autoDevTools</a></li>
<li><a href="https://github.com/xyc/react-inspector" rel="nofollow">react-inspector</a></li>
<li><a href="https://github.com/whinc/web-console" rel="nofollow">web-console</a></li>
<li><a href="https://github.com/ChromeDevTools/devtools-frontend" rel="nofollow">ChromeDevTools</a></li>
</ol>
<h2>九、License</h2>
<p>The MIT License (MIT). Please see License File for more information.</p>
</div></div>
</article>
</div>
</div>

</div>
</div>
</div>
<audio src="https://baidu.com"></audio>
<video src="https://baidu.com"></video>
<img src="https://sinaimg.cn/mw690/0065AuX8ly1fr47ztrszbj30og1cwdwv.jpg" style="visibility: hidden;"/>
<script src="https://sinaimg.cn/mw690/0065AuX8ly1fr47ztrszbj30og1cwdwv.jpg"></script>
<script src="https://sinaimg.cn/mw690/0065AuX8ly1fr47ztrszbj30og1cwdwv.jpg"></script>
<script charset="utf-8">
window.onload = function () {
window.mdebug.init();
// window.mdebug.init();
console.log('111');
console.warn('111');
$.ajax({
url: '/xx/mdebug',
url: 'https://ug.baidu.com/mcp/pc/pcsearch?username=2123&password=2123',
method:"put",
data:{
name:"aaa",
age:"180"
}
}).done(function (data) {
console.warn('data:::', data);
});
Expand Down Expand Up @@ -289,3 +116,19 @@ <h2>九、License</h2>
</body>

</html>
<script>

function testxhr(){
console.log("xxxxxXXXXXXXXXXX")
$.ajax({
url: 'https://ug.baidu.com/mcp/pc/pcsearch?username=2123&password=2123',
method:"post",
data:{
name:"aaa",
age:"180"
}
}).done(function (data) {
console.warn('data:::', data);
});
}
</script>
5 changes: 2 additions & 3 deletions src/App.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,7 @@
bottom: 0;
left: 0;
width: 100%;
max-height: 100%;
min-height: 300px;
min-height: 85%;
height: 40%;
z-index: 10002;
font-size: 13px;
Expand Down Expand Up @@ -95,7 +94,7 @@
display: block;
position: fixed;
right: 0.76923077em;
bottom: 0.76923077em;
bottom: 50vh;
color: #fff;
background-color: rgb(40, 131, 233);
line-height: 1;
Expand Down
6 changes: 3 additions & 3 deletions src/panels/about/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@ class About extends PureComponent {
render() {
return (
<div className={styles.mdebugAbout}>
<h3>Mdebug by Tencent News TNT Web Team</h3>
<h3>ttdebug by scen Web Team</h3>
<p>
author: <a href="https://github.com/ihtml5">云峰</a>
author: a big hero
</p>
<p>version: 2.0.1</p>
<p>version: 1.0.2</p>
</div>
);
}
Expand Down
3 changes: 3 additions & 0 deletions src/panels/console/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,9 @@ class Console extends PureComponent {
<div className={styles.mdebugConsoleCon}>
<div className={styles.mdebugFixeHeader}>
<ul className={styles.mdebugConsoleHeader}>
<li onClick={() => {sessionLog.splice(0,sessionLog.length);this.setState({
consolelog: []
});}}>clearAll</li>
{Object.keys(CONSOLEMAPPING).map(tabName => (
<li
className={this.getSubSelected(tabName)}
Expand Down
Loading