-
Notifications
You must be signed in to change notification settings - Fork 26
/
index.html
56 lines (54 loc) 路 2.84 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<title>flamebearer</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<style>
html, body { height: 100%; }
body { font: 16px "Helvetica Neue", sans-serif; margin: 0; }
body.hover { background: #cfc; }
h1 { font-size: 30px; margin: 30px 30px 15px; }
h1 a { color: black; text-decoration: none; }
h1 a:hover { text-decoration: underline; }
#fire-icon { fill: #f53; width: 26px; height: 26px; vertical-align: -1px; }
#intro { margin: 0 30px; }
code { font-size: 13px; color: #444; }
code span { color: #aaa; }
#canvas { width: 100%; }
#controls { display: none; }
#search { margin-right: 10px; }
#highlight { position: absolute; pointer-events: none; background: #ffffff40; }
.loaded #intro { display: none; }
.loaded #header { display: flex; align-items: center; flex-flow: row wrap; padding: 7px 10px; }
.loaded h1 { font-size: 22px; margin: 0 auto 0 0; flex-shrink: 0; }
.loaded #fire-icon { width: 20px; height: 20px; }
.loaded #controls { display: block; flex-shrink: 0; }
#tooltip { position: absolute; pointer-events: none; background: #ffffff; white-space: nowrap; box-shadow: 1px 2px 4px 0px rgba(0,0,0,0.3); border-radius: 2px; padding: 3px 5px; font: 12px Tahoma, sans-serif; display: none; }
#tooltip .path { color: #888; font-size: 11px; }
#tooltip .time { color: #4a4; }
</style>
</head>
<body>
<div id="header">
<h1><svg id="fire-icon" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 15 15" style="enable-background:new 0 0 15 15;" xml:space="preserve"><path d="M7.5,0.5L5,4.5l-1.5-2 C2.9452,3.4753,0.8036,5.7924,0.8036,8.3036C0.8036,12.002,3.8017,15,7.5,15s6.6964-2.998,6.6964-6.6964 c0-2.5112-2.1416-4.8283-2.6964-5.8036l-1.5,2L7.5,0.5z M7.5,7c0,0,2.5,2.5618,2.5,4.5c0,0.8371-0.8259,2-2.5,2S5,12.3371,5,11.5 C5,9.6283,7.5,7,7.5,7z"/></svg> <a href="https://github.com/mapbox/flamebearer">flamebearer</a></h1>
<div id="controls">
<input id="search" placeholder="Search..." />
<button id="reset">Reset view</button>
</div>
</div>
<div id="highlight"></div>
<div id="tooltip"></div>
<div id="intro"><!-- /* BIN_SPLIT */ -->
<p>Generate a flame graph by <strong>dragging</strong> a JSON V8 log on this page:</p>
<p><code>
node --prof app.js <span># profile your app (Node v8.5+ required)</span><br>
node --prof-process --preprocess -j isolate*.log > v8.json <span># generate a V8 log</span><br>
<span># then drag and drop the resulting file here</span>
</code></p>
<!-- /* BIN_SPLIT */ --></div>
<canvas id="canvas" height="0"></canvas>
<!-- /* BIN_SPLIT */ --><script src="index.js"></script><!-- /* BIN_SPLIT */ -->
<script src="viz.js"></script>
</body>
</html>