https://github.com/thlorenz/v8-map-processor

Processes and visualizes maps (aka hidden classes) created by v8 during execution.
https://github.com/thlorenz/v8-map-processor

Last synced: 12 days ago
JSON representation

Processes and visualizes maps (aka hidden classes) created by v8 during execution.

• Host: GitHub
• URL: https://github.com/thlorenz/v8-map-processor
• Owner: thlorenz
• Created: 2018-04-12T22:09:12.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-04-26T19:35:31.000Z (over 6 years ago)
• Last Synced: 2024-12-04T09:41:26.838Z (18 days ago)
• Language: HTML
• Homepage: https://github.com/thlorenz/v8-map-processor
• Size: 1.77 MB
• Stars: 34
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# v8-map-processor

Processes and visualizes maps (aka hidden classes) created by v8 during execution.

Derived from the one included with [v8/tools](https://github.com/v8/v8/tree/master/tools).

![map-processor](./assets/map-processor.gif)

## Installation

    npm install -g v8-map-processor

## Usage

### Create the Log File and Load it into the Browser

1. Install a compatible Node.js or V8 runtime

    - a) Install Node.js `>=v10` from [nodejs.org](https://nodejs.org) or elsewhere

    - b) Install d8 via `npm install -g jsvu`

        - note that d8 is named `v8` so either link it to `d8` or use `v8` when typing the next

          command

2. Run your app with the `--trace-maps` flag, i.e. ` --trace-maps example/points.js`

      - note that if running with `d8` functionality like `setTimeout`, `console.log` and `process` are

        not available

3. Run `v8-map-processor` in the same directory to load the produced `v8.log` into the maps

  visualizer

### Interpreting the Result

The Stats view will show constructor and function names which can be selected to show more

information regarding related maps.

To focus on the maps created as part of the example, once you load the visualizer scroll to the

very right of the timeline to skip the maps that are created during initialization. Then you

can click on any of the bars do get more info.

In the case you ran with Node.js you'll see an overwhelming amount of data and may have to find

the maps you are interested in by searching for the constructor name via `Cmd|Ctrl-f` (in the

example case `Point`) and then selecting it in the _Stats_ view.

The following keyboard shortcuts are available:

- arrow up: select previous edge

- arrow down: select next edge

- arrow left: move to previous chunk

- arrow right: move to next chunk

- `+`: increase timeline resolution

- `-`: decrease timeline resolution