| <!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"/> --> |
| |
| <link rel="modulepreload" href="./helper.mjs" > |
| <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"> |
| <script type="module"> |
| // Force instatiating the log-reader before anything else. |
| import "./view/log-file-reader.mjs"; |
| // Delay loading of the main App |
| (async function() { |
| let module = await import('./index.mjs'); |
| globalThis.app = new module.App(); |
| })(); |
| </script> |
| <link rel="stylesheet" type="text/css" href="./index.css"> |
| <style> |
| .theme-switch { |
| display: inline-block; |
| height: 16px; |
| position: relative; |
| width: 38px; |
| vertical-align: middle; |
| } |
| |
| .theme-switch input { |
| display: none; |
| } |
| |
| .slider { |
| background-color: var(--primary-color); |
| bottom: 0; |
| cursor: pointer; |
| left: 0; |
| position: absolute; |
| right: 0; |
| top: 0; |
| border-radius: 34px; |
| } |
| |
| .slider:before { |
| background-color: var(--surface-color); |
| position: absolute; |
| height: 10px; |
| width: 10px; |
| bottom: 3px; |
| content: ""; |
| left: 4px; |
| border-radius: 50%; |
| } |
| |
| input:checked+.slider:before { |
| transform: translateX(20px); |
| } |
| |
| #container.initial { |
| display: none; |
| } |
| |
| #timeline-panel { |
| width: 100%; |
| } |
| |
| .panels { |
| display: grid; |
| align-content: center; |
| grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)); |
| grid-auto-flow: row dense; |
| grid-gap: 10px; |
| margin-top: 10px; |
| } |
| |
| dt::after { |
| content: ":"; |
| } |
| </style> |
| </head> |
| |
| <body> |
| <tool-tip id="tool-tip"></tool-tip> |
| |
| <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"> |
| <timeline-track id="map-track" title="Map"></timeline-track> |
| <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> |
| </timeline-panel> |
| |
| <div class="panels"> |
| <map-panel id="map-panel"></map-panel> |
| <list-panel id="ic-list" title="IC List"> |
| <div class="legend"> |
| <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> |
| <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> |
| <script-panel id="script-panel"></script-panel> |
| <code-panel id="code-panel"></code-panel> |
| </div> |
| </section> |
| |
| <div class="panels"> |
| <section id="settings" class="panel"> |
| <h2>Settings</h2> |
| <div class="panelBody"> |
| <span>Theme:</span> |
| <label class="theme-switch" for="theme-switch-input"> |
| <input type="checkbox" id="theme-switch-input" > |
| <div class="slider"></div> |
| </label> |
| </div> |
| </section> |
| |
| <section id="instructions" class="panel"> |
| <h2>Instructions</h2> |
| <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"> |
| <code>--log-maps</code> |
| </a> |
| </dt> |
| <dd> |
| Log<a href="https://v8.dev/blog/fast-properties">Maps</a> |
| </dd> |
| <dt> |
| <a href="https://source.chromium.org/search?q=FLAG_trace_ic"> |
| <code>--log-ic</code> |
| </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> |
| <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> |
| <dd>Log various API uses.</dd> |
| </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> |
| </section> |
| </div> |
| </body> |
| </html> |
