11cb0ef41Sopenharmony_ci<!DOCTYPE html> 21cb0ef41Sopenharmony_ci<!-- Copyright 2021 the V8 project authors. All rights reserved. 31cb0ef41Sopenharmony_ciUse of this source code is governed by a BSD-style license that can be 41cb0ef41Sopenharmony_cifound in the LICENSE file. --> 51cb0ef41Sopenharmony_ci 61cb0ef41Sopenharmony_ci<html lang="en"> 71cb0ef41Sopenharmony_ci 81cb0ef41Sopenharmony_ci<head> 91cb0ef41Sopenharmony_ci <meta charset="UTF-8"> 101cb0ef41Sopenharmony_ci <title>V8 Heap Layout</title> 111cb0ef41Sopenharmony_ci 121cb0ef41Sopenharmony_ci <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.2.2/echarts.min.js"></script> 131cb0ef41Sopenharmony_ci 141cb0ef41Sopenharmony_ci <script type="module" src="heap-layout-viewer.mjs"></script> 151cb0ef41Sopenharmony_ci <script type="module" src="heap-size-trend-viewer.mjs"></script> 161cb0ef41Sopenharmony_ci <script type="module" src="trace-file-reader.mjs"></script> 171cb0ef41Sopenharmony_ci 181cb0ef41Sopenharmony_ci <link rel="stylesheet" type="text/css" href="./index.css"> 191cb0ef41Sopenharmony_ci 201cb0ef41Sopenharmony_ci <script> 211cb0ef41Sopenharmony_ci 'use strict'; 221cb0ef41Sopenharmony_ci function $(id) { return document.querySelector(id); } 231cb0ef41Sopenharmony_ci 241cb0ef41Sopenharmony_ci function globalDataChanged(e) { 251cb0ef41Sopenharmony_ci $('#heap-layout-viewer').data = e.detail; 261cb0ef41Sopenharmony_ci $('#heap-size-trend-viewer').data = e.detail; 271cb0ef41Sopenharmony_ci $('.button-container').style.display = 'block'; 281cb0ef41Sopenharmony_ci } 291cb0ef41Sopenharmony_ci 301cb0ef41Sopenharmony_ci function selectSnapshotAtIndex(e) { 311cb0ef41Sopenharmony_ci const index = e.detail; 321cb0ef41Sopenharmony_ci $('#heap-layout-viewer').drawChart(index); 331cb0ef41Sopenharmony_ci } 341cb0ef41Sopenharmony_ci 351cb0ef41Sopenharmony_ci 361cb0ef41Sopenharmony_ci function OnPrevClick() { 371cb0ef41Sopenharmony_ci const heap_size_trend_viewer = $('#heap-size-trend-viewer'); 381cb0ef41Sopenharmony_ci const heap_layout_viewer = $('#heap-layout-viewer'); 391cb0ef41Sopenharmony_ci heap_size_trend_viewer.setXMarkLine(heap_size_trend_viewer.currentIndex - 1); 401cb0ef41Sopenharmony_ci heap_layout_viewer.drawChart(heap_layout_viewer.currentIndex - 1); 411cb0ef41Sopenharmony_ci } 421cb0ef41Sopenharmony_ci 431cb0ef41Sopenharmony_ci function OnNextClick() { 441cb0ef41Sopenharmony_ci const heap_size_trend_viewer = $('#heap-size-trend-viewer'); 451cb0ef41Sopenharmony_ci const heap_layout_viewer = $('#heap-layout-viewer'); 461cb0ef41Sopenharmony_ci heap_size_trend_viewer.setXMarkLine(heap_size_trend_viewer.currentIndex + 1); 471cb0ef41Sopenharmony_ci heap_layout_viewer.drawChart(heap_layout_viewer.currentIndex + 1); 481cb0ef41Sopenharmony_ci } 491cb0ef41Sopenharmony_ci 501cb0ef41Sopenharmony_ci </script> 511cb0ef41Sopenharmony_ci</head> 521cb0ef41Sopenharmony_ci 531cb0ef41Sopenharmony_ci<body> 541cb0ef41Sopenharmony_ci <h1>V8 Heap Layout</h1> 551cb0ef41Sopenharmony_ci <trace-file-reader onchange="globalDataChanged(event)"></trace-file-reader> 561cb0ef41Sopenharmony_ci <heap-size-trend-viewer id="heap-size-trend-viewer" onchange="selectSnapshotAtIndex(event)"></heap-size-trend-viewer> 571cb0ef41Sopenharmony_ci <heap-layout-viewer id="heap-layout-viewer"></heap-layout-viewer> 581cb0ef41Sopenharmony_ci <div class="button-container"> 591cb0ef41Sopenharmony_ci <button id="button_prev" type="button" onclick="OnPrevClick()">Prev</button> 601cb0ef41Sopenharmony_ci <button id="button_next" type="button" onclick="OnNextClick()">Next</button> 611cb0ef41Sopenharmony_ci </div> 621cb0ef41Sopenharmony_ci 631cb0ef41Sopenharmony_ci <p>Heap layout is a HTML-based tool for visualizing V8-internal heap layout.</p> 641cb0ef41Sopenharmony_ci <p>Visualize heap layout that have been gathered using</p> 651cb0ef41Sopenharmony_ci <ul> 661cb0ef41Sopenharmony_ci <li><code>--trace-gc-heap-layout</code> on V8</li> 671cb0ef41Sopenharmony_ci 681cb0ef41Sopenharmony_ci </ul> 691cb0ef41Sopenharmony_ci 701cb0ef41Sopenharmony_ci</body> 711cb0ef41Sopenharmony_ci 721cb0ef41Sopenharmony_ci</html>