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="helper.js"></script> 20 21 <link rel="import" href="details-selection.html"> 22 <link rel="import" href="global-timeline.html"> 23 <link rel="import" href="histogram-viewer.html"> 24 <link rel="import" href="trace-file-reader.html"> 25 26 <style> 27body { 28 font-family: 'Roboto', sans-serif; 29 margin-left: 5%; 30 margin-right: 5%; 31} 32 33 </style> 34 <script> 35 36'use strict'; 37 38google.charts.load('current', {'packages':['line', 'corechart', 'bar']}); 39 40function $(id) { return document.querySelector(id); } 41 42function removeAllChildren(node) { 43 while (node.firstChild) { 44 node.removeChild(node.firstChild); 45 } 46} 47 48let state = Object.create(null); 49 50function globalDataChanged(e) { 51 state.data = e.detail; 52 // Emit one entry with the whole model for debugging purposes. 53 console.log(state.data); 54 state.selection = null; 55 $('#global-timeline').selection = state.selection; 56 $('#global-timeline').data = state.data; 57 $('#histogram-viewer').selection = state.selection; 58 $('#histogram-viewer').data = state.data; 59 $('#details-selection').data = state.data; 60} 61 62function globalSelectionChangedA(e) { 63 state.selection = e.detail; 64 console.log(state.selection); 65 $('#global-timeline').selection = state.selection; 66 $('#histogram-viewer').selection = state.selection; 67} 68 69 </script> 70</head> 71 72<body> 73 <h1>V8 Heap Statistics</h1> 74 <trace-file-reader onchange="globalDataChanged(event)"></trace-file-reader> 75 76 <details-selection id="details-selection" onchange="globalSelectionChangedA(event)"></details-selection> 77 <global-timeline id="global-timeline"></global-timeline> 78 <histogram-viewer id="histogram-viewer"></histogram-viewer> 79 80 <p>Visualize object statistics that have been gathered using</p> 81 <ul> 82 <li><code>--trace-gc-object-stats</code> on V8</li> 83 <li> 84 <a 85 href="https://www.chromium.org/developers/how-tos/trace-event-profiling-tool">Chrome's 86 tracing infrastructure</a> collecting data for the category 87 <code>v8.gc_stats</code>. 88 </li> 89 </ul> 90 <p> 91 Note that you only get a data point on major GCs. You can enforce this by 92 using the <code>--gc-global</code> flag. 93 </p> 94 <p> 95 Note that the visualizer needs to run on a web server due to HTML imports 96 requiring <a 97 href="https://en.wikipedia.org/wiki/Cross-origin_resource_sharing">CORS</a>. 98 </p> 99</body> 100 101</html> 102