1<!DOCTYPE html>
2<!-- Copyright 2018 the V8 project authors. All rights reserved.
3Use of this source code is governed by a BSD-style license that can be
4found in the LICENSE file. -->
5
6<html lang="en">
7
8<head>
9  <meta charset="UTF-8">
10  <title>V8 Heap Statistics</title>
11  <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
12  <script
13          src="https://www.gstatic.com/charts/loader.js"></script>
14  <script
15          src="https://cdnjs.cloudflare.com/ajax/libs/pako/1.0.6/pako_inflate.min.js"
16          integrity="sha256-N1z6ddQzX83fjw8v7uSNe7/MgOmMKdwFUv1+AJMDqNM="
17          crossorigin="anonymous"></script>
18
19  <script src="https://cdnjs.cloudflare.com/ajax/libs/oboe.js/2.1.5/oboe-browser.min.js"
20          crossorigin="anonymous"></script>
21  <script src="helper.js"></script>
22
23  <script type="module" src="details-selection.js"></script>
24  <script type="module" src="global-timeline.js"></script>
25  <script type="module" src="histogram-viewer.js"></script>
26  <script type="module" src="trace-file-reader.js"></script>
27
28  <style>
29body {
30  font-family: 'Roboto', sans-serif;
31  margin-left: 5%;
32  margin-right: 5%;
33}
34
35  </style>
36  <script>
37'use strict';
38
39google.charts.load('current', {'packages':['line', 'corechart', 'bar']});
40
41function $(id) { return document.querySelector(id); }
42
43function removeAllChildren(node) {
44  while (node.firstChild) {
45    node.removeChild(node.firstChild);
46  }
47}
48
49let state = Object.create(null);
50
51function globalDataChanged(e) {
52  state.data = e.detail;
53  // Emit one entry with the whole model for debugging purposes.
54  console.log(state.data);
55  state.selection = null;
56  $('#global-timeline').selection = state.selection;
57  $('#global-timeline').data = state.data;
58  $('#histogram-viewer').selection = state.selection;
59  $('#histogram-viewer').data = state.data;
60  $('#details-selection').data = state.data;
61}
62
63function globalSelectionChangedA(e) {
64  state.selection = e.detail;
65  console.log(state.selection);
66  $('#global-timeline').selection = state.selection;
67  $('#histogram-viewer').selection = state.selection;
68}
69
70  </script>
71</head>
72
73<body>
74  <h1>V8 Heap Statistics</h1>
75  <trace-file-reader onchange="globalDataChanged(event)"></trace-file-reader>
76
77  <details-selection id="details-selection" onchange="globalSelectionChangedA(event)"></details-selection>
78  <global-timeline id="global-timeline"></global-timeline>
79  <histogram-viewer id="histogram-viewer"></histogram-viewer>
80
81  <p>Visualize object statistics that have been gathered using</p>
82  <ul>
83    <li>Use <code>--trace-gc-object-stats</code> for V8 and load the contents of stdout</li>
84    <li>
85      <a
86        href="https://www.chromium.org/developers/how-tos/trace-event-profiling-tool">Chrome's
87        tracing infrastructure</a> collecting data for the category
88      <code>disabled-by-default-v8.gc_stats</code> and directly load the
89      results.html or trace.json.gzip file.
90    </li>
91  </ul>
92
93  Additional information:
94  <ul>
95    <li>
96      You only get a data point on major GCs. You can enforce this by
97      using the <code>--gc-global</code> V8 flag.
98    </li>
99    <li>
100      For more frequent data points you can also the
101      <code>--gc-interval=$AFTER_N_ALLOCATIONS</code> V8.
102    </li>
103    <li>
104      The visualizer needs to run on a web server due to HTML imports
105      requiring <a
106          href="https://en.wikipedia.org/wiki/Cross-origin_resource_sharing">CORS</a>.
107    </li>
108  <ul>
109</body>
110
111</html>
112