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<html lang="en">
6<head>
7  <meta charset="UTF-8">
8  <title>Indicium</title>
9  <!-- <link rel="icon" type="image/png" href="/images/favicon.png"/> -->
10
11  <link rel="modulepreload" href="./helper.mjs" >
12  <link rel="modulepreload" href="./view/log-file-reader.mjs" >
13  <link rel="modulepreload" href="./view/helper.mjs" >
14  <link rel="preload" href="../js/log-file-reader-template.html" as="fetch" crossorigin="anonymous">
15  <script type="module">
16    // Force instatiating the log-reader before anything else.
17    import "./view/log-file-reader.mjs";
18    // Delay loading of the main App
19    (async function() {
20      let module = await import('./index.mjs');
21      globalThis.app = new module.App();
22    })();
23  </script>
24  <link rel="stylesheet" type="text/css" href="./index.css">
25  <style>
26    #container.initial {
27      display: none;
28    }
29
30    #timeline-panel {
31      width: 100%;
32    }
33
34    .panels {
35      display: grid;
36      align-content: center;
37      grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
38      grid-auto-flow: row dense;
39      grid-gap: 10px;
40      margin-top: 10px;
41    }
42
43    dt::after  {
44      content: ":";
45    }
46  </style>
47</head>
48
49<body>
50  <tool-tip id="tool-tip" style="will-change: transform"></tool-tip>
51
52  <section id="file-reader">
53    <log-file-reader id="log-file-reader"></log-file-reader>
54  </section>
55
56  <section id="container" class="initial">
57    <timeline-panel id="timeline-panel">
58      <timeline-track-tick id="tick-track" title="Samples"></timeline-track-tick>
59      <timeline-track-timer id="timer-track" title="Timers"></timeline-track-timer>
60      <timeline-track-map id="map-track" title="Map"></timeline-track-map>
61      <timeline-track id="ic-track" title="IC"></timeline-track>
62      <timeline-track id="deopt-track" title="Deopt"></timeline-track>
63      <timeline-track id="code-track" title="Code"></timeline-track>
64    </timeline-panel>
65
66    <div class="panels">
67      <script-panel id="script-panel"></script-panel>
68      <code-panel id="code-panel"></code-panel>
69      <map-panel id="map-panel"></map-panel>
70      <list-panel id="ic-list" title="IC List">
71        <div class="legend">
72          <h3>Legend</h3>
73          <dl>
74            <dt>0</dt>
75            <dd>uninitialized</dd>
76            <dt>X</dt>
77            <dd>no feedback</dd>
78            <dt>1</dt>
79            <dd>monomorphic</dd>
80            <dt>^</dt>
81            <dd>recompute handler</dd>
82            <dt>P</dt>
83            <dd>polymorphic</dd>
84            <dt>N</dt>
85            <dd>megamorphic</dd>
86            <dt>G</dt>
87            <dd>generic</dd>
88          </dl>
89        </div>
90      </list-panel>
91      <list-panel id="map-list" title="Map Events"></list-panel>
92      <list-panel id="deopt-list" title="Deopt Events"></list-panel>
93      <list-panel id="code-list" title="Code Events"></list-panel>
94    </div>
95  </section>
96
97  <div class="panels">
98    <section id="instructions" class="panel">
99      <h2>Instructions</h2>
100      <div class="panelBody">
101        <p>
102          Unified web interface to analyse runtime information stored in the v8 log.
103        </p>
104        For generating a v8.log file from <a href="https://v8.dev/docs/build">d8</a>:
105        <ul>
106          <li>
107            <code>/path/do/d8 $LOG_FLAGS $FILE</code>
108          </li>
109        </ul>
110        For generating a v8.log file from Chrome:
111        <ul>
112          <li>
113            <code>/path/to/chrome --user-data-dir=/var/tmp/chr$RANDOM --no-sandbox
114            --js-flags='$LOG_FLAGS’
115            $WEBSITE_URL</code>
116          </li>
117        </ul>
118
119        <h3><code>LOG_FLAGS</code>:</h3>
120        <dl class="d8-options">
121          <dt>
122            <a href="https://source.chromium.org/search?q=FLAG_log_all">
123              <code>--log-all</code>
124            </a>
125          </dt>
126          <dd>Enable all V8 logging options.</dd>
127          <dt>
128            <a href="https://source.chromium.org/search?q=FLAG_trace_maps">
129              <code>--log-maps</code>
130            </a>
131          </dt>
132          <dd>
133              Log <a href="https://v8.dev/blog/fast-properties">Maps</a>
134          </dd>
135          <dt>
136            <a href="https://source.chromium.org/search?q=FLAG_log_ic">
137              <code>--log-ic</code>
138            </a>
139          </dt>
140          <dd>
141            Log <a href="https://mathiasbynens.be/notes/shapes-ics">ICs</a>
142          </dd>
143          <dt>
144            <a href="https://source.chromium.org/search?q=FLAG_log_source_code">
145              <code>--log-source-code</code>
146            </a>
147          </dt>
148          <dd>Log source code</dd>
149          <dt>
150            <a href="https://source.chromium.org/search?q=FLAG_log_code_disassemble">
151              <code>--log-code-disassemble</code>
152            </a>
153          </dt>
154          <dd>Log detailed generated generated code</dd>
155          <dt>
156            <a href="https://source.chromium.org/search?q=FLAG_log_code">
157              <code>--log-code</code>
158            </a>
159          </dt>
160          <dd>Log details about deoptimized code</dd>
161          <dt>
162            <a href="https://source.chromium.org/search?q=FLAG_log_deopt">
163              <code>--log-deopt</code>
164            </a>
165          </dt>
166          <dd>Log various API uses.</dd>
167          <dt>
168            <a href="https://source.chromium.org/search?q=FLAG_prof">
169              <code>--prof</code>
170            </a>
171          </dt>
172          <dd>Log ticks from the sampling profiler.</dd>
173        </dl>
174
175        <h3>Keyboard Shortcuts for Navigation</h3>
176        <dl>
177          <dt><kbd>A</kbd></dt>
178          <dd>Scroll left</dd>
179
180          <dt><kbd>D</kbd></dt>
181          <dd>Sroll right</dd>
182
183          <dt><kbd>SHIFT</kbd> + <kbd>Arrow Up</kbd></dt>
184          <dd>Follow Map transition forward (first child)</dd>
185
186          <dt><kbd>SHIFT</kbd> + <kbd>Arrow Down</kbd></dt>
187          <dd>Follow Map transition backwards</dd>
188
189          <dt><kbd>Arrow Up</kbd></dt>
190          <dd>Go to previous Map chunk</dd>
191
192          <dt><kbd>Arrow Down</kbd></dt>
193          <dd>Go to next Map in chunk</dd>
194
195          <dt><kbd>Arrow Left</kbd></dt>
196          <dd>Go to previous chunk</dd>
197
198          <dt><kbd>Arrow Right</kbd></dt>
199          <dd>Go to next chunk</dd>
200
201          <dt><kbd>+</kbd></dt>
202          <dd>Timeline zoom in</dd>
203
204          <dt><kbd>-</kbd></dt>
205          <dd>Timeline zoom out</dd>
206        </dl>
207      </div>
208    </section>
209  </div>
210</body>
211</html>
212