1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
|
<!--
Copyright 2014 Google Inc. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the COPYING file or at
https://developers.google.com/open-source/licenses/bsd
-->
<html>
<head>
<title>XHR event logger</title>
<script src="util_main.js"></script>
<script>
var events = [];
var startTime = 0;
function run() {
events = [];
startTime = Date.now();
function pushToLog(type) {
var time = Date.now();
if (events.length != 0 && type === events[events.length - 1].type) {
events[events.length - 1].count += 1;
events[events.length - 1].last = time;
} else {
events.push({type: type, count: 1, first: time, last: time});
}
}
var xhr = new XMLHttpRequest();
function getProgressEventDump(e) {
return '(' + e.lengthComputable + ', ' + e.loaded + ', ' + e.total + ')';
}
var dumpProgressEvent = getBoolFromCheckBox('dumpprogressevent');
function log(e) {
var type = e.type;
if (type === 'readystatechange') {
type += e.target.readyState;
}
if (dumpProgressEvent && (e instanceof ProgressEvent)) {
type += getProgressEventDump(e);
}
pushToLog(type);
};
function logUpload(e) {
var type = e.type;
if (dumpProgressEvent && (e instanceof ProgressEvent)) {
type += getProgressEventDump(e);
}
pushToLog('upload' + type);
}
if (getBoolFromCheckBox('upload')) {
var upload = xhr.upload;
upload.onloadstart = logUpload;
upload.onprogress = logUpload;
upload.onabort = logUpload;
upload.onerror = logUpload;
upload.onload = logUpload;
upload.ontimeout = logUpload;
upload.onloadend = logUpload;
}
xhr.onreadystatechange = log;
xhr.onloadstart = log;
xhr.onprogress = log;
xhr.onabort = log;
xhr.onerror = log;
xhr.onload = log;
xhr.ontimeout = log;
xhr.onloadend = log;
xhr.open('POST', '/073be001e10950692ccbf3a2ad21c245_receive',
getBoolFromCheckBox('async'));
var size = getIntFromInput('size');
var chunkedMode = 'none';
if (getBoolFromCheckBox('chunkedresponse')) {
chunkedMode = 'chunked';
}
xhr.send(size + ' ' + chunkedMode);
}
function print() {
var result = '';
for (var i = 0; i < events.length; ++i) {
var event = events[i];
var line = '';
line += (event.first - startTime) + "ms";
if (event.count > 1)
line += "-" + (event.last - startTime) + "ms";
else
line += " ";
while(line.length < 15)
line += " ";
line += ": " + event.type + ' * ' + event.count + '\n';
result += line;
}
document.getElementById('log').value = result;
}
</script>
<body>
<textarea id="log" rows="10" cols="70" readonly></textarea>
<br/>
Size: <input type="text" id="size" value="65536"><br/>
<input type="checkbox" id="chunkedresponse">
<label for="chunkedresponse">Use Chunked T-E for response</label><br/>
<input type="checkbox" id="upload">
<label for="upload">Upload progress</label><br/>
<input type="checkbox" id="dumpprogressevent">
<label for="dumpprogressevent">
Dump lengthComputable/loaded/total</label><br/>
<input type="checkbox" id="async" checked>
<label for="async">Async</label><br/>
<input type="button" onclick="run()" value="Run XHR">
<input type="button" onclick="print()" value="Print log">
</body>
</html>
|
