index.html 6.43 KB
Newer Older
zeynepCankara's avatar
zeynepCankara committed
1 2 3 4 5 6 7 8 9
<!DOCTYPE html>
<!-- Copyright 2020 the V8 project authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Indicium</title>
  <!-- <link rel="icon" type="image/png" href="/images/favicon.png"/> -->
10 11

  <link rel="modulepreload" href="./helper.mjs" >
12 13 14
  <link rel="modulepreload" href="./view/log-file-reader.mjs" >
  <link rel="modulepreload" href="./view/helper.mjs" >
  <link rel="preload" href="./view/log-file-reader-template.html" as="fetch" crossorigin="anonymous">
15 16
  <script type="module">
    // Force instatiating the log-reader before anything else.
17
    import "./view/log-file-reader.mjs";
18 19 20
    // Delay loading of the main App
    (async function() {
      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 26 27 28 29
  <style>
    #container.initial {
      display: none;
    }

30 31 32 33
    #timeline-panel {
      width: 100%;
    }

34
    .panels {
35
      display: grid;
36
      align-content: center;
37 38 39 40
      grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
      grid-auto-flow: row dense;
      grid-gap: 10px;
      margin-top: 10px;
41 42
    }

43 44
    dt::after  {
      content: ":";
45
    }
46
  </style>
zeynepCankara's avatar
zeynepCankara committed
47
</head>
48

zeynepCankara's avatar
zeynepCankara committed
49
<body>
50 51
  <tool-tip id="tool-tip"></tool-tip>

52 53 54 55 56 57
  <section id="file-reader">
    <log-file-reader id="log-file-reader"></log-file-reader>
  </section>

  <section id="container" class="initial">
    <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 62 63 64
      <timeline-track id="ic-track" title="IC"></timeline-track>
      <timeline-track id="deopt-track" title="Deopt"></timeline-track>
      <timeline-track id="code-track" title="Code"></timeline-track>
      <timeline-track id="api-track" title="API"></timeline-track>
65
    </timeline-panel>
66

67
    <div class="panels">
68 69
      <script-panel id="script-panel"></script-panel>
      <code-panel id="code-panel"></code-panel>
70
      <map-panel id="map-panel"></map-panel>
71
      <list-panel id="ic-list" title="IC List">
72
        <div class="legend">
73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91
          <h3>Legend</h3>
          <dl>
            <dt>0</dt>
            <dd>uninitialized</dd>
            <dt>X</dt>
            <dd>no feedback</dd>
            <dt>1</dt>
            <dd>monomorphic</dd>
            <dt>^</dt>
            <dd>recompute handler</dd>
            <dt>P</dt>
            <dd>polymorphic</dd>
            <dt>N</dt>
            <dd>megamorphic</dd>
            <dt>G</dt>
            <dd>generic</dd>
          </dl>
        </div>
      </list-panel>
92 93 94 95
      <list-panel id="map-list" title="Map Events"></list-panel>
      <list-panel id="deopt-list" title="Deopt Events"></list-panel>
      <list-panel id="code-list" title="Code Events"></list-panel>
      <list-panel id="api-list" title="API Events"></list-panel>
96
    </div>
97 98
  </section>

99 100 101
  <div class="panels">
    <section id="instructions" class="panel">
      <h2>Instructions</h2>
102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130
      <div class="panelBody">
        <p>
          Unified web interface to analyse runtime information stored in the v8 log.
        </p>
        For generating a v8.log file from <a href="https://v8.dev/docs/build">d8</a>:
        <ul>
          <li>
            <code>/path/do/d8 $LOG_FLAGS $FILE</code>
          </li>
        </ul>
        For generating a v8.log file from Chrome:
        <ul>
          <li>
            <code>/path/to/chrome --user-data-dir=/var/tmp/chr$RANDOM --no-sandbox
            --js-flags='$LOG_FLAGS’
            $WEBSITE_URL</code>
          </li>
        </ul>

        <h3><code>LOG_FLAGS</code>:</h3>
        <dl class="d8-options">
          <dt>
            <a href="https://source.chromium.org/search?q=FLAG_log_all">
              <code>--log-all</code>
            </a>
          </dt>
          <dd>Enable all V8 logging options.</dd>
          <dt>
            <a href="https://source.chromium.org/search?q=FLAG_trace_maps">
131
              <code>--log-maps</code>
132 133 134
            </a>
          </dt>
          <dd>
135
              Log <a href="https://v8.dev/blog/fast-properties">Maps</a>
136 137
          </dd>
          <dt>
138
            <a href="https://source.chromium.org/search?q=FLAG_log_ic">
139
              <code>--log-ic</code>
140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161
            </a>
          </dt>
          <dd>
            Log <a href="https://mathiasbynens.be/notes/shapes-ics">ICs</a>
          </dd>
          <dt>
            <a href="https://source.chromium.org/search?q=FLAG_log_source_code">
              <code>--log-source-code</code>
            </a>
          </dt>
          <dd>Log source code</dd>
          <dt>
            <a href="https://source.chromium.org/search?q=FLAG_log_code_disassemble">
              <code>--log-code-disassemble</code>
            </a>
          </dt>
          <dd>Log detailed generated generated code</dd>
          <dt>
            <a href="https://source.chromium.org/search?q=FLAG_log_api">
              <code>--log-api</code>
            </a>
          </dt>
162 163 164 165 166 167
          <dd>Log details about deoptimized code</dd>
          <dt>
            <a href="https://source.chromium.org/search?q=FLAG_log_deopt">
              <code>--log-deopt</code>
            </a>
          </dt>
168
          <dd>Log various API uses.</dd>
169 170 171 172 173 174
          <dt>
            <a href="https://source.chromium.org/search?q=FLAG_prof">
              <code>--prof</code>
            </a>
          </dt>
          <dd>Log ticks from the sampling profiler.</dd>
175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203
        </dl>

        <h3>Keyboard Shortcuts for Navigation</h3>
        <dl>
          <dt><kbd>SHIFT</kbd> + <kbd>Arrow Up</kbd></dt>
          <dd>Follow Map transition forward (first child)</dd>

          <dt><kbd>SHIFT</kbd> + <kbd>Arrow Down</kbd></dt>
          <dd>Follow Map transition backwards</dd>

          <dt><kbd>Arrow Up</kbd></dt>
          <dd>Go to previous Map chunk</dd>

          <dt><kbd>Arrow Down</kbd></dt>
          <dd>Go to next Map in chunk</dd>

          <dt><kbd>Arrow Left</kbd></dt>
          <dd>Go to previous chunk</dd>

          <dt><kbd>Arrow Right</kbd></dt>
          <dd>Go to next chunk</dd>

          <dt><kbd>+</kbd></dt>
          <dd>Timeline zoom in</dd>

          <dt><kbd>-</kbd></dt>
          <dd>Timeline zoom out</dd>
        </dl>
      </div>
204 205
    </section>
  </div>
zeynepCankara's avatar
zeynepCankara committed
206 207
</body>
</html>