11cb0ef41Sopenharmony_ci<!DOCTYPE html> 21cb0ef41Sopenharmony_ci<!-- Copyright 2018 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 Statistics</title> 111cb0ef41Sopenharmony_ci <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'> 121cb0ef41Sopenharmony_ci <script 131cb0ef41Sopenharmony_ci src="https://www.gstatic.com/charts/loader.js"></script> 141cb0ef41Sopenharmony_ci <script 151cb0ef41Sopenharmony_ci src="https://cdnjs.cloudflare.com/ajax/libs/pako/1.0.6/pako_inflate.min.js" 161cb0ef41Sopenharmony_ci integrity="sha256-N1z6ddQzX83fjw8v7uSNe7/MgOmMKdwFUv1+AJMDqNM=" 171cb0ef41Sopenharmony_ci crossorigin="anonymous"></script> 181cb0ef41Sopenharmony_ci 191cb0ef41Sopenharmony_ci <script src="https://cdnjs.cloudflare.com/ajax/libs/oboe.js/2.1.5/oboe-browser.min.js" 201cb0ef41Sopenharmony_ci crossorigin="anonymous"></script> 211cb0ef41Sopenharmony_ci <script src="helper.js"></script> 221cb0ef41Sopenharmony_ci 231cb0ef41Sopenharmony_ci <script type="module" src="details-selection.js"></script> 241cb0ef41Sopenharmony_ci <script type="module" src="global-timeline.js"></script> 251cb0ef41Sopenharmony_ci <script type="module" src="histogram-viewer.js"></script> 261cb0ef41Sopenharmony_ci <script type="module" src="trace-file-reader.js"></script> 271cb0ef41Sopenharmony_ci 281cb0ef41Sopenharmony_ci <style> 291cb0ef41Sopenharmony_cibody { 301cb0ef41Sopenharmony_ci font-family: 'Roboto', sans-serif; 311cb0ef41Sopenharmony_ci margin-left: 5%; 321cb0ef41Sopenharmony_ci margin-right: 5%; 331cb0ef41Sopenharmony_ci} 341cb0ef41Sopenharmony_ci 351cb0ef41Sopenharmony_ci </style> 361cb0ef41Sopenharmony_ci <script> 371cb0ef41Sopenharmony_ci'use strict'; 381cb0ef41Sopenharmony_ci 391cb0ef41Sopenharmony_cigoogle.charts.load('current', {'packages':['line', 'corechart', 'bar']}); 401cb0ef41Sopenharmony_ci 411cb0ef41Sopenharmony_cifunction $(id) { return document.querySelector(id); } 421cb0ef41Sopenharmony_ci 431cb0ef41Sopenharmony_cifunction removeAllChildren(node) { 441cb0ef41Sopenharmony_ci while (node.firstChild) { 451cb0ef41Sopenharmony_ci node.removeChild(node.firstChild); 461cb0ef41Sopenharmony_ci } 471cb0ef41Sopenharmony_ci} 481cb0ef41Sopenharmony_ci 491cb0ef41Sopenharmony_cilet state = Object.create(null); 501cb0ef41Sopenharmony_ci 511cb0ef41Sopenharmony_cifunction globalDataChanged(e) { 521cb0ef41Sopenharmony_ci state.data = e.detail; 531cb0ef41Sopenharmony_ci // Emit one entry with the whole model for debugging purposes. 541cb0ef41Sopenharmony_ci console.log(state.data); 551cb0ef41Sopenharmony_ci state.selection = null; 561cb0ef41Sopenharmony_ci $('#global-timeline').selection = state.selection; 571cb0ef41Sopenharmony_ci $('#global-timeline').data = state.data; 581cb0ef41Sopenharmony_ci $('#histogram-viewer').selection = state.selection; 591cb0ef41Sopenharmony_ci $('#histogram-viewer').data = state.data; 601cb0ef41Sopenharmony_ci $('#details-selection').data = state.data; 611cb0ef41Sopenharmony_ci} 621cb0ef41Sopenharmony_ci 631cb0ef41Sopenharmony_cifunction globalSelectionChangedA(e) { 641cb0ef41Sopenharmony_ci state.selection = e.detail; 651cb0ef41Sopenharmony_ci console.log(state.selection); 661cb0ef41Sopenharmony_ci $('#global-timeline').selection = state.selection; 671cb0ef41Sopenharmony_ci $('#histogram-viewer').selection = state.selection; 681cb0ef41Sopenharmony_ci} 691cb0ef41Sopenharmony_ci 701cb0ef41Sopenharmony_ci </script> 711cb0ef41Sopenharmony_ci</head> 721cb0ef41Sopenharmony_ci 731cb0ef41Sopenharmony_ci<body> 741cb0ef41Sopenharmony_ci <h1>V8 Heap Statistics</h1> 751cb0ef41Sopenharmony_ci <trace-file-reader onchange="globalDataChanged(event)"></trace-file-reader> 761cb0ef41Sopenharmony_ci 771cb0ef41Sopenharmony_ci <details-selection id="details-selection" onchange="globalSelectionChangedA(event)"></details-selection> 781cb0ef41Sopenharmony_ci <global-timeline id="global-timeline"></global-timeline> 791cb0ef41Sopenharmony_ci <histogram-viewer id="histogram-viewer"></histogram-viewer> 801cb0ef41Sopenharmony_ci 811cb0ef41Sopenharmony_ci <p>Visualize object statistics that have been gathered using</p> 821cb0ef41Sopenharmony_ci <ul> 831cb0ef41Sopenharmony_ci <li>Use <code>--trace-gc-object-stats</code> for V8 and load the contents of stdout</li> 841cb0ef41Sopenharmony_ci <li> 851cb0ef41Sopenharmony_ci <a 861cb0ef41Sopenharmony_ci href="https://www.chromium.org/developers/how-tos/trace-event-profiling-tool">Chrome's 871cb0ef41Sopenharmony_ci tracing infrastructure</a> collecting data for the category 881cb0ef41Sopenharmony_ci <code>disabled-by-default-v8.gc_stats</code> and directly load the 891cb0ef41Sopenharmony_ci results.html or trace.json.gzip file. 901cb0ef41Sopenharmony_ci </li> 911cb0ef41Sopenharmony_ci </ul> 921cb0ef41Sopenharmony_ci 931cb0ef41Sopenharmony_ci Additional information: 941cb0ef41Sopenharmony_ci <ul> 951cb0ef41Sopenharmony_ci <li> 961cb0ef41Sopenharmony_ci You only get a data point on major GCs. You can enforce this by 971cb0ef41Sopenharmony_ci using the <code>--gc-global</code> V8 flag. 981cb0ef41Sopenharmony_ci </li> 991cb0ef41Sopenharmony_ci <li> 1001cb0ef41Sopenharmony_ci For more frequent data points you can also the 1011cb0ef41Sopenharmony_ci <code>--gc-interval=$AFTER_N_ALLOCATIONS</code> V8. 1021cb0ef41Sopenharmony_ci </li> 1031cb0ef41Sopenharmony_ci <li> 1041cb0ef41Sopenharmony_ci The visualizer needs to run on a web server due to HTML imports 1051cb0ef41Sopenharmony_ci requiring <a 1061cb0ef41Sopenharmony_ci href="https://en.wikipedia.org/wiki/Cross-origin_resource_sharing">CORS</a>. 1071cb0ef41Sopenharmony_ci </li> 1081cb0ef41Sopenharmony_ci <ul> 1091cb0ef41Sopenharmony_ci</body> 1101cb0ef41Sopenharmony_ci 1111cb0ef41Sopenharmony_ci</html> 112