lxm_front/eruda
1
0
Fork 0
mirror of https://github.com/liriliri/eruda.git synced 2026-03-20 09:38:37 +08:00
Code Issues Projects Releases Wiki Activity

Add: Resource timing

Browse Source
This commit is contained in:
surunzi
2016-05-23 13:17:12 +08:00
parent 59c4dbf6dc
commit b029cf9972
8 changed files with 156 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
eustia/getFileName.js Normal file
View File

@@ -0,0 +1,10 @@
_('last trim');
function exports(url)
{
var ret = last(url.split('/'));
if (ret.indexOf('?') > -1) ret = trim(ret.split('?')[0]);
return ret === '' ? 'unknown' : ret;
}

73
src/Network/Network.es6
View File

@@ -13,6 +13,9 @@ export default class Network extends Tool
this.name = 'network';
this._performanceTimingData = [];
this._performanceTiming = {};
this._resourceTimingData = [];
this._performance = window.webkitPerformance || window.performance;
this._requests = {};
this._tpl = require('./Network.hbs');
@@ -126,33 +129,44 @@ export default class Network extends Tool
$el.on('click', '.eruda-performance-timing', function ()
{
$el.find('.eruda-performance-timing-data').show();
});
$el.on('click', '.eruda-request', function ()
}).on('click', '.eruda-request', function ()
{
var id = util.$(this).data('id'),
data = self._requests[id];
if (!data.done) return;
var sources = parent.get('sources');
if (!sources) return;
sources.set('http', {
showSources('http', {
url: data.url,
resTxt: data.resTxt,
type: data.type,
subType: data.subType,
resHeaders: data.resHeaders
});
}).on('click', '.eruda-entry', function ()
{
var idx = util.$(this).data('idx'),
data = self._resourceTimingData[Number(idx)];
if (data.initiatorType === 'img')
{
showSources('img', data.url);
}
});
function showSources(type, data)
{
var sources = parent.get('sources');
if (!sources) return;
sources.set(type, data);
parent.showTool('sources');
});
}
}
_getPerformanceTimingData()
{
var performance = window.webkitPerformance || window.performance;
var performance = this._performance;
if (!performance) return;
@@ -244,12 +258,37 @@ export default class Network extends Tool
});
this._performanceTiming = performanceTiming;
}
_getResourceTimingData()
{
var performance = this._performance;
if (!performance || !util.isFn(performance.getEntries)) return;
var entries = performance.getEntries();
var data = [];
var hideXhr = this.config.get('hideXhrResource');
entries.forEach(entry =>
{
if (hideXhr && entry.initiatorType === 'xmlhttprequest') return;
data.push({
name: util.getFileName(entry.name),
displayTime: formatTime(entry.duration),
url: entry.name,
initiatorType: entry.initiatorType
});
});
this._resourceTimingData = data;
}
_initConfig()
{
var cfg = this.config = config.create('eruda-network');
cfg.set(util.defaults(cfg.get(), {
disablePerformance: false,
hideXhrResource: true,
overrideXhr: true
}));
@@ -265,7 +304,8 @@ export default class Network extends Tool
var settings = this._parent.get('settings');
settings.text('Network')
.add(cfg, 'overrideXhr', 'Catch Ajax Requests')
.add(cfg, 'overrideXhr', 'Catch Xhr Requests')
.add(cfg, 'hideXhrResource', 'Hide Xhr Resource Timing')
.add(cfg, 'disablePerformance', 'Disable Performance Timing')
.separator();
}
@@ -273,7 +313,14 @@ export default class Network extends Tool
{
if (!this.active) return;
var renderData = {requests: this._requests};
this._getResourceTimingData();
var renderData = {entries: this._resourceTimingData};
if (util.keys(this._requests).length > 0)
{
renderData.requests = this._requests;
}
if (!this.config.get('disablePerformance'))
{
@@ -294,6 +341,8 @@ export default class Network extends Tool
function formatTime(time)
{
time = Math.round(time);
if (time < 1000) return time + 'ms';
return (time / 1000).toFixed(1) + 's';

41
src/Network/Network.hbs
View File

@@ -29,16 +29,31 @@
</div>
{{/if}}
<ul class="eruda-requests">
{{#each requests}}
<li class="eruda-request" data-id="{{@key}}">
<span>{{name}}</span>
<span>{{status}}</span>
<span>{{method}}</span>
<span>{{subType}}</span>
<span>{{size}}</span>
<span>{{displayTime}}</span>
<span class="eruda-blue">{{url}}</span>
</li>
{{/each}}
</ul>
{{#if entries}}
<ul class="eruda-entries">
{{#each entries}}
<li class="eruda-entry" data-idx="{{@index}}">
<span>{{name}}</span>
<span>{{initiatorType}}</span>
<span>{{displayTime}}</span>
<span class="eruda-blue">{{url}}</span>
</li>
{{/each}}
</ul>
{{/if}}
{{#if requests}}
<ul class="eruda-requests">
{{#each requests}}
<li class="eruda-request" data-id="{{@key}}">
<span>{{name}}</span>
<span>{{status}}</span>
<span>{{method}}</span>
<span>{{subType}}</span>
<span>{{size}}</span>
<span>{{displayTime}}</span>
<span class="eruda-blue">{{url}}</span>
</li>
{{/each}}
</ul>
{{/if}}

3
src/Network/Network.scss
View File

@@ -46,9 +46,10 @@
}
}
}
.requests {
.requests, .entries {
background: #fff;
border-bottom: 1px solid $gray;
margin-bottom: 10px;
li {
border-top: 1px solid $gray;
overflow: auto;

11
src/Network/Request.es6
View File

@@ -14,7 +14,7 @@ export default class Request extends util.Emitter
handleSend()
{
this.emit('send', this._id, {
name: getFileName(this._url),
name: util.getFileName(this._url),
url: this._url,
method: this._method,
xhr: this._xhr
@@ -69,15 +69,6 @@ function getHeaders(xhr)
return ret;
}
function getFileName(url)
{
var ret = util.last(url.split('/'));
if (ret.indexOf('?') > -1) ret = ret.split('?')[0].trim();
return ret === '' ? 'unknown' : ret;
}
function getType(contentType)
{
if (!contentType) return 'unknown';

5
src/Sources/Sources.es6
View File

@@ -79,8 +79,13 @@ export default class Sources extends Tool
return this._render();
}
if (this._isGettingHtml) return;
this._isGettingHtml = true;
util.get(location.href, (err, data) =>
{
this._isGettingHtml = false;
if (err) return;
this._html = data;

114
src/lib/util.js
View File

@@ -1367,42 +1367,6 @@ module.exports = (function ()
* |methods|object |Public methods |
* |statics|object |Static methods |
* |return |function|Function used to create instances|
*
* ```javascript
* var People = Class({
* initialize: function (name, age)
* {
* this.name = name;
* this.age = age;
* },
* introduce: function ()
* {
* return 'I am ' + this.name + ', ' + this.age + ' years old.'.
* }
* });
*
* var Student = People.extend({
* initialize: function (name, age, school)
* {
* this.callSuper('initialize', name, age);
*
* this.school = school.
* },
* introduce: function ()
* {
* return this.callSuper('introduce') + '\n I study at ' + this.school + '.'.
* }
* }, {
* is: function (obj)
* {
* return obj instanceof Student;
* }
* });
*
* var a = new Student('allen', 17, 'Hogwarts');
* a.introduce(); // -> 'I am allen, 17 years old. \n I study at Hogwarts.'
* Student.is(a); // -> true
* ```
*/
var regCallSuper = /callSuper/;
@@ -2480,6 +2444,53 @@ module.exports = (function ()
return exports;
})({});
/* ------------------------------ trim ------------------------------ */
var trim = _.trim = (function (exports)
{
/* Remove chars or white-spaces from beginning end of string.
*
* |Name |Type |Desc |
* |-------------------------------------------|
* |str |string |The string to trim |
* |chars |string\|array|The characters to trim|
* |return|string |The trimmed string |
*
* ```javascript
* trim(' abc '); // -> 'abc'
* trim('_abc_', '_'); // -> 'abc'
* trim('_abc_', ['a', 'c', '_']); // -> 'b'
* ```
*/
var regSpace = /^\s+|\s+$/g;
exports = function (str, chars)
{
if (chars == null) return str.replace(regSpace, '');
return ltrim(rtrim(str, chars), chars);
};
return exports;
})({});
/* ------------------------------ getFileName ------------------------------ */
var getFileName = _.getFileName = (function (exports)
{
function exports(url)
{
var ret = last(url.split('/'));
if (ret.indexOf('?') > -1) ret = trim(ret.split('?')[0]);
return ret === '' ? 'unknown' : ret;
}
return exports;
})({});
/* ------------------------------ startWith ------------------------------ */
var startWith = _.startWith = (function (exports)
@@ -2532,37 +2543,6 @@ module.exports = (function ()
return exports;
})({});
/* ------------------------------ trim ------------------------------ */
var trim = _.trim = (function (exports)
{
/* Remove chars or white-spaces from beginning end of string.
*
* |Name |Type |Desc |
* |-------------------------------------------|
* |str |string |The string to trim |
* |chars |string\|array|The characters to trim|
* |return|string |The trimmed string |
*
* ```javascript
* trim(' abc '); // -> 'abc'
* trim('_abc_', '_'); // -> 'abc'
* trim('_abc_', ['a', 'c', '_']); // -> 'b'
* ```
*/
var regSpace = /^\s+|\s+$/g;
exports = function (str, chars)
{
if (chars == null) return str.replace(regSpace, '');
return ltrim(rtrim(str, chars), chars);
};
return exports;
})({});
/* ------------------------------ uniqId ------------------------------ */
var uniqId = _.uniqId = (function (exports)

4
test/index.html
View File

@@ -55,7 +55,7 @@
xhr.open('GET', url);
xhr.send();
}
setTimeout(function ()
/*setTimeout(function ()
{
req('http://localhost:3000/test/style.css');
}, 1000);
@@ -66,7 +66,7 @@
setTimeout(function ()
{
req('http://localhost:3000/test/empty.json');
}, 3000);
}, 3000);*/
</script>
</div>
</body>