Giter Club home page Giter Club logo

v8-deopt-viewer's Introduction

v8-deopt-viewer

View deoptimizations of your JavaScript in V8

Sample image of the results of running v8-deopt-viewer

Also consider checking out Deopt Explorer from the TypeScript team!

You may not need this tool...

V8 only optimizes code that runs repeatedly. Often for websites this code is your framework's code and not your app code. If you are looking to improve your website's performance, first check out tools like Lighthouse or webhint, and follow other general website performance guidance.

Usage

Install NodeJS 14.x or greater.

npx v8-deopt-viewer program.js --open

If you want run this against URLs, also install puppeteer:

npm i -g puppeteer

The main usage of this repo is through the CLI. Download the v8-deopt-viewer package through NPM or use npx to run the CLI. Options for the CLI can be found using the --help.

$ npx v8-deopt-viewer --help

  Description
    Generate and view deoptimizations in JavaScript code running in V8

  Usage
    $ v8-deopt-viewer [file] [options]

  Options
    -i, --input         Path to an already generated v8.log file
    -o, --out           The directory to output files too  (default current working directory)
    -t, --timeout       How long in milliseconds to keep the browser open while the webpage runs  (default 5000)
    --keep-internals    Don't remove NodeJS internals from the log
    --skip-maps         Skip tracing internal maps of V8
    --open              Open the resulting webapp in a web browser
    -v, --version       Displays current version
    -h, --help          Displays this message

  Examples
    $ v8-deopt-viewer examples/simple/adder.js
    $ v8-deopt-viewer examples/html-inline/adders.html -o /tmp/directory
    $ v8-deopt-viewer https://google.com
    $ v8-deopt-viewer -i v8.log
    $ v8-deopt-viewer -i v8.log -o /tmp/directory

Running the CLI will run the script or webpage provided with V8 flags to output a log of optimizations and deoptimizations. That log is saved as v8.log. We'll then parse that log into a JSON object filtering out the useful log lines and extending the information with such as the severity of the deopts. This data is saved in a JavaScript file (v8-data.js). We copy over the files from the webapp for viewing the data (index.html, v8-deopt-webapp.js, v8-deopt-webapp.css). Finally, open the index.html file in a modern browser to view the results of the run.

Prior work

  • thlorenz/deoptigate

    This project started out as a fork of the awesome deoptigate but as the scope of what I wanted to accomplish grew, I figured it was time to start my own project that I could re-architect to meet my requirements

v8-deopt-viewer's People

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar avatar avatar

Forkers

alienzhou tjdev7 marvinhagemeister jolindroth developit cricketnest maximelkin victor-homyakov hondrytravis

v8-deopt-viewer's Issues

Add a view to examine the maps an application creates

Something similar, but more webdev-friendly version of V8's map-processor. Useful to determine what maps are being loaded at a location, and why they are different.

The V8 map processor shows the transitions for each map and at what location the transition happens which is really useful.

Requires extending v8-generate-log to pass in the --trace-maps, and --trace-maps-details flags.

Screenshots of V8's tool:
image

image

Adding tooltips to column headers

It'd be useful to add explanatory tooltips to column headers in tables.

For example "Sev" I'm not really sure what it means, "severity" maybe? If so what does "Optimizations -> Sev 3" mean? And why isn't there also "Optimizations -> Sev1" and "Optimizations -> Sev2"?

`unknown code state: ^`

Not sure if this is a bug, something specific to the NodeJS version I'm using (v16.13.2), or I am simply doing it wrong. 😁

I've been trying to process this v8.log file, produced with:

node --log-ic --logfile=v8.log --no-logfile-per-isolate lib/benchmark-static-lexer.js

and running this command on it:

npx v8-deopt-viewer -i v8.log

v8-deopt-viewer runs to completion and outputs its output files, but the console shows a bunch of errors along the way, of the form:

v8-deopt-parser - Error parsing V8 log file: line 4546: parse: unknown ic code state: 66
Error: parse: unknown ic code state: 66
    at parseIcState (file:///home/wincent/.npm/_npx/bff88035e4613431/node_modules/v8-deopt-parser/src/propertyICParsers.js:51:10)
    at DeoptLogReader.LogReader.dispatchLogRow_ (file:///home/wincent/.npm/_npx/bff88035e4613431/node_modules/v8-deopt-parser/src/v8-tools-core/logreader.js:206:25)
    at DeoptLogReader.LogReader.processLogLine_ (file:///home/wincent/.npm/_npx/bff88035e4613431/node_modules/v8-deopt-parser/src/v8-tools-core/logreader.js:243:12)
    at DeoptLogReader.LogReader.processLog_ (file:///home/wincent/.npm/_npx/bff88035e4613431/node_modules/v8-deopt-parser/src/v8-tools-core/logreader.js:229:10)
    at DeoptLogReader.LogReader.processLogChunk (file:///home/wincent/.npm/_npx/bff88035e4613431/node_modules/v8-deopt-parser/src/v8-tools-core/logreader.js:106:8)
    at parseV8Log (file:///home/wincent/.npm/_npx/bff88035e4613431/node_modules/v8-deopt-parser/src/index.js:12:12)
    at run (file:///home/wincent/.npm/_npx/bff88035e4613431/node_modules/v8-deopt-viewer/src/index.js:114:29)

The line it's complaining about looks like this:

StoreIC,0xe1ea49ea41e,117600,515,66,X,X,0x000000000000,listener,,

Looking in v8-deopt-viewer's output files, no deopts are reported, but there definitely are deopts happening, according to:

node --trace-opt --trace-deopt lib/benchmark-static-lexer.js

Which shows me a number of deopt-related messages, like:

[bailout (kind: deopt-soft, reason: Insufficient type feedback for compare operation): begin. deoptimizing 0x124d1da43da1 <JSFunction lex (sfi = 0xa32975ca889)>, opt id 0, bytecode offset 2046, deopt exit 104, FP to SP delta 104, caller SP 0x7ffcbf4dfea8, pc 0x7f788271b456]
[marking 0x124d1da43da1 <JSFunction lex (sfi = 0xa32975ca889)> for optimized recompilation, reason: hot and stable]
[compiling method 0x124d1da43da1 <JSFunction lex (sfi = 0xa32975ca889)> (target TURBOFAN) using TurboFan]
[optimizing 0x124d1da43da1 <JSFunction lex (sfi = 0xa32975ca889)> (target TURBOFAN) - took 1.395, 13.765, 0.044 ms]
[completed optimizing 0x124d1da43da1 <JSFunction lex (sfi = 0xa32975ca889)> (target TURBOFAN)]
[bailout (kind: deopt-eager, reason: out of bounds): begin. deoptimizing 0x124d1da43da1 <JSFunction lex (sfi = 0xa32975ca889)>, opt id 2, bytecode offset 55, deopt exit 76, FP to SP delta 104, caller SP 0x7ffcbf4dfea8, pc 0x7f7882722a9a]

IC format in log file has changed

Looks like there is one new column in the CSV and we trip over that. Ours has only 9 parsers whereas recent versions of v8 write 10 columns.

Our parser:

v8-deopt-viewer/packages/v8-deopt-parser/src/propertyICParsers.js

Lines 68 to 78 in 6af15a4

export const propertyICFieldParsers = [
parseInt, // profile code
parseInt, // line
parseInt, // column
parseIcState, // old_state
parseIcState, // new_state
parseInt, // map ID
parseString, // propertyKey
parseString, // modifier
parseString, // slow_reason
];

V8: https://source.chromium.org/chromium/chromium/src/+/main:v8/tools/system-analyzer/processor.mjs;l=69-72?q=StoreIC&ss=chromium%2Fchromium%2Fsrc&start=41

EDIT: This folder might also be of interest: https://source.chromium.org/chromium/chromium/src/+/main:v8/tools/system-analyzer/

Use smaller relative URLs in Summary view

Instead of determining the common root between all the files for the relative path (in v8-deopt-viewer package), consider determining the smallest unique path for each file.

In other words, start from the end of each path and keep adding parent directories until each relative path is unique. The title attribute on the link in the Summary view provides the full URL in case it is needed

Compatible Node JS Versions / How to use this tool

I'm getting tons of errors for unknown ic codes:

v8-deopt-parser - Error parsing V8 log file: line 45285: parse: unknown ic code state: 66
Error: parse: unknown ic code state: 66
    at parseIcState (file:///C:/Users/hdieterichs/AppData/Local/npm-cache/_npx/bff88035e4613431/node_modules/v8-deopt-parser/src/propertyICParsers.js:51:10)
    at DeoptLogReader.LogReader.dispatchLogRow_ (file:///C:/Users/hdieterichs/AppData/Local/npm-cache/_npx/bff88035e4613431/node_modules/v8-deopt-parser/src/v8-tools-core/logreader.js:206:25)
    at DeoptLogReader.LogReader.processLogLine_ (file:///C:/Users/hdieterichs/AppData/Local/npm-cache/_npx/bff88035e4613431/node_modules/v8-deopt-parser/src/v8-tools-core/logreader.js:243:12)
    at DeoptLogReader.LogReader.processLog_ (file:///C:/Users/hdieterichs/AppData/Local/npm-cache/_npx/bff88035e4613431/node_modules/v8-deopt-parser/src/v8-tools-core/logreader.js:229:10)
    at DeoptLogReader.LogReader.processLogChunk (file:///C:/Users/hdieterichs/AppData/Local/npm-cache/_npx/bff88035e4613431/node_modules/v8-deopt-parser/src/v8-tools-core/logreader.js:106:8)
    at parseV8Log (file:///C:/Users/hdieterichs/AppData/Local/npm-cache/_npx/bff88035e4613431/node_modules/v8-deopt-parser/src/index.js:12:12)
    at run (file:///C:/Users/hdieterichs/AppData/Local/npm-cache/_npx/bff88035e4613431/node_modules/v8-deopt-viewer/src/index.js:114:29)

I used node-v18.12.1-win-x64 with --prof --log-ic --no-logfile-per-isolate --log-maps to generate this log:
v8.zip

However, it doesn't show any deoptimizations or inline cache information:
image

How can I use this tool to see the deoptimizations?

Thanks!

RangeError [ERR_CHILD_PROCESS_STDIO_MAXBUFFER] when running against a webpack.js project

It looks like somewhere that exec is being called, maxBuffer needs to be specified. My guess is that this v8 log is quite large for even simple processess like running webpack against a simple 2 module project.

Below is the command and response run.

RangeError [ERR_CHILD_PROCESS_STDIO_MAXBUFFER]: stdout maxBuffer length exceeded     
    at new NodeError (node:internal/errors:372:5)
    at Socket.onChildStdout (node:child_process:461:14)
    at Socket.emit (node:events:527:28)
    at addChunk (node:internal/streams/readable:324:12)
    at readableAddChunk (node:internal/streams/readable:293:11)
    at Socket.Readable.push (node:internal/streams/readable:234:10)
    at Pipe.onStreamRead (node:internal/stream_base_commons:190:23) {
  code: 'ERR_CHILD_PROCESS_STDIO_MAXBUFFER',
  cmd: 'C:\\Users\\selarkin\\AppData\\Local\\nvs\\node\\17.9.0\\x64\\node.exe --log-ic --logfile=C:\\Users\\selarkin\\Code\\webpack-5-playground\\v8-deopt-viewer\\v8.log 
--no-logfile-per-isolate --log-maps ./node_modules/webpack/bin/webpack.js',

Add support for source maps

Add support for mapping deoptimizations to the actual source using source maps.

Probably should be it's own package or a helper function exposed by the parser package?

Also the downloading of the source maps probably needs to be controlled by the CLI since it understands what APIs to use to read the source maps (either local fs or http)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.