[tools] Update ic-explorer.html
- support new v8.log-based source - fix function name resolution from v8.log - simplify displaying and add direct links to source files Change-Id: Ice1acdd9ebaefb27387fecc5446b973bf323dbcc NOTRY=true Change-Id: Ice1acdd9ebaefb27387fecc5446b973bf323dbcc Reviewed-on: https://chromium-review.googlesource.com/474824 Commit-Queue: Camillo Bruni <cbruni@chromium.org> Reviewed-by: Igor Sheludko <ishell@chromium.org> Cr-Commit-Position: refs/heads/master@{#44579}
This commit is contained in:
Camillo Bruni
Commit Bot
parent
88732c8834
commit
6593b74a02
@ -6,25 +6,35 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
|
||||
|
||||
<head>
|
||||
<style>
|
||||
html {
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.entry-details {}
|
||||
|
||||
.entry-details TD {}
|
||||
|
||||
.details {
|
||||
width: 2em;
|
||||
border: 1px black dotted;
|
||||
width: 0.1em;
|
||||
}
|
||||
|
||||
.details span {
|
||||
padding: 0 0.4em 0 0.4em;
|
||||
background-color: black;
|
||||
color: white;
|
||||
border-radius: 25px;
|
||||
text-align: center;
|
||||
cursor: -webkit-zoom-in;
|
||||
}
|
||||
|
||||
.count {
|
||||
text-align: right;
|
||||
width: 5em;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.percentage {
|
||||
text-align: right;
|
||||
width: 5em;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.key {
|
||||
@ -36,110 +46,112 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
|
||||
padding: 0.5em 0 0.2em 0;
|
||||
}
|
||||
</style>
|
||||
<script src="./splaytree.js" type="text/javascript"></script>
|
||||
<script src="./codemap.js" type="text/javascript"></script>
|
||||
<script src="./csvparser.js" type="text/javascript"></script>
|
||||
<script src="./consarray.js" type="text/javascript"></script>
|
||||
<script src="./profile.js" type="text/javascript"></script>
|
||||
<script src="./profile_view.js" type="text/javascript"></script>
|
||||
<script src="./logreader.js" type="text/javascript"></script>
|
||||
<script src="./ic-processor.js" type="text/javascript"></script>
|
||||
<script src="./SourceMap.js" type="text/javascript"></script>
|
||||
|
||||
<script>
|
||||
"use strict"
|
||||
var entries = [];
|
||||
let entries = [];
|
||||
|
||||
let properties = ['type', 'category', 'functionName', 'filePosition',
|
||||
'state', 'key', 'map', 'reason', 'file',
|
||||
];
|
||||
|
||||
// For compatiblity with console scripts:
|
||||
print = console.log;
|
||||
|
||||
class CustomIcProcessor extends IcProcessor {
|
||||
constructor() {
|
||||
super();
|
||||
this.entries = [];
|
||||
}
|
||||
|
||||
functionName(pc) {
|
||||
let entry = this.profile_.findEntry(pc);
|
||||
return this.formatName(entry);
|
||||
}
|
||||
|
||||
processPropertyIC(type, pc, line, column, old_state, new_state, map, key,
|
||||
modifier, slow_reason) {
|
||||
let fnName = this.functionName(pc);
|
||||
this.entries.push(new Entry(type, fnName, line, column, key,
|
||||
old_state, new_state, map, slow_reason));
|
||||
|
||||
}
|
||||
|
||||
processCompareIC(pc, line, column, stub, op, old_left, old_right,
|
||||
old_state, new_left, new_right, new_state) {
|
||||
let fnName = this.functionName(pc);
|
||||
this.entries.push(new Entry("CompareIC", fnName, line, column, name,
|
||||
old_state, new_state));
|
||||
}
|
||||
|
||||
processBinaryOpIC(pc, line, column, stub, old_state, new_state,
|
||||
allocation_site) {
|
||||
let fnName = this.functionName(pc);
|
||||
this.entries.push(new Entry("BinaryOpIc", fnName, line, column, name,
|
||||
old_state, new_state));
|
||||
|
||||
}
|
||||
|
||||
processToBooleanICfunction(pc, line, column, stub, old_state, new_state) {
|
||||
let fnName = this.functionName(pc);
|
||||
this.entries.push(new Entry("ToBooleanIC", fnName, line, column, name,
|
||||
old_state, new_state));
|
||||
}
|
||||
|
||||
processPatchIC(pc, test, delta) {
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
var properties = ['type', 'category', 'file', 'filePosition', 'state',
|
||||
'key', 'isNative', 'map', 'propertiesMode', 'numberOfOwnProperties',
|
||||
'instanceType'
|
||||
]
|
||||
|
||||
class Entry {
|
||||
constructor(id, line) {
|
||||
this.id = id;
|
||||
this.line = line;
|
||||
var parts = line.split(" ");
|
||||
if (parts.length < 6) return
|
||||
this.isValid = false;
|
||||
if (parts[0][0] !== "[") return;
|
||||
if (parts[1] === "patching") return;
|
||||
this.type = parts[0].substr(1);
|
||||
this.category = "unknown";
|
||||
this.map = "unknown";
|
||||
this.propertiesMode = "unknown";
|
||||
this.numberOfOwnProperties = 0;
|
||||
this.instanceType = "unknown";
|
||||
constructor(type, fn_file, line, column, key, oldState, newState,
|
||||
map, reason, additional) {
|
||||
this.type = type;
|
||||
this.category = "other";
|
||||
if (this.type.indexOf("Store") !== -1) {
|
||||
this.category = "Store";
|
||||
} else if (this.type.indexOf("Load") !== -1) {
|
||||
this.category = "Load";
|
||||
}
|
||||
if (this.type.length == 0) return;
|
||||
if (this.type.indexOf('BinaryOpIC(') === 0) {
|
||||
this.type = "BinaryOpIC";
|
||||
var split = parts[0].split('(');
|
||||
this.state = "(" + split[1] + " => " + parts[2];
|
||||
var offset = this.parsePositionAndFile(parts, 6);
|
||||
if (offset == -1) return
|
||||
if (this.file === undefined) return
|
||||
this.file = this.file.slice(0, -1);
|
||||
} else {
|
||||
var offset = this.parsePositionAndFile(parts, 2);
|
||||
if (offset == -1) return
|
||||
this.state = parts[++offset];
|
||||
var mapPart = parts[offset + 1];
|
||||
if (mapPart !== undefined && mapPart.startsWith("map=")) {
|
||||
if (mapPart[4] == "(") {
|
||||
if (mapPart.endsWith(")")) {
|
||||
this.map = mapPart.substr(5, mapPart.length-6);
|
||||
} else {
|
||||
this.map = mapPart.substr(5);
|
||||
}
|
||||
offset++;
|
||||
offset = this.parseMapProperties(parts, offset);
|
||||
} else {
|
||||
this.map = mapPart.substr(4);
|
||||
offset++;
|
||||
}
|
||||
if (this.map == "(nil)") this.map = "unknown";
|
||||
}
|
||||
if (this.type !== "CompareIC") {
|
||||
// if there is no address we have a smi key
|
||||
var address = parts[++offset];
|
||||
if (address !== undefined && address.indexOf("0x") === 0) {
|
||||
this.key = parts.slice(++offset).join(" ");
|
||||
} else {
|
||||
this.key = address;
|
||||
}
|
||||
}
|
||||
}
|
||||
this.filePosition = this.file + " " + this.position;
|
||||
if (this.key) {
|
||||
var isStringKey = false
|
||||
if (this.key.indexOf("<String[") === 0) {
|
||||
isStringKey = true;
|
||||
this.key = "\"" + this.key.slice(this.key.indexOf(']') + 3);
|
||||
} else if (this.key.indexOf("<") === 0) {
|
||||
this.key = this.key.slice(1);
|
||||
}
|
||||
if (this.key.endsWith(">]")) {
|
||||
this.key = this.key.slice(0, -2);
|
||||
} else if (this.key.endsWith("]")) {
|
||||
this.key = this.key.slice(0, -1);
|
||||
}
|
||||
if (isStringKey) {
|
||||
this.key = this.key + "\"";
|
||||
}
|
||||
}
|
||||
this.isValid = true;
|
||||
let parts = fn_file.split(" ");
|
||||
this.functionName = parts[0];
|
||||
this.file = parts[1];
|
||||
let position = line + ":" + column;
|
||||
this.filePosition = this.file + ":" + position;
|
||||
this.oldState = oldState;
|
||||
this.newState = newState;
|
||||
this.state = this.oldState + " → " + this.newState;
|
||||
this.key = key;
|
||||
this.map = map.toString(16);
|
||||
this.reason = reason;
|
||||
this.additional = additional;
|
||||
}
|
||||
|
||||
parseMapProperties(parts, offset) {
|
||||
var next = parts[++offset];
|
||||
let next = parts[++offset];
|
||||
if (!next.startsWith('dict')) return offset;
|
||||
this.propertiesMode =
|
||||
next.substr(5) == "0" ? "fast" : "slow";
|
||||
this.numberOfOwnProperties = parts[++offset].substr(4);
|
||||
next.substr(5) == "0" ? "fast" : "slow";
|
||||
this.numberOfOwnProperties = parts[++offset].substr(4);
|
||||
next = parts[++offset];
|
||||
this.instanceType = next.substr(5, next.length-6);
|
||||
this.instanceType = next.substr(5, next.length - 6);
|
||||
return offset;
|
||||
}
|
||||
|
||||
parsePositionAndFile(parts, start) {
|
||||
// find the position of 'at' in the parts array.
|
||||
var offset = start;
|
||||
for (var i = start + 1; i < parts.length; i++) {
|
||||
let offset = start;
|
||||
for (let i = start + 1; i < parts.length; i++) {
|
||||
offset++;
|
||||
if (parts[i] == 'at') break;
|
||||
}
|
||||
@ -154,30 +166,17 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
|
||||
}
|
||||
|
||||
function loadFile() {
|
||||
var files = document.getElementById("uploadInput").files;
|
||||
let files = document.getElementById("uploadInput").files;
|
||||
|
||||
var file = files[0];
|
||||
var reader = new FileReader();
|
||||
let file = files[0];
|
||||
let reader = new FileReader();
|
||||
|
||||
reader.onload = function(evt) {
|
||||
entries = [];
|
||||
var end = this.result.length;
|
||||
var current = 0;
|
||||
var next = 0;
|
||||
var line;
|
||||
var i = 0;
|
||||
var entry;
|
||||
while (current < end) {
|
||||
next = this.result.indexOf("\n", current);
|
||||
if (next === -1) break;
|
||||
i++;
|
||||
line = this.result.substring(current, next);
|
||||
current = next + 1;
|
||||
entry = new Entry(i, line);
|
||||
if (entry.isValid) entries.push(entry);
|
||||
}
|
||||
let icProcessor = new CustomIcProcessor();
|
||||
icProcessor.processString(this.result);
|
||||
entries = icProcessor.entries;
|
||||
|
||||
document.getElementById("count").innerHTML = i;
|
||||
document.getElementById("count").innerHTML = entries.length;
|
||||
updateTable();
|
||||
}
|
||||
reader.readAsText(file);
|
||||
@ -202,8 +201,8 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
|
||||
|
||||
createSubGroups() {
|
||||
this.groups = {};
|
||||
for (var i = 0; i < properties.length; i++) {
|
||||
var subProperty = properties[i];
|
||||
for (let i = 0; i < properties.length; i++) {
|
||||
let subProperty = properties[i];
|
||||
if (this.property == subProperty) continue;
|
||||
this.groups[subProperty] = groupBy(this.entries, subProperty);
|
||||
}
|
||||
@ -211,23 +210,22 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
|
||||
}
|
||||
|
||||
function groupBy(entries, property) {
|
||||
var accumulator = {};
|
||||
accumulator.__proto__ = null;
|
||||
var length = entries.length;
|
||||
for (var i = 0; i < length; i++) {
|
||||
var entry = entries[i];
|
||||
var key = entry[property];
|
||||
let accumulator = Object.create(null);
|
||||
let length = entries.length;
|
||||
for (let i = 0; i < length; i++) {
|
||||
let entry = entries[i];
|
||||
let key = entry[property];
|
||||
if (accumulator[key] == undefined) {
|
||||
accumulator[key] = new Group(property, key, entry)
|
||||
} else {
|
||||
var group = accumulator[key];
|
||||
let group = accumulator[key];
|
||||
if (group.entries == undefined) console.log([group, entry]);
|
||||
group.add(entry)
|
||||
}
|
||||
}
|
||||
var result = []
|
||||
for (var key in accumulator) {
|
||||
var group = accumulator[key];
|
||||
let result = []
|
||||
for (let key in accumulator) {
|
||||
let group = accumulator[key];
|
||||
group.percentage = Math.round(group.count / length * 100 * 100) / 100;
|
||||
result.push(group);
|
||||
}
|
||||
@ -242,20 +240,28 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
|
||||
function escapeHtml(unsafe) {
|
||||
if (!unsafe) return "";
|
||||
return unsafe.toString()
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, """)
|
||||
.replace(/'/g, "'");
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, """)
|
||||
.replace(/'/g, "'");
|
||||
}
|
||||
|
||||
function processValue(unsafe) {
|
||||
if (!unsafe) return "";
|
||||
if (!unsafe.startsWith("http")) return escapeHtml(unsafe);
|
||||
let a = document.createElement("a");
|
||||
a.href = unsafe;
|
||||
a.textContent = unsafe;
|
||||
return a;
|
||||
}
|
||||
|
||||
function updateTable() {
|
||||
var select = document.getElementById("group-key");
|
||||
var key = select.options[select.selectedIndex].text;
|
||||
console.log(key);
|
||||
var tableBody = document.getElementById("table-body");
|
||||
let select = document.getElementById("group-key");
|
||||
let key = select.options[select.selectedIndex].text;
|
||||
let tableBody = document.getElementById("table-body");
|
||||
removeAllChildren(tableBody);
|
||||
var groups = groupBy(entries, key, true);
|
||||
let groups = groupBy(entries, key, true);
|
||||
display(groups, tableBody);
|
||||
}
|
||||
|
||||
@ -270,30 +276,34 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
|
||||
}
|
||||
|
||||
function display(entries, parent) {
|
||||
var fragment = document.createDocumentFragment();
|
||||
let fragment = document.createDocumentFragment();
|
||||
|
||||
function td(tr, content, className) {
|
||||
var td = document.createElement("td");
|
||||
td.innerHTML = content;
|
||||
let td = document.createElement("td");
|
||||
if (typeof content == "object") {
|
||||
td.appendChild(content);
|
||||
} else {
|
||||
td.innerHTML = content;
|
||||
}
|
||||
td.className = className
|
||||
tr.appendChild(td);
|
||||
return td
|
||||
}
|
||||
var max = Math.min(1000, entries.length)
|
||||
for (var i = 0; i < max; i++) {
|
||||
var entry = entries[i];
|
||||
var tr = document.createElement("tr");
|
||||
let max = Math.min(1000, entries.length)
|
||||
for (let i = 0; i < max; i++) {
|
||||
let entry = entries[i];
|
||||
let tr = document.createElement("tr");
|
||||
tr.entry = entry;
|
||||
td(tr, '<span onclick="toggleDetails(this)">details</a>', 'details');
|
||||
td(tr, '<span onclick="toggleDetails(this)">ℹ</a>', 'details');
|
||||
td(tr, entry.percentage + "%", 'percentage');
|
||||
td(tr, entry.count, 'count');
|
||||
td(tr, escapeHtml(entry.key), 'key');
|
||||
td(tr, processValue(entry.key), 'key');
|
||||
fragment.appendChild(tr);
|
||||
}
|
||||
var omitted = entries.length - max;
|
||||
let omitted = entries.length - max;
|
||||
if (omitted > 0) {
|
||||
var tr = document.createElement("tr");
|
||||
var td = td(tr, 'Omitted ' + omitted + " entries.");
|
||||
let tr = document.createElement("tr");
|
||||
let td = td(tr, 'Omitted ' + omitted + " entries.");
|
||||
td.colSpan = 4;
|
||||
fragment.appendChild(tr);
|
||||
}
|
||||
@ -301,14 +311,14 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
|
||||
}
|
||||
|
||||
function displayDrilldown(entry, previousSibling) {
|
||||
var tr = document.createElement('tr');
|
||||
let tr = document.createElement('tr');
|
||||
tr.className = "entry-details";
|
||||
tr.style.display = "none";
|
||||
// indent by one td.
|
||||
tr.appendChild(document.createElement("td"));
|
||||
var td = document.createElement("td");
|
||||
let td = document.createElement("td");
|
||||
td.colSpan = 3;
|
||||
for (var key in entry.groups) {
|
||||
for (let key in entry.groups) {
|
||||
td.appendChild(displayDrilldownGroup(entry, key));
|
||||
}
|
||||
tr.appendChild(td);
|
||||
@ -317,28 +327,28 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
|
||||
}
|
||||
|
||||
function displayDrilldownGroup(entry, key) {
|
||||
var max = 20;
|
||||
var group = entry.groups[key];
|
||||
var div = document.createElement("div")
|
||||
let max = 20;
|
||||
let group = entry.groups[key];
|
||||
let div = document.createElement("div")
|
||||
div.className = 'drilldown-group-title'
|
||||
div.innerHTML = key + ' [top ' + max + ' out of ' + group.length + ']';
|
||||
var table = document.createElement("table");
|
||||
div.textContent = key + ' [top ' + max + ' out of ' + group.length + ']';
|
||||
let table = document.createElement("table");
|
||||
display(group.slice(0, max), table, false)
|
||||
div.appendChild(table);
|
||||
return div;
|
||||
}
|
||||
|
||||
function toggleDetails(node) {
|
||||
var tr = node.parentNode.parentNode;
|
||||
var entry = tr.entry;
|
||||
let tr = node.parentNode.parentNode;
|
||||
let entry = tr.entry;
|
||||
|
||||
// Create subgroup in-place if the don't exist yet.
|
||||
if (entry.groups === undefined) {
|
||||
entry.createSubGroups();
|
||||
displayDrilldown(entry, tr);
|
||||
}
|
||||
var details = tr.nextSibling;
|
||||
var display = details.style.display;
|
||||
let details = tr.nextSibling;
|
||||
let display = details.style.display;
|
||||
if (display != "none") {
|
||||
display = "none";
|
||||
} else {
|
||||
@ -348,9 +358,9 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
|
||||
}
|
||||
|
||||
function initGroupKeySelect() {
|
||||
var select = document.getElementById("group-key");
|
||||
for (var i in properties) {
|
||||
var option = document.createElement("option");
|
||||
let select = document.getElementById("group-key");
|
||||
for (let i in properties) {
|
||||
let option = document.createElement("option");
|
||||
option.text = properties[i];
|
||||
select.add(option);
|
||||
}
|
||||
@ -364,30 +374,29 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
|
||||
|
||||
<body onload="handleOnLoad()">
|
||||
<h1>
|
||||
<span style="color: #00FF00">I</span>
|
||||
<span style="color: #FF00FF">C</span>
|
||||
<span style="color: #00FFFF">E</span>
|
||||
</h1> Your IC-Explorer.
|
||||
<span style="color: #00FF00">I</span>
|
||||
<span style="color: #FF00FF">C</span>
|
||||
<span style="color: #00FFFF">E</span>
|
||||
</h1> Your IC-Explorer.
|
||||
|
||||
<div id="legend" style="padding-right: 200px">
|
||||
<div style="float:right; border-style: solid; border-width: 1px; padding:20px">
|
||||
0 uninitialized<br>
|
||||
. premonomorphic<br>
|
||||
1 monomorphic<br>
|
||||
^ recompute handler<br>
|
||||
P polymorphic<br>
|
||||
N megamorphic<br>
|
||||
G generic
|
||||
0 uninitialized<br>
|
||||
. premonomorphic<br>
|
||||
1 monomorphic<br>
|
||||
^ recompute handler<br>
|
||||
P polymorphic<br>
|
||||
N megamorphic<br>
|
||||
G generic
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Usage</h2> Run your script with <code>--trace_ic</code> and upload on this page:<br/>
|
||||
<code>/path/to/d8 --trace_ic your_script.js > trace.txt</code>
|
||||
<h2>Usage</h2> Run your script with <code>--trace_ic</code> and upload <code>v8.log</code> on this page:<br/>
|
||||
<code>/path/to/d8 --trace_ic your_script.js</code>
|
||||
<h2>Data</h2>
|
||||
<form name="fileForm">
|
||||
<p>
|
||||
<input id="uploadInput" type="file" name="files" onchange="loadFile();"> trace
|
||||
entries: <span id="count">0</span>
|
||||
<input id="uploadInput" type="file" name="files" onchange="loadFile();"> trace entries: <span id="count">0</span>
|
||||
</p>
|
||||
</form>
|
||||
<h2>Result</h2>
|
||||
|
||||
@ -36,7 +36,7 @@ function IcProcessor() {
|
||||
null, null, null];
|
||||
LogReader.call(this, {
|
||||
'code-creation': {
|
||||
parsers: [null, parseInt, parseInt, parseInt, null, 'var-args'],
|
||||
parsers: [null, parseInt, parseInt, parseInt, parseInt, null, 'var-args'],
|
||||
processor: this.processCodeCreation },
|
||||
'code-move': { parsers: [parseInt, parseInt],
|
||||
processor: this.processCodeMove },
|
||||
@ -92,8 +92,25 @@ IcProcessor.prototype.printError = function(str) {
|
||||
print(str);
|
||||
};
|
||||
|
||||
IcProcessor.prototype.processString = function(string) {
|
||||
var end = string.length;
|
||||
var current = 0;
|
||||
var next = 0;
|
||||
var line;
|
||||
var i = 0;
|
||||
var entry;
|
||||
while (current < end) {
|
||||
next = string.indexOf("\n", current);
|
||||
if (next === -1) break;
|
||||
i++;
|
||||
line = string.substring(current, next);
|
||||
current = next + 1;
|
||||
this.processLogLine(line);
|
||||
}
|
||||
}
|
||||
|
||||
IcProcessor.prototype.processLogFile = function(fileName) {
|
||||
this.collectEntries = true
|
||||
this.lastLogFileName_ = fileName;
|
||||
var line;
|
||||
while (line = readline()) {
|
||||
@ -111,16 +128,22 @@ IcProcessor.prototype.processLogFile = function(fileName) {
|
||||
print("PatchIC: " + this.PatchIC);
|
||||
};
|
||||
|
||||
IcProcessor.prototype.addEntry = function(entry) {
|
||||
this.entries.push(entry);
|
||||
}
|
||||
|
||||
IcProcessor.prototype.processCodeCreation = function(
|
||||
type, kind, start, size, name, maybe_func) {
|
||||
type, kind, timestamp, start, size, name, maybe_func) {
|
||||
name = this.deserializedEntriesNames_[start] || name;
|
||||
if (name.startsWith("onComplete")) {
|
||||
console.log(name);
|
||||
}
|
||||
if (maybe_func.length) {
|
||||
var funcAddr = parseInt(maybe_func[0]);
|
||||
var state = parseState(maybe_func[1]);
|
||||
this.profile_.addFuncCode(type, name, start, size, funcAddr, state);
|
||||
this.profile_.addFuncCode(type, name, timestamp, start, size, funcAddr, state);
|
||||
} else {
|
||||
this.profile_.addCode(type, name, start, size);
|
||||
this.profile_.addCode(type, name, timestamp, start, size);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user