index.html 2.68 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
<!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' type='text/css'>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

  <link rel="import" href="details-selection.html">
  <link rel="import" href="global-timeline.html">
16
  <link rel="import" href="histogram-viewer.html">
17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
  <link rel="import" href="trace-file-reader.html">

  <style type="text/css">

body {
  font-family: 'Roboto', sans-serif;
  margin-left: 5%;
  margin-right: 5%;
}

  </style>
  <script type="text/javascript">

'use strict';

32
google.charts.load('current', {'packages':['line', 'corechart', 'bar']});
33 34 35 36 37 38 39 40 41 42 43 44 45

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;
46 47
  // Emit one entry with the whole model for debugging purposes.
  console.log(state.data);
48 49 50
  state.selection = null;
  $('#global-timeline').selection = state.selection;
  $('#global-timeline').data = state.data;
51 52
  $('#histogram-viewer').selection = state.selection;
  $('#histogram-viewer').data = state.data;
53 54 55 56 57
  $('#details-selection').data = state.data;
}

function globalSelectionChangedA(e) {
  state.selection = e.detail;
58
  console.log(state.selection);
59
  $('#global-timeline').selection = state.selection;
60
  $('#histogram-viewer').selection = state.selection;
61 62 63 64 65 66 67 68
}

  </script>
</head>

<body>
  <trace-file-reader onchange="globalDataChanged(event)"></trace-file-reader>
  <h1>V8 Heap Statistics</h1>
69 70
  <p>Visualize object statistics that have been gathered using</p>
  <ul>
71
    <li><code>--trace-gc-object-stats</code> on V8</li>
72 73 74 75 76 77 78 79
    <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>. The trace file needs to be unpacked (e.g. using
      <code>gunzip</code>).
    </li>
  </ul>
80
  <p>
81 82 83
    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>.
84 85 86
  </p>
  <details-selection id="details-selection" onchange="globalSelectionChangedA(event)"></details-selection>
  <global-timeline id="global-timeline"></global-timeline>
87
  <histogram-viewer id="histogram-viewer"></histogram-viewer>
88 89 90
</body>

</html>