1<!DOCTYPE html>
2<!-- Copyright 2021 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 Layout</title>
11
12  <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.2.2/echarts.min.js"></script>
13
14  <script type="module" src="heap-layout-viewer.mjs"></script>
15  <script type="module" src="heap-size-trend-viewer.mjs"></script>
16  <script type="module" src="trace-file-reader.mjs"></script>
17
18  <link rel="stylesheet" type="text/css" href="./index.css">
19
20  <script>
21    'use strict';
22    function $(id) { return document.querySelector(id); }
23
24    function globalDataChanged(e) {
25      $('#heap-layout-viewer').data = e.detail;
26      $('#heap-size-trend-viewer').data = e.detail;
27      $('.button-container').style.display = 'block';
28    }
29
30    function selectSnapshotAtIndex(e) {
31      const index = e.detail;
32      $('#heap-layout-viewer').drawChart(index);
33    }
34
35
36    function OnPrevClick() {
37      const heap_size_trend_viewer = $('#heap-size-trend-viewer');
38      const heap_layout_viewer = $('#heap-layout-viewer');
39      heap_size_trend_viewer.setXMarkLine(heap_size_trend_viewer.currentIndex - 1);
40      heap_layout_viewer.drawChart(heap_layout_viewer.currentIndex - 1);
41    }
42
43    function OnNextClick() {
44      const heap_size_trend_viewer = $('#heap-size-trend-viewer');
45      const heap_layout_viewer = $('#heap-layout-viewer');
46      heap_size_trend_viewer.setXMarkLine(heap_size_trend_viewer.currentIndex + 1);
47      heap_layout_viewer.drawChart(heap_layout_viewer.currentIndex + 1);
48    }
49
50  </script>
51</head>
52
53<body>
54  <h1>V8 Heap Layout</h1>
55  <trace-file-reader onchange="globalDataChanged(event)"></trace-file-reader>
56  <heap-size-trend-viewer id="heap-size-trend-viewer" onchange="selectSnapshotAtIndex(event)"></heap-size-trend-viewer>
57  <heap-layout-viewer id="heap-layout-viewer"></heap-layout-viewer>
58  <div class="button-container">
59    <button id="button_prev" type="button" onclick="OnPrevClick()">Prev</button>
60    <button id="button_next" type="button" onclick="OnNextClick()">Next</button>
61  </div>
62
63  <p>Heap layout is a HTML-based tool for visualizing V8-internal heap layout.</p>
64  <p>Visualize heap layout that have been gathered using</p>
65  <ul>
66    <li><code>--trace-gc-heap-layout</code> on V8</li>
67
68  </ul>
69
70</body>
71
72</html>