1<!DOCTYPE html> 2<!-- Copyright 2020 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 Zone 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.js" 16 integrity1="sha256-N1z6ddQzX83fjw8v7uSNe7/MgOmMKdwFUv1+AJMDqNM=" 17 crossorigin="anonymous"></script> 18 19 <script src="https://cdnjs.cloudflare.com/ajax/libs/oboe.js/2.1.5/oboe-browser.js" 20 crossorigin="anonymous"></script> 21 <script src="helper.js"></script> 22 23 <script type="module" src="details-selection.js"></script> 24 <script type="module" src="global-timeline.js"></script> 25 <script type="module" src="trace-file-reader.js"></script> 26 27 <style> 28body { 29 font-family: 'Roboto', sans-serif; 30 margin-left: 5%; 31 margin-right: 5%; 32} 33 34 </style> 35 <script> 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 $('#details-selection').data = state.data; 58} 59 60function globalSelectionChangedA(e) { 61 state.selection = e.detail; 62 console.log(state.selection); 63 $('#global-timeline').selection = state.selection; 64} 65 66 </script> 67</head> 68 69<body> 70 <h1>V8 Zone memory usage statistics</h1> 71 <trace-file-reader onchange="globalDataChanged(event)"></trace-file-reader> 72 73 <details-selection id="details-selection" onchange="globalSelectionChangedA(event)"></details-selection> 74 <global-timeline id="global-timeline"></global-timeline> 75 76 <p>Visualize zone usage profile and statistics that have been gathered using</p> 77 <ul> 78 <li><code>--trace-zone-stats</code> on V8</li> 79 <li> 80 <a 81 href="https://www.chromium.org/developers/how-tos/trace-event-profiling-tool">Chrome's 82 tracing infrastructure</a> collecting data for the category 83 <code>v8.zone_stats</code>. 84 </li> 85 </ul> 86 <p> 87 Note that the visualizer needs to run on a web server due to HTML imports 88 requiring <a 89 href="https://en.wikipedia.org/wiki/Cross-origin_resource_sharing">CORS</a>. 90 </p> 91</body> 92 93</html> 94