Из Dev Tools -> Network в Jira

Есть приложение на EmberJS далеко не новой версии, которое по красивому REST-API общается с сервером. Но, время от времени их общение затягивается (проще говоря, запросы идут слишком долго) и это надо фиксировать в Jira. В Chrome Dev Tools из вкладки Network можно копировать данные по запросам в формате HAR (Copy all as HAR). Получается большой нечитабельный JSON, с детальной информацией по каждому запросу. Выборку нужных данных из него можно автоматизировать.

Оставаясь на той же вкладке браузера, в Dev Tools открываем Console и вводим:

var a =

Жмем Ctrl+V (в буфере обмена находится JSON) и Enter. Далее вводим в консоли следующее:

var d = a.log.entries.map(function ( e ) {
 return Ember.Object.create( e ).getProperties('time', 'request.method', 'request.url', 'timings.blocked', 'timings.send', 'timings.wait', 'timings.receive', 'response.content.size');
}).sortBy('time').reverse();
copy('||' + Ember.keys(d[0]).join('||') + "||\n" + d.map(function (r) {
 return '|' + Ember.keys(r).map(function ( k ) {
  if (k == 'request.url') return '{noformat}' + r[k] + '{noformat}';
  if (k == 'response.content.size') return (r[k] / 1024).toFixed(2) + 'KB';
  if (k.indexOf('timings') === 0 || k == 'time') return r[k].toFixed(2) + 'ms';
  return r[k];
 }).join('|') + '|';
}).join("\n")  + '\n\n*Overall time:* ' + d.mapProperty('time').reduce(function(a,b) {return a+b;}, 0).toFixed(2) + 'ms');

Жмем Enter. Теперь в буфере обмена находится строка, отформатированная под отображение таблицы в Jira (можно вставлять в description, comments и т.д). Да, под таблицей будет выведено суммарное время выполнения всех запросов. Пример:

||time||request.method||request.url||timings.blocked||timings.send||timings.wait||timings.receive||response.content.size||
|284.30ms|GET|{noformat}some_url0{noformat}|0.58ms|0.09ms|283.07ms|0.56ms|10.90KB|
|231.10ms|GET|{noformat}some_url1{noformat}|0.34ms|0.08ms|230.33ms|0.36ms|10.52KB|
|215.75ms|GET|{noformat}some_url2{noformat}|0.44ms|0.08ms|214.36ms|0.87ms|77.35KB|
|174.36ms|GET|{noformat}some_url3{noformat}|0.40ms|0.08ms|173.59ms|0.29ms|5.16KB|
|172.09ms|GET|{noformat}some_url4{noformat}|0.33ms|0.07ms|171.43ms|0.26ms|10.52KB|
|166.32ms|GET|{noformat}some_url5{noformat}|0.33ms|0.07ms|165.64ms|0.28ms|10.90KB|
|162.60ms|GET|{noformat}some_url6{noformat}|0.30ms|0.08ms|161.20ms|1.02ms|38.25KB|
|158.97ms|GET|{noformat}some_url7{noformat}|0.39ms|0.07ms|157.96ms|0.55ms|27.52KB|
|146.23ms|GET|{noformat}some_url8{noformat}|0.33ms|0.07ms|143.74ms|2.09ms|13.81KB|
|144.44ms|GET|{noformat}some_url9{noformat}|0.32ms|0.08ms|143.77ms|0.28ms|0.59KB|
 
*Overall time:* 1856.17ms

В Jira это будет выглядеть так (на картинке превью комментария):

table in the jira

Немного детальнее про код. Из каждого запроса берутся поля 'time', 'request.method', 'request.url', 'timings.blocked', 'timings.send', 'timings.wait', 'timings.receive', 'response.content.size' (можно дописать нужные — см. структуру log.entries). Полученные данные сортируются по убиванию time. Далее формируется строка для вставки в Jira: все поля со временем урезаются до двух знаком после запятой, значение поля response.content.size переводится в килобайты, а для ссылок добавляется {noformat}.

Отдельно стоит упомянуть функцию copy. Она выполняет копирование строкового представления объекта в буфер обмена (весьма полезная штука).

Увы, но «лишние» запросы приходится убирать вручную, так как «Copy all as HAR» берет абсолютно все, что есть в Network (даже если что-то было отфильтровано). В этом случае необходимо не забыть обновить Overall time под таблицей.

Если же есть какой-то общий критерий, по которому можно выбрать/отсеять запросы, то тогда лучше будет в фрагменте a.log.entries.map перед map выполнить фильтрацию используя filter. Пример:

a.log.entries.filter(function(e) {
	return e.time > 2000; // все запросы, которые выполнялись дольше 2 секунд
}).map(....)

, , ,

Оставить комментарий

Top ↑ | Main page | Back