diff options
Diffstat (limited to 'deps/v8/tools/system-analyzer/index.html')
| -rw-r--r-- | deps/v8/tools/system-analyzer/index.html | 214 |
1 files changed, 135 insertions, 79 deletions
diff --git a/deps/v8/tools/system-analyzer/index.html b/deps/v8/tools/system-analyzer/index.html index a861300f91..fa09830240 100644 --- a/deps/v8/tools/system-analyzer/index.html +++ b/deps/v8/tools/system-analyzer/index.html @@ -8,33 +8,27 @@ found in the LICENSE file. --> <title>Indicium</title> <!-- <link rel="icon" type="image/png" href="/images/favicon.png"/> --> - <link rel="modulepreload" href="./log-file-reader.mjs" > <link rel="modulepreload" href="./helper.mjs" > - <link rel="preload" href="./log-file-reader-template.html" as="fetch" crossorigin="anonymous"> + <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 "./log-file-reader.mjs"; + 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("#log-file-reader", "#map-panel", "#map-stats-panel", - "#timeline-panel", "#ic-panel", "#map-track", "#ic-track", "#deopt-track", - "#source-panel"); + globalThis.app = new module.App(); })(); </script> - <link rel="stylesheet" type="text/css" href="./index.css"> <style> - .theme-switch-wrapper { - display: inline-block; - align-items: center; - } - .theme-switch { display: inline-block; height: 16px; position: relative; width: 38px; + vertical-align: middle; } .theme-switch input { @@ -75,7 +69,7 @@ found in the LICENSE file. --> width: 100%; } - .panels{ + .panels { display: grid; align-content: center; grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)); @@ -91,31 +85,60 @@ found in the LICENSE file. --> </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"></timeline-track> - <timeline-track id="ic-track"></timeline-track> - <timeline-track id="deopt-track"></timeline-track> + <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> - <stats-panel id="map-stats-panel"></stats-panel> - <ic-panel id="ic-panel" onchange="app.handleSelectIc(event)"></ic-panel> - <source-panel id="source-panel"></source-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> - <span>Theme:</span> - <div class="theme-switch-wrapper"> + <div class="panelBody"> + <span>Theme:</span> <label class="theme-switch" for="theme-switch-input"> - <input type="checkbox" id="theme-switch-input" /> + <input type="checkbox" id="theme-switch-input" > <div class="slider"></div> </label> </div> @@ -123,63 +146,96 @@ found in the LICENSE file. --> <section id="instructions" class="panel"> <h2>Instructions</h2> - <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 --trace-maps --trace_ic --log-source-code $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='--trace-ic --trace-maps --log-source-code’ - $WEBSITE_URL</code> - </li> - </ul> - - <h3>Log Options:</h3> - <dl class="d8-options"> - <dt><code>--trace-maps</code></dt> - <dd>Log<a href="https://v8.dev/blog/fast-properties" target="_blank"> - Maps</a></dd> - <dt><code>--trace-ic</code></dt> - <dd>Log - <a href="https://mathiasbynens.be/notes/shapes-ics" target="_blank"> - ICs</a></dd> - <dt><code>--log-source-code</code></dt> - <dd>Log source code</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 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>--trace-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>--trace-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 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> |