diff --git a/eustia/getFileName.js b/eustia/getFileName.js new file mode 100644 index 0000000..9311f57 --- /dev/null +++ b/eustia/getFileName.js @@ -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; +} \ No newline at end of file diff --git a/src/Network/Network.es6 b/src/Network/Network.es6 index d158f3f..7b9b502 100644 --- a/src/Network/Network.es6 +++ b/src/Network/Network.es6 @@ -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'; diff --git a/src/Network/Network.hbs b/src/Network/Network.hbs index 9aa9819..8532148 100644 --- a/src/Network/Network.hbs +++ b/src/Network/Network.hbs @@ -29,16 +29,31 @@ {{/if}} - \ No newline at end of file +{{#if entries}} + +{{/if}} + +{{#if requests}} + +{{/if}} diff --git a/src/Network/Network.scss b/src/Network/Network.scss index 3418689..5316590 100644 --- a/src/Network/Network.scss +++ b/src/Network/Network.scss @@ -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; diff --git a/src/Network/Request.es6 b/src/Network/Request.es6 index baf364b..fd87018 100644 --- a/src/Network/Request.es6 +++ b/src/Network/Request.es6 @@ -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'; diff --git a/src/Sources/Sources.es6 b/src/Sources/Sources.es6 index 5c6510d..9c75131 100644 --- a/src/Sources/Sources.es6 +++ b/src/Sources/Sources.es6 @@ -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; diff --git a/src/lib/util.js b/src/lib/util.js index b9039c3..f633609 100644 --- a/src/lib/util.js +++ b/src/lib/util.js @@ -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) diff --git a/test/index.html b/test/index.html index 0d3788e..2e114cc 100644 --- a/test/index.html +++ b/test/index.html @@ -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);*/