v8/tools/profview/index.html
leszeks 65a07b7a10 [tools/profview] Add individual function timeline view
Adds a bar below the current timeline view which can show the time
when an individual function was on the stack. Functions in the call
stack are now clickable to show them in this view.

Sections where the function was on the stack, but not at the top, are
displayed at half height.

Review-Url: https://codereview.chromium.org/2737083003
Cr-Commit-Position: refs/heads/master@{#43673}
2017-03-08 15:03:22 +00:00

110 lines
2.3 KiB
HTML

<!DOCTYPE html>
<!-- Copyright 2017 the V8 project authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. -->
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>V8 Tick Processor</title>
<link rel="stylesheet" href="profview.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<script src="profview.js"></script>
<script src="profile-utils.js"></script>
</head>
<body onLoad="main.onLoad();" onResize="main.onResize();">
<h3 style="margin-top: 2px;">
Chrome V8 profiling log processor
</h3>
<input type="file" id="fileinput" />
<br>
<hr>
<div id="help">
Usage:
<br>
<br>
Record the profile:
<pre>
d8 --prof your-file.js
</pre>
Then process the file (this resolves C++ symbols and produces
a JSON file with the profile data):
<pre>
&lt;v8-dir>/tools/linux-tick-processor --preprocess v8.log > v8.json
</pre>
To view the profile, click the <i>Choose file</i> button above and choose
the file in the dialog box.
</div>
<div id="timeline" style="display : none">
<div>
<canvas id="timeline-canvas"/>
</div>
<table>
<tr id="timeline-legend">
</tr>
</table>
<div>
Current code object: <span id="timeline-currentCode"></span>
</div>
</div>
<br>
<div id="calltree" style="display : none">
<div id="mode-bar">
</div>
<br>
Attribution:
<select id="calltree-attribution">
</select>
Top-level tree buckets:
<select id="calltree-categories">
</select>
Sort by:
<select id="calltree-sort">
</select>
<br>
<br>
<table id="calltree-table" class="calltree">
<thead>
<tr>
<th class="numeric">Time (incl)</th>
<th class="numeric">% of parent</th>
<th id="calltree-table-own-time-header" class="numeric">Own time</th>
<th>Function/category</th>
<th class="numeric">Ticks</th>
<th id="calltree-table-own-ticks-header" class="numeric">Own ticks</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<p style="font-style:italic;">
<br>
<br>
<br>
Copyright the V8 Authors - Last change to this page: 2017/02/15
</p>
</body>
</html>