2018-01-15 15:24:18 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<!-- Copyright 2018 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 Heap Statistics</title>
|
2018-02-14 08:26:42 +00:00
|
|
|
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
|
|
|
|
|
<script
|
2018-01-23 14:48:08 +00:00
|
|
|
src="https://www.gstatic.com/charts/loader.js"></script>
|
2018-02-14 08:26:42 +00:00
|
|
|
<script
|
2018-01-23 14:48:08 +00:00
|
|
|
src="https://cdnjs.cloudflare.com/ajax/libs/pako/1.0.6/pako_inflate.min.js"
|
|
|
|
|
integrity="sha256-N1z6ddQzX83fjw8v7uSNe7/MgOmMKdwFUv1+AJMDqNM="
|
|
|
|
|
crossorigin="anonymous"></script>
|
2018-01-15 15:24:18 +00:00
|
|
|
|
2018-03-05 16:55:18 +00:00
|
|
|
<script src="helper.js"></script>
|
|
|
|
|
|
2018-01-15 15:24:18 +00:00
|
|
|
<link rel="import" href="details-selection.html">
|
|
|
|
|
<link rel="import" href="global-timeline.html">
|
2018-01-18 11:12:13 +00:00
|
|
|
<link rel="import" href="histogram-viewer.html">
|
2018-01-15 15:24:18 +00:00
|
|
|
<link rel="import" href="trace-file-reader.html">
|
|
|
|
|
|
2018-02-14 08:26:42 +00:00
|
|
|
<style>
|
2018-01-15 15:24:18 +00:00
|
|
|
body {
|
|
|
|
|
font-family: 'Roboto', sans-serif;
|
|
|
|
|
margin-left: 5%;
|
|
|
|
|
margin-right: 5%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
2018-02-14 08:26:42 +00:00
|
|
|
<script>
|
2018-01-15 15:24:18 +00:00
|
|
|
'use strict';
|
|
|
|
|
|
2018-01-18 11:12:13 +00:00
|
|
|
google.charts.load('current', {'packages':['line', 'corechart', 'bar']});
|
2018-01-15 15:24:18 +00:00
|
|
|
|
|
|
|
|
function $(id) { return document.querySelector(id); }
|
|
|
|
|
|
|
|
|
|
function removeAllChildren(node) {
|
|
|
|
|
while (node.firstChild) {
|
|
|
|
|
node.removeChild(node.firstChild);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let state = Object.create(null);
|
|
|
|
|
|
|
|
|
|
function globalDataChanged(e) {
|
|
|
|
|
state.data = e.detail;
|
2018-01-16 13:14:26 +00:00
|
|
|
// Emit one entry with the whole model for debugging purposes.
|
|
|
|
|
console.log(state.data);
|
2018-01-15 15:24:18 +00:00
|
|
|
state.selection = null;
|
|
|
|
|
$('#global-timeline').selection = state.selection;
|
|
|
|
|
$('#global-timeline').data = state.data;
|
2018-01-18 11:12:13 +00:00
|
|
|
$('#histogram-viewer').selection = state.selection;
|
|
|
|
|
$('#histogram-viewer').data = state.data;
|
2018-01-15 15:24:18 +00:00
|
|
|
$('#details-selection').data = state.data;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function globalSelectionChangedA(e) {
|
|
|
|
|
state.selection = e.detail;
|
2018-01-18 11:12:13 +00:00
|
|
|
console.log(state.selection);
|
2018-01-15 15:24:18 +00:00
|
|
|
$('#global-timeline').selection = state.selection;
|
2018-01-18 11:12:13 +00:00
|
|
|
$('#histogram-viewer').selection = state.selection;
|
2018-01-15 15:24:18 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
2018-03-02 10:51:03 +00:00
|
|
|
<h1>V8 Heap Statistics</h1>
|
2018-01-15 15:24:18 +00:00
|
|
|
<trace-file-reader onchange="globalDataChanged(event)"></trace-file-reader>
|
2018-02-14 08:26:42 +00:00
|
|
|
|
|
|
|
|
<details-selection id="details-selection" onchange="globalSelectionChangedA(event)"></details-selection>
|
|
|
|
|
<global-timeline id="global-timeline"></global-timeline>
|
|
|
|
|
<histogram-viewer id="histogram-viewer"></histogram-viewer>
|
|
|
|
|
|
2018-01-16 13:14:26 +00:00
|
|
|
<p>Visualize object statistics that have been gathered using</p>
|
|
|
|
|
<ul>
|
2018-01-17 15:37:29 +00:00
|
|
|
<li><code>--trace-gc-object-stats</code> on V8</li>
|
2018-01-16 13:14:26 +00:00
|
|
|
<li>
|
|
|
|
|
<a
|
|
|
|
|
href="https://www.chromium.org/developers/how-tos/trace-event-profiling-tool">Chrome's
|
|
|
|
|
tracing infrastructure</a> collecting data for the category
|
2018-01-23 14:48:08 +00:00
|
|
|
<code>v8.gc_stats</code>.
|
2018-01-16 13:14:26 +00:00
|
|
|
</li>
|
|
|
|
|
</ul>
|
2018-03-02 10:51:03 +00:00
|
|
|
<p>
|
|
|
|
|
Note that you only get a data point on major GCs. You can enforce this by
|
|
|
|
|
using the <code>--gc-global</code> flag.
|
|
|
|
|
</p>
|
2018-01-15 15:24:18 +00:00
|
|
|
<p>
|
2018-01-16 13:14:26 +00:00
|
|
|
Note that the visualizer needs to run on a web server due to HTML imports
|
|
|
|
|
requiring <a
|
|
|
|
|
href="https://en.wikipedia.org/wiki/Cross-origin_resource_sharing">CORS</a>.
|
2018-01-15 15:24:18 +00:00
|
|
|
</p>
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
