v8/tools/turbolizer
Leszek Swirski 7b8d8e9a54 [turbolizer] Use textContent to set code view
Previously code view was set using innerHTML. This would cause problems
for html characters in the code -- in particular, '<' without a space
after it would start new HTML tags, and the code following it wouldn't
be visible.

Now, the source text is set using textContent, which doesn't parse the
value as HTML and implicitly escapes any HTML characters in the code.

Change-Id: I612a18c37bbb4da6a87063bb39d7f7123a3c4c0d
Reviewed-on: https://chromium-review.googlesource.com/461826
Reviewed-by: Daniel Clifford <danno@chromium.org>
Commit-Queue: Leszek Swirski <leszeks@chromium.org>
Cr-Commit-Position: refs/heads/master@{#44233}
2017-03-29 14:28:32 +00:00
..
code-view.js [turbolizer] Use textContent to set code view 2017-03-29 14:28:32 +00:00
constants.js [turbolizer] Improved display of perf profiling information. 2016-09-14 09:45:41 +00:00
disassembly-view.js [turbolizer] Improved display of perf profiling information. 2016-09-14 09:45:41 +00:00
edge.js [turbolizer] Enlarge node labels and bubbles. Fix dead node display on old JSON. 2016-08-11 16:46:18 +00:00
empty-view.js Add a html-based visualizer for TurboFan graphs 2016-05-19 08:18:01 +00:00
expand-all.jpg Add a html-based visualizer for TurboFan graphs 2016-05-19 08:18:01 +00:00
graph-layout.js [turbolizer] Enlarge node labels and bubbles. Fix dead node display on old JSON. 2016-08-11 16:46:18 +00:00
graph-view.js [turbolizer] Enlarge node labels and bubbles. Fix dead node display on old JSON. 2016-08-11 16:46:18 +00:00
hide-selected.png Add a html-based visualizer for TurboFan graphs 2016-05-19 08:18:01 +00:00
hide-unselected.png Add a html-based visualizer for TurboFan graphs 2016-05-19 08:18:01 +00:00
index.html [turbolizer] Improved display of perf profiling information. 2016-09-14 09:45:41 +00:00
lang-disassembly.js Add a html-based visualizer for TurboFan graphs 2016-05-19 08:18:01 +00:00
layout-icon.png Add a html-based visualizer for TurboFan graphs 2016-05-19 08:18:01 +00:00
left-arrow.png Add a html-based visualizer for TurboFan graphs 2016-05-19 08:18:01 +00:00
live.png [turbolizer] Visualize also the dead nodes. 2016-08-09 16:20:32 +00:00
monkey.js Add a html-based visualizer for TurboFan graphs 2016-05-19 08:18:01 +00:00
node.js [turbolizer] Fix distinguishing simplified nodes 2016-11-24 15:32:42 +00:00
OWNERS Add a html-based visualizer for TurboFan graphs 2016-05-19 08:18:01 +00:00
README.md [turbolizer] Fixed naming of turbolizer perf script. 2016-07-28 12:38:00 +00:00
right-arrow.png Add a html-based visualizer for TurboFan graphs 2016-05-19 08:18:01 +00:00
schedule-view.js [turbolizer] Recognize nested [] in json file 2016-11-07 01:51:19 +00:00
search2.png Add a html-based visualizer for TurboFan graphs 2016-05-19 08:18:01 +00:00
search.png Add a html-based visualizer for TurboFan graphs 2016-05-19 08:18:01 +00:00
selection-broker.js [turbolizer] Use locations rather than ranges everywhere 2016-08-10 14:46:11 +00:00
selection.js [turbolizer] Use locations rather than ranges everywhere 2016-08-10 14:46:11 +00:00
text-view.js [turbolizer] Improved display of perf profiling information. 2016-09-14 09:45:41 +00:00
turbo-visualizer.css [turbolizer] Improved display of perf profiling information. 2016-09-14 09:45:41 +00:00
turbo-visualizer.js [turbolizer] Improved display of perf profiling information. 2016-09-14 09:45:41 +00:00
types.png Add a html-based visualizer for TurboFan graphs 2016-05-19 08:18:01 +00:00
upload-icon.png Add a html-based visualizer for TurboFan graphs 2016-05-19 08:18:01 +00:00
util.js [turbolizer] Factor out some user actions into methods of GraphView. 2016-07-25 14:25:46 +00:00
view.js [turbolizer] Use locations rather than ranges everywhere 2016-08-10 14:46:11 +00:00

Turbolizer

Turbolizer is a HTML-based tool that visualizes optimized code along the various phases of Turbofan's optimization pipeline, allowing easy navigation between source code, Turbofan IR graphs, scheduled IR nodes and generated assembly code.

Turbolizer consumes .json files that are generated per-function by d8 by passing the '--trace-turbo' command-line flag.

Host the turbolizer locally by starting a web server that serves the contents of the turbolizer directory, e.g.:

cd src/tools/turbolizer
python -m SimpleHTTPServer 8000

Optionally, profiling data generated by the perf tools in linux can be merged with the .json files using the turbolizer-perf.py file included. The following command is an example of using the perf script:

perf script -i perf.data.jitted -s turbolizer-perf.py turbo-main.json

The output of the above command is a json object that can be piped to a file which, when uploaded to turbolizer, will display the event counts from perf next to each instruction in the disassembly. Further detail can be found in the bottom of this document under "Using Perf with Turbo."

Using the python interface in perf script requires python-dev to be installed and perf be recompiled with python support enabled. Once recompiled, the variable PERF_EXEC_PATH must be set to the location of the recompiled perf binaries.

Graph visualization and manipulation based on Mike Bostock's sample code for an interactive tool for creating directed graphs. Original source is at https://github.com/metacademy/directed-graph-creator and released under the MIT/X license.

Icons derived from the "White Olive Collection" created by Breezi released under the Creative Commons BY license.

Using Perf with Turbo

In order to generate perf data that matches exactly with the turbofan trace, you must use either a debug build of v8 or a release build with the flag 'disassembler=on'. This flag ensures that the '--trace-turbo' will output the necessary disassembly for linking with the perf profile.

The basic example of generating the required data is as follows:

perf record -k mono /path/to/d8 --turbo --trace-turbo --perf-prof main.js
perf inject -j -i perf.data -o perf.data.jitted
perf script -i perf.data.jitted -s turbolizer-perf.py turbo-main.json

These commands combined will run and profile d8, merge the output into a single 'perf.data.jitted' file, then take the event data from that and link them to the disassembly in the 'turbo-main.json'. Note that, as above, the output of the script command must be piped to a file for uploading to turbolizer.

There are many options that can be added to the first command, for example '-e' can be used to specify the counting of specific events (default: cycles), as well as '--cpu' to specify which CPU to sample.