f2d0550a84
Use Oboe.js streaming JSON parser for reading tracing file which provides the following advantages: 1) streaming parsing allows keeping alive only relevant entries which should consume less memory when parsing of huge files (although currently the whole file is kept in memory anyway), 2) avoids the need to sanitize tracing file Bug: v8:10155 Change-Id: Id5268264a610eff804672d09b3e9f3ac353b67de Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/2120542 Commit-Queue: Igor Sheludko <ishell@chromium.org> Reviewed-by: Camillo Bruni <cbruni@chromium.org> Cr-Commit-Position: refs/heads/master@{#66888}
103 lines
3.1 KiB
HTML
103 lines
3.1 KiB
HTML
<!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>
|
|
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
|
|
<script
|
|
src="https://www.gstatic.com/charts/loader.js"></script>
|
|
<script
|
|
src="https://cdnjs.cloudflare.com/ajax/libs/pako/1.0.6/pako_inflate.min.js"
|
|
integrity="sha256-N1z6ddQzX83fjw8v7uSNe7/MgOmMKdwFUv1+AJMDqNM="
|
|
crossorigin="anonymous"></script>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/oboe.js/2.1.5/oboe-browser.min.js"
|
|
crossorigin="anonymous"></script>
|
|
<script src="helper.js"></script>
|
|
|
|
<script type="module" src="details-selection.js"></script>
|
|
<script type="module" src="global-timeline.js"></script>
|
|
<script type="module" src="histogram-viewer.js"></script>
|
|
<script type="module" src="trace-file-reader.js"></script>
|
|
|
|
<style>
|
|
body {
|
|
font-family: 'Roboto', sans-serif;
|
|
margin-left: 5%;
|
|
margin-right: 5%;
|
|
}
|
|
|
|
</style>
|
|
<script>
|
|
'use strict';
|
|
|
|
google.charts.load('current', {'packages':['line', 'corechart', 'bar']});
|
|
|
|
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;
|
|
// Emit one entry with the whole model for debugging purposes.
|
|
console.log(state.data);
|
|
state.selection = null;
|
|
$('#global-timeline').selection = state.selection;
|
|
$('#global-timeline').data = state.data;
|
|
$('#histogram-viewer').selection = state.selection;
|
|
$('#histogram-viewer').data = state.data;
|
|
$('#details-selection').data = state.data;
|
|
}
|
|
|
|
function globalSelectionChangedA(e) {
|
|
state.selection = e.detail;
|
|
console.log(state.selection);
|
|
$('#global-timeline').selection = state.selection;
|
|
$('#histogram-viewer').selection = state.selection;
|
|
}
|
|
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<h1>V8 Heap Statistics</h1>
|
|
<trace-file-reader onchange="globalDataChanged(event)"></trace-file-reader>
|
|
|
|
<details-selection id="details-selection" onchange="globalSelectionChangedA(event)"></details-selection>
|
|
<global-timeline id="global-timeline"></global-timeline>
|
|
<histogram-viewer id="histogram-viewer"></histogram-viewer>
|
|
|
|
<p>Visualize object statistics that have been gathered using</p>
|
|
<ul>
|
|
<li><code>--trace-gc-object-stats</code> on V8</li>
|
|
<li>
|
|
<a
|
|
href="https://www.chromium.org/developers/how-tos/trace-event-profiling-tool">Chrome's
|
|
tracing infrastructure</a> collecting data for the category
|
|
<code>v8.gc_stats</code>.
|
|
</li>
|
|
</ul>
|
|
<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>
|
|
<p>
|
|
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>.
|
|
</p>
|
|
</body>
|
|
|
|
</html>
|