chrome/tools/tracing/trace.html - chromium/src - Git at Google

 <!--
 Tracing template
 ----------------
 Test_shell has an optional tracing feature.  It can be enabled by running
 with the --enable-tracing option.  Tracing causes events to be dropped into
 a trace file during runtime.

 This HTML file can be used to render the output from the trace.  You'll need
 to rename your trace data to "trace_data.js" in the same directory with this
 HTML file, and then you can visualize the trace.

 Lots of work remains on this tracing tool; currently development is on hold.

 -->

 <html>
 <head>
 <title>
 Trace Events
 </title>
 <style>
 body {
   font-family: "Courier New";
   font-size: 9pt;
 }

 #header {
   position: absolute;
   top: 0px;
   left: 0px;
   border-bottom: 1px dashed black;
   background-color: #F0F0F0;
   z-index: 3;
 }

 #outer {
   position: relative;
   height: 200px;
 }

 #time_scale {
   height: 15px;
   width: 100%;
 }

 #tooltip {
   position: absolute;
   background-color: #FFFFCC;
   display: none;
   font-family: "Courier New";
   font-size: 9pt;
   padding: 5px;
   border: 1px solid #CCCC88;
   z-index: 3;
 }

 #legend {
   position: fixed;
   left: 10px;
   bottom: 10px;
   padding: 5px;
   border: 1px solid silver;
   z-index: 10;
   background-color: #f0f0f0;
 }

 h2 {
   margin: 5px;
 }

 #instructions {
   position: absolute;
   top:
   float: right;
   display: none;
 }

 li.time_tick {
   background-color: #FFFFCC;
   height: 15px;
 }

 li {
   background: pink;
   position: absolute;
   height: 10px;
   list-style: none;
   margin: 0px;
   padding: 0px;
   z-index: 2;
 }

 li:hover {
   border: 1px solid red;
 }

 .url {
   background-color: green;
 }

 .http {
   background-color: blue;
 }

 .socket {
   background-color: black;
 }

 .v8 {
   background-color: orange;
 }

 .loop {
   background-color: gray;
 }

 .io {
   background-color: blue;
 }

 </style>

 <script src='trace_data.js'></script>
 <script>
 var scale = 100000;
 var row_height = 15;
 var trace_initial_time = 0;
 var trace_threads = {};
 var heartbeats = [];
 var trace_total_time = 0;

 function process_raw_events() {
   trace_initial_time = raw_trace_events[0].usec_begin;
   var stack = [];
   var e;
   for (var i in raw_trace_events) {
     e = raw_trace_events[i];
     var trace_events = trace_threads["e.tid"];
     if (!trace_events) {
       trace_events = [];
       trace_threads["e.tid"] = trace_events;
     }
     if (e.name.indexOf("heartbeat.") == 0) {
       heartbeats.push(e);
     } else if (e.type == "BEGIN") {
       trace_events.push(e);
       stack.unshift(e);
     } else if (e.type == "END") {
       for (var s in stack) {
         var begin = stack[s];
         if ((begin.id == e.id) && (begin.name == e.name) &&
             (begin.pid == e.pid) && (begin.tid == e.tid)) {
           begin.usec_end = e.usec_begin;
           begin.duration = begin.usec_end - begin.usec_begin;
           begin.extra += " " + e.extra;
           stack.splice(s, 1);
           break;
         }
       }
     } else if (e.type == "INSTANT") {
       trace_events.push(e);
       e.duration = 0;
     }
   }
   if (e.usec_end)
     trace_total_time = e.usec_end - trace_initial_time;
   else
     trace_total_time = e.usec_begin - trace_initial_time;
 }

 function compute_scale() {
   var outer = document.getElementById("outer");
   scale = Math.floor(trace_total_time / (outer.offsetWidth - (row_height * 2)));
 };

 function show_details(tid, i, event) {
   var trace_events = trace_threads["e.tid"];
   var inner = trace_events[i].name + " " +
               trace_events[i].duration / 1000 + "ms<br />" +
               trace_events[i].id  + "<br />" +
               trace_events[i].extra  + "<br />";
   var tooltip = document.getElementById("tooltip");
   tooltip.innerHTML = inner;
   if (window.event)
     event = window.event;
   tooltip.style.top = event.pageY + 3;
   tooltip.style.left = event.pageX + 3;
   tooltip.style.display = "block";
 };

 function generate_time_scale() {
   var view_size = window.clientWidth;
   var body_size = document.body.scrollWidth;
   var inner = "";

   var step_ms = Math.floor(scale / 10); // ms per 100px
   var pow10 = Math.pow(10, Math.floor(Math.log(step_ms) / Math.log(10)));
   var round = .5 * pow10;
   step_ms = round * (Math.floor(step_ms / round)); // round to a multiple of round
   for (var i = step_ms; i < trace_total_time / 1000; i += step_ms) {
     var x = Math.floor(i * 1000 / scale);
     inner += "<li class='time_tick' style='left: " + x + "px'>" + i + "</li>";
   }
   var time_scale = document.getElementById("time_scale");
   time_scale.innerHTML = inner;
   time_scale.style.width = document.body.scrollWidth;
 }

 function generate_io_graph(trace_events, top) {
   var max_height = 200;
   var bucket_size = 50000;  // millisecs

   var inner = "";
   var buckets = new Array();
   var value = 0;
   var max_bucket = 0;

   // Go through events and find all read samples.
   // Aggregate data into buckets.
   for (var i in trace_events) {
     var e = trace_events[i];
     if (e.name != "socket.read") {
       continue;
     }

     var bytes = parseInt(e.extra);
 //    bytes = 400;

     var start_time = e.usec_begin - trace_initial_time;
     var mybucket = Math.floor(start_time / bucket_size);

     if (buckets[mybucket] == undefined) {
       buckets[mybucket] = 0;
     }
     buckets[mybucket] += bytes;

     if (buckets[max_bucket] == undefined ||
         buckets[max_bucket] < buckets[mybucket]) {
       max_bucket = mybucket;
     }
   }

   for (var index = 0; index < buckets.length; index++) {
     var left = index * Math.floor(bucket_size / scale);
     var width = Math.floor(bucket_size / scale);
     if (width == 0)
       width = 1;

     var height;
     if (buckets[index] == undefined) {
       height = 0;
     } else {
       height = (buckets[index] / buckets[max_bucket]) * max_height;
     }

     var my_top = max_height - height;

     var style = "top: " + my_top + "px; left: " + left + "px; width: " + width + "px; height:" + height + "px;";
     var cls = "io";
     inner += "<li title='" + buckets[index] + " bytes' class='" + cls + "' id='li-" + i + "' style='" + style + "'></li>\n";
   }

   var subchart = document.createElement('div');
   subchart.setAttribute("class", "iograph");
   subchart.setAttribute("id", trace_events[0].tid);
   subchart.innerHTML = inner;
   subchart.style.height = max_height;
   subchart.style.top = top;
   subchart.style.left = 0;
   subchart.style.position = "absolute";
 //  subchart.style.width = row_height + last_max_x;
   var chart = document.getElementById("chart");
   chart.appendChild(subchart);

   return top + max_height;
 }

 function generate_subchart(trace_events, top) {
   var start_top = top;
   var heights = new Array();
   var max_row = 0;
   var inner = "";
   var last_max_time = 0;
   var last_max_x = 0;
   for (var i in trace_events) {
     var e = trace_events[i];
     var start_time = e.usec_begin - trace_initial_time;
     var left = row_height + Math.floor(start_time / scale);
     var width = Math.floor(e.duration / scale);
     if (width == 0)
       width = 1;

     if (heights[e.id]) {
       top = heights[e.id];
     } else {
       max_row += row_height;
       heights[e.id] = max_row;
       top = heights[e.id];
     }
     //if (start_time < last_max_time)
     //  top += row_height;
     var style = "top: " + top + "px; left: " + left + "px; width: " + width + "px;";
     var js = 'javascript:show_details("' + e.tid + '", ' + i + ', event);';
     var cls = e.name.split('.')[0];
     inner += "<li class='" + cls + "' onmouseover='" + js + "' id='li-" + i + "' style='" + style + "'></li>\n";
     last_max_time = start_time + e.duration;
     last_max_x = left + width;
   }
   var subchart = document.createElement('div');
   subchart.setAttribute("class", "subchart");
   subchart.setAttribute("id", trace_events[0].tid);
   subchart.innerHTML = inner;
   subchart.style.top = start_top + "px";
   subchart.style.height = top + row_height;
   subchart.style.width = row_height + last_max_x;
   subchart.style.position = "absolute";
   var chart = document.getElementById("chart");
   chart.appendChild(subchart);

   return top;
 };

 function generate_chart() {
   var chart = document.getElementById("chart");
   chart.innerHTML = "";
   var top = 60;
   for (var t in trace_threads) {
     top = generate_io_graph(trace_threads[t], top);
     top = generate_subchart(trace_threads[t], top);
   }
   generate_time_scale();
 }

 function change_scale(event) {
   if (!event)
     event = window.event;
   if (!event.shiftKey)
     return;
   var delta = 0;
   if (event.wheelDelta) {
     delta = event.wheelDelta / 120;
   } else if (event.detail) {
     delta = - event.detail / 3;
   }
   if (delta) {
     var tooltip = document.getElementById("tooltip");
     tooltip.style.display = "none";
     var factor = 1.1;
     if (delta < 0)
       scale = Math.floor(scale * factor);
     else
       scale = Math.floor(scale / factor);
     if (scale > 300000)
       scale = 300000;
     generate_chart();
     if (event.preventDefault)
       event.preventDefault();
   }
   event.returnValue = false;
 };

 function initial_load() {
   if (window.addEventListener)
     window.addEventListener('DOMMouseScroll', change_scale, false);
   window.onmousewheel = document.onmousewheel = change_scale;

   process_raw_events();
   compute_scale();
   generate_chart();
 };

 </script>
 </head>
 <body onload='initial_load();'>
 <div id="header">
 <h2>Trace Events</h2>
 <div id="instructions">
 Use shift+mouse-wheel to zoom in and out.
 </div>
 <div id="time_scale"></div>
 </div>
 <div id="legend">
 <span class="url">&nbsp;</span> URL<br />
 <span class="http">&nbsp;</span> HTTP<br />
 <span class="socket">&nbsp;</span> Socket<br />
 <span class="v8">&nbsp;</span> V8<br />
 <span class="loop">&nbsp;</span> TASKS<br />
 </div>
 <div id="chart">
 <div id="outer">
 </div>
 </div>
 <div id="tooltip" ondblclick="this.style.display = 'none';"></div>
 </body>
 </html>
	<!--
	Tracing template
	----------------
	Test_shell has an optional tracing feature. It can be enabled by running
	with the --enable-tracing option. Tracing causes events to be dropped into
	a trace file during runtime.

	This HTML file can be used to render the output from the trace. You'll need
	to rename your trace data to "trace_data.js" in the same directory with this
	HTML file, and then you can visualize the trace.

	Lots of work remains on this tracing tool; currently development is on hold.

	-->

	<html>
	<head>
	<title>
	Trace Events
	</title>
	<style>
	body {
	font-family: "Courier New";
	font-size: 9pt;
	}

	#header {
	position: absolute;
	top: 0px;
	left: 0px;
	border-bottom: 1px dashed black;
	background-color: #F0F0F0;
	z-index: 3;
	}

	#outer {
	position: relative;
	height: 200px;
	}

	#time_scale {
	height: 15px;
	width: 100%;
	}

	#tooltip {
	position: absolute;
	background-color: #FFFFCC;
	display: none;
	font-family: "Courier New";
	font-size: 9pt;
	padding: 5px;
	border: 1px solid #CCCC88;
	z-index: 3;
	}

	#legend {
	position: fixed;
	left: 10px;
	bottom: 10px;
	padding: 5px;
	border: 1px solid silver;
	z-index: 10;
	background-color: #f0f0f0;
	}

	h2 {
	margin: 5px;
	}

	#instructions {
	position: absolute;
	top:
	float: right;
	display: none;
	}

	li.time_tick {
	background-color: #FFFFCC;
	height: 15px;
	}

	li {
	background: pink;
	position: absolute;
	height: 10px;
	list-style: none;
	margin: 0px;
	padding: 0px;
	z-index: 2;
	}

	li:hover {
	border: 1px solid red;
	}

	.url {
	background-color: green;
	}

	.http {
	background-color: blue;
	}

	.socket {
	background-color: black;
	}

	.v8 {
	background-color: orange;
	}

	.loop {
	background-color: gray;
	}

	.io {
	background-color: blue;
	}

	</style>

	<script src='trace_data.js'></script>
	<script>
	var scale = 100000;
	var row_height = 15;
	var trace_initial_time = 0;
	var trace_threads = {};
	var heartbeats = [];
	var trace_total_time = 0;

	function process_raw_events() {
	trace_initial_time = raw_trace_events[0].usec_begin;
	var stack = [];
	var e;
	for (var i in raw_trace_events) {
	e = raw_trace_events[i];
	var trace_events = trace_threads["e.tid"];
	if (!trace_events) {
	trace_events = [];
	trace_threads["e.tid"] = trace_events;
	}
	if (e.name.indexOf("heartbeat.") == 0) {
	heartbeats.push(e);
	} else if (e.type == "BEGIN") {
	trace_events.push(e);
	stack.unshift(e);
	} else if (e.type == "END") {
	for (var s in stack) {
	var begin = stack[s];
	if ((begin.id == e.id) && (begin.name == e.name) &&
	(begin.pid == e.pid) && (begin.tid == e.tid)) {
	begin.usec_end = e.usec_begin;
	begin.duration = begin.usec_end - begin.usec_begin;
	begin.extra += " " + e.extra;
	stack.splice(s, 1);
	break;
	}
	}
	} else if (e.type == "INSTANT") {
	trace_events.push(e);
	e.duration = 0;
	}
	}
	if (e.usec_end)
	trace_total_time = e.usec_end - trace_initial_time;
	else
	trace_total_time = e.usec_begin - trace_initial_time;
	}

	function compute_scale() {
	var outer = document.getElementById("outer");
	scale = Math.floor(trace_total_time / (outer.offsetWidth - (row_height * 2)));
	};

	function show_details(tid, i, event) {
	var trace_events = trace_threads["e.tid"];
	var inner = trace_events[i].name + " " +
	trace_events[i].duration / 1000 + "ms<br />" +
	trace_events[i].id + "<br />" +
	trace_events[i].extra + "<br />";
	var tooltip = document.getElementById("tooltip");
	tooltip.innerHTML = inner;
	if (window.event)
	event = window.event;
	tooltip.style.top = event.pageY + 3;
	tooltip.style.left = event.pageX + 3;
	tooltip.style.display = "block";
	};

	function generate_time_scale() {
	var view_size = window.clientWidth;
	var body_size = document.body.scrollWidth;
	var inner = "";

	var step_ms = Math.floor(scale / 10); // ms per 100px
	var pow10 = Math.pow(10, Math.floor(Math.log(step_ms) / Math.log(10)));
	var round = .5 * pow10;
	step_ms = round * (Math.floor(step_ms / round)); // round to a multiple of round
	for (var i = step_ms; i < trace_total_time / 1000; i += step_ms) {
	var x = Math.floor(i * 1000 / scale);
	inner += "<li class='time_tick' style='left: " + x + "px'>" + i + "</li>";
	}
	var time_scale = document.getElementById("time_scale");
	time_scale.innerHTML = inner;
	time_scale.style.width = document.body.scrollWidth;
	}

	function generate_io_graph(trace_events, top) {
	var max_height = 200;
	var bucket_size = 50000; // millisecs

	var inner = "";
	var buckets = new Array();
	var value = 0;
	var max_bucket = 0;

	// Go through events and find all read samples.
	// Aggregate data into buckets.
	for (var i in trace_events) {
	var e = trace_events[i];
	if (e.name != "socket.read") {
	continue;
	}

	var bytes = parseInt(e.extra);
	// bytes = 400;

	var start_time = e.usec_begin - trace_initial_time;
	var mybucket = Math.floor(start_time / bucket_size);

	if (buckets[mybucket] == undefined) {
	buckets[mybucket] = 0;
	}
	buckets[mybucket] += bytes;

	if (buckets[max_bucket] == undefined \|\|
	buckets[max_bucket] < buckets[mybucket]) {
	max_bucket = mybucket;
	}
	}

	for (var index = 0; index < buckets.length; index++) {
	var left = index * Math.floor(bucket_size / scale);
	var width = Math.floor(bucket_size / scale);
	if (width == 0)
	width = 1;

	var height;
	if (buckets[index] == undefined) {
	height = 0;
	} else {
	height = (buckets[index] / buckets[max_bucket]) * max_height;
	}

	var my_top = max_height - height;

	var style = "top: " + my_top + "px; left: " + left + "px; width: " + width + "px; height:" + height + "px;";
	var cls = "io";
	inner += "<li title='" + buckets[index] + " bytes' class='" + cls + "' id='li-" + i + "' style='" + style + "'></li>\n";
	}

	var subchart = document.createElement('div');
	subchart.setAttribute("class", "iograph");
	subchart.setAttribute("id", trace_events[0].tid);
	subchart.innerHTML = inner;
	subchart.style.height = max_height;
	subchart.style.top = top;
	subchart.style.left = 0;
	subchart.style.position = "absolute";
	// subchart.style.width = row_height + last_max_x;
	var chart = document.getElementById("chart");
	chart.appendChild(subchart);

	return top + max_height;
	}

	function generate_subchart(trace_events, top) {
	var start_top = top;
	var heights = new Array();
	var max_row = 0;
	var inner = "";
	var last_max_time = 0;
	var last_max_x = 0;
	for (var i in trace_events) {
	var e = trace_events[i];
	var start_time = e.usec_begin - trace_initial_time;
	var left = row_height + Math.floor(start_time / scale);
	var width = Math.floor(e.duration / scale);
	if (width == 0)
	width = 1;

	if (heights[e.id]) {
	top = heights[e.id];
	} else {
	max_row += row_height;
	heights[e.id] = max_row;
	top = heights[e.id];
	}
	//if (start_time < last_max_time)
	// top += row_height;
	var style = "top: " + top + "px; left: " + left + "px; width: " + width + "px;";
	var js = 'javascript:show_details("' + e.tid + '", ' + i + ', event);';
	var cls = e.name.split('.')[0];
	inner += "<li class='" + cls + "' onmouseover='" + js + "' id='li-" + i + "' style='" + style + "'></li>\n";
	last_max_time = start_time + e.duration;
	last_max_x = left + width;
	}
	var subchart = document.createElement('div');
	subchart.setAttribute("class", "subchart");
	subchart.setAttribute("id", trace_events[0].tid);
	subchart.innerHTML = inner;
	subchart.style.top = start_top + "px";
	subchart.style.height = top + row_height;
	subchart.style.width = row_height + last_max_x;
	subchart.style.position = "absolute";
	var chart = document.getElementById("chart");
	chart.appendChild(subchart);

	return top;
	};

	function generate_chart() {
	var chart = document.getElementById("chart");
	chart.innerHTML = "";
	var top = 60;
	for (var t in trace_threads) {
	top = generate_io_graph(trace_threads[t], top);
	top = generate_subchart(trace_threads[t], top);
	}
	generate_time_scale();
	}

	function change_scale(event) {
	if (!event)
	event = window.event;
	if (!event.shiftKey)
	return;
	var delta = 0;
	if (event.wheelDelta) {
	delta = event.wheelDelta / 120;
	} else if (event.detail) {
	delta = - event.detail / 3;
	}
	if (delta) {
	var tooltip = document.getElementById("tooltip");
	tooltip.style.display = "none";
	var factor = 1.1;
	if (delta < 0)
	scale = Math.floor(scale * factor);
	else
	scale = Math.floor(scale / factor);
	if (scale > 300000)
	scale = 300000;
	generate_chart();
	if (event.preventDefault)
	event.preventDefault();
	}
	event.returnValue = false;
	};

	function initial_load() {
	if (window.addEventListener)
	window.addEventListener('DOMMouseScroll', change_scale, false);
	window.onmousewheel = document.onmousewheel = change_scale;

	process_raw_events();
	compute_scale();
	generate_chart();
	};

	</script>
	</head>
	<body onload='initial_load();'>
	<div id="header">
	<h2>Trace Events</h2>
	<div id="instructions">
	Use shift+mouse-wheel to zoom in and out.
	</div>
	<div id="time_scale"></div>
	</div>
	<div id="legend">
	<span class="url"> </span> URL<br />
	<span class="http"> </span> HTTP<br />
	<span class="socket"> </span> Socket<br />
	<span class="v8"> </span> V8<br />
	<span class="loop"> </span> TASKS<br />
	</div>
	<div id="chart">
	<div id="outer">
	</div>
	</div>
	<div id="tooltip" ondblclick="this.style.display = 'none';"></div>
	</body>
	</html>