UI CPU and memory utilization graphs in Chrome debugging mode

Summary:
Chrome debugging UI is currently only showing connection state and logs in the console, leaving room for plenty of interesting information.

I've pushed the UI (using the same convention set by FPS -- UI/JS) CPU and memory utilization data over the debug Websocket and tapped into the existing stream of JS calls that get ran in V8.

The number of JS calls in a time interval is counted for all sub calls in a batch
https://github.com/hharnisc/react-native/blob/master/packager/debugger.html#L150

The last 5 batches of JS calls are displayed in a list format.

<img width="951" alt="screen shot 2015-07-19 at 7 34 00 pm" src="https://cloud.githubusercontent.com/assets/1388079/8769257/edc42f70-2e4d-11e5-8813-e86ef530a446.png">

Charts are created with [Chart.JS](https://github.com/nnnick/Chart.js) (MIT licensed).
Closes https://github.com/facebook/react-native/pull/2050
Github Author: Harrison Harnisch <hharnisc@gmail.com>
This commit is contained in:
Harrison Harnisch 2015-08-21 00:57:43 -07:00
parent 1d7b858d74
commit ef7dc94907
5 changed files with 16250 additions and 5 deletions

View File

@ -14,8 +14,197 @@
<!-- Fake favicon, to avoid extra request to server --> <!-- Fake favicon, to avoid extra request to server -->
<link rel="icon" href="data:;base64,iVBORw0KGgo="> <link rel="icon" href="data:;base64,iVBORw0KGgo=">
<title>React Native Debugger</title> <title>React Native Debugger</title>
<script> <script src="/debugger-ui/static/Chart.min.js"></script>
<script src="/debugger-ui/static/react-0.13.3.min.js"></script>
<script src="/debugger-ui/static/JSXTransformer-0.13.3.js"></script>
<script type="text/jsx">
(function() { (function() {
var ws;
var metricsIntervalId, metricsCollectionEnabled;
var cpuChart, memoryChart, jsCallsChart, latestLabel;
var batchedJSCalls = [];
var numJsCalls = 0;
var canvas = document.getElementById('cpu-utilization');
var ctx = canvas.getContext('2d');
var memoryCanvas = document.getElementById('memory-utilization');
var memoryCtx = memoryCanvas.getContext('2d');
var jsCallsCanvas = document.getElementById("js-calls-graph");
var jsCallsCtx = jsCallsCanvas.getContext('2d');
var numPoints = 20;
var labels = [];
var data = [];
for (var i = 1; i < numPoints + 1; i++) {
labels.push('');
data.push(0);
}
var cpuStartingData = {
labels: labels,
datasets: [
{
fillColor: "rgba(113,188,120,0.2)",
strokeColor: "rgba(113,188,120,1)",
pointColor: "rgba(113, 188,120,1)",
pointStrokeColor: "#fff",
data: data
}
]
};
var memoryStartingData = {
labels: labels,
datasets: [
{
label: "Resident Memory (MB)",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: data
},
{
label: "Virtual Memory (MB)",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: data
}
]
};
var jsCallsStartingData = {
labels: labels,
datasets: [
{
fillColor: "rgba(238,210,2,0.2)",
strokeColor: "rgba(238,210,2,1)",
pointColor: "rgba(238,210,2,1)",
pointStrokeColor: "#fff",
data: data
}
]
};
latestLabel = cpuStartingData.labels[numPoints - 1];
// Reduce the animation steps for demo clarity.
cpuChart = new Chart(ctx).Line(cpuStartingData, {
scaleOverride: true,
scaleSteps: 10,
scaleStepWidth: 10,
scaleStartValue: 0,
animation: false
});
memoryChart = new Chart(memoryCtx).Line(memoryStartingData, {
animation: false
});
document.getElementById("memory-legend").innerHTML = memoryChart.generateLegend();
jsCallsChart = new Chart(jsCallsCtx).Bar(jsCallsStartingData, {
animation: false
});
function toggleMetrics(enable) {
if (metricsIntervalId) {
debuggerClearInterval(metricsIntervalId);
}
if (enable) {
// request metrics once every second
metricsIntervalId = debuggerSetInterval(function () {
ws.send(JSON.stringify({method: "requestMetrics"}));
}, 1000);
}
metricsCollectionEnabled = enable;
}
var MetricsToggle = React.createClass({
handleClick: function () {
var enabled = !this.props.metricsEnabled;
this.setProps({
metricsEnabled:enabled
});
toggleMetrics(enabled);
},
buttonText: function () {
if (this.props.metricsEnabled) {
return "Disable Metrics Collection"
} else {
return "Enable Metrics Collection"
}
},
render: function() {
return (
<input type="button" onClick={this.handleClick} value={this.buttonText()} />
);
}
});
React.render(
<MetricsToggle metricsEnabled={true}/>,
document.getElementById('metrics-toggle')
);
var JSCall = React.createClass({
render: function() {
return (
<ul>
{this.props.data.map(function (subCall) {
return (
<li>{subCall.method}<em>"{subCall.args[0]}"</em></li>
)
})}
</ul>
);
}
});
var JSCallsList = React.createClass({
render: function() {
return (
<ul>
{this.props.data.map(function (batch) {
if (!batch.arguments.length) {
return (
<li>
{batch.moduleMethod}
</li>
)
} else {
return (
<li>
{batch.moduleMethod}
<JSCall data={batch.arguments[0]}></JSCall>
</li>
)
}
})}
</ul>
);
}
});
var jsCallsComponent = React.render(
<JSCallsList data={[]}/>,
document.getElementById('js-calls')
);
function countJSCalls(batch) {
return batch.arguments.reduce(function (p, c) {
return p + c.length;
}, 0);
}
var sessionID = window.localStorage.getItem('sessionID'); var sessionID = window.localStorage.getItem('sessionID');
window.localStorage.removeItem('sessionID'); window.localStorage.removeItem('sessionID');
@ -36,6 +225,8 @@ window.addEventListener('load', function () {
// Alias native implementations needed by the debugger before platform-specific // Alias native implementations needed by the debugger before platform-specific
// implementations are loaded into the global namespace // implementations are loaded into the global namespace
var debuggerSetTimeout = window.setTimeout; var debuggerSetTimeout = window.setTimeout;
var debuggerSetInterval = window.setInterval;
var debuggerClearInterval = window.clearInterval;
var DebuggerWebSocket = window.WebSocket; var DebuggerWebSocket = window.WebSocket;
function setStatus(status) { function setStatus(status) {
@ -59,6 +250,19 @@ var messageHandlers = {
loadScript(message.url, sendReply.bind(null, null)); loadScript(message.url, sendReply.bind(null, null));
}, },
'executeJSCall': function(message, sendReply) { 'executeJSCall': function(message, sendReply) {
if(metricsCollectionEnabled) {
numJsCalls += countJSCalls(message);
batchedJSCalls.unshift(message);
// show the last 5 batches
if (batchedJSCalls.length > 5) {
batchedJSCalls.pop();
}
jsCallsComponent.setProps({
data: batchedJSCalls
});
}
var returnValue = null; var returnValue = null;
try { try {
if (window && window.require) { if (window && window.require) {
@ -68,11 +272,32 @@ var messageHandlers = {
} finally { } finally {
sendReply(JSON.stringify(returnValue)); sendReply(JSON.stringify(returnValue));
} }
},
'usageMetrics': function (message) {
cpuChart.addData([message.deviceCPUUsage], '');
// Remove the first point so we dont just add values forever
cpuChart.removeData();
memoryChart.addData([
convertToMB(message.memoryUsage.resident_size),
convertToMB(message.memoryUsage.virtual_size)
], '');
// Remove the first point so we dont just add values forever
memoryChart.removeData();
jsCallsChart.addData([numJsCalls], '');
// Remove the first point so we dont just add values forever
jsCallsChart.removeData();
numJsCalls = 0;
} }
}; };
function convertToMB(val) {
return ((val / 1024) / 1024);
}
function connectToDebuggerProxy() { function connectToDebuggerProxy() {
var ws = new DebuggerWebSocket('ws://' + window.location.host + '/debugger-proxy'); ws = new DebuggerWebSocket('ws://' + window.location.host + '/debugger-proxy');
ws.onopen = function() { ws.onopen = function() {
if (sessionID) { if (sessionID) {
@ -81,6 +306,9 @@ function connectToDebuggerProxy() {
} else { } else {
setStatus('Waiting, press <span class="shortcut">⌘R</span> in simulator to reload and connect.'); setStatus('Waiting, press <span class="shortcut">⌘R</span> in simulator to reload and connect.');
} }
// start collecting metrics
toggleMetrics(true);
}; };
ws.onmessage = function(message) { ws.onmessage = function(message) {
@ -102,6 +330,9 @@ function connectToDebuggerProxy() {
sessionID = null; sessionID = null;
window.localStorage.removeItem('sessionID'); window.localStorage.removeItem('sessionID');
debuggerSetTimeout(connectToDebuggerProxy, 100); debuggerSetTimeout(connectToDebuggerProxy, 100);
// stop collecting metrics
toggleMetrics(false);
}; };
} }
@ -120,9 +351,9 @@ function loadScript(src, callback) {
<style type="text/css"> <style type="text/css">
body { body {
font-size: large; font-size: large;
margin: 0; margin: 20px;
padding: 0; padding: 0;
font-family: Helvetica, Verdana, sans-serif; font-family: Helvetica Neue, Helvetica, Verdana, sans-serif;
font-weight: 200; font-weight: 200;
} }
.shortcut { .shortcut {
@ -161,6 +392,43 @@ function loadScript(src, callback) {
.content { .content {
padding: 10px; padding: 10px;
} }
.legend ul {
list-style: none;
margin: 0;
padding: 0;
font-size: 14px;
margin-top : 20px;
}
.legend li {
display: inline-block;
padding-left: 10px;
}
.legend span {
display: block;
width: 14px;
height: 14px;
border-radius: 7px;
float: left;
margin-top: 1px;
margin-right: 7px;
}
.legend {
margin-bottom: 40px;
}
.js-calls {
font-size: small;
}
.toggle-button {
margin-top: 15px;
}
.graph-column {
width: "49%";
display: inline-block;
}
.js-calls-column {
vertical-align:top;
margin-left: 20px;
}
</style> </style>
</head> </head>
<body> <body>
@ -179,7 +447,31 @@ function loadScript(src, callback) {
React Native JS code runs inside this Chrome tab. React Native JS code runs inside this Chrome tab.
</p> </p>
<p>Press <span class="shortcut">⌘⌥J</span> to open Developer Tools. Enable <a href="http://stackoverflow.com/a/17324511/232122" target="_blank">Pause On Caught Exceptions</a> for a better debugging experience.</p> <p>Press <span class="shortcut">⌘⌥J</span> to open Developer Tools. Enable <a href="http://stackoverflow.com/a/17324511/232122" target="_blank">Pause On Caught Exceptions</a> for a better debugging experience.</p>
<p>Status: <span id="status">Loading...</span></p> <div>Status: <span id="status">Loading</span></div>
<div id="metrics-toggle" class="toggle-button"></div>
<div class="graph-column">
<div>
<h2>UI CPU Utilization</h2>
<div>
<canvas id="cpu-utilization" width="400" height="250"></canvas>
</div>
</div>
<div>
<h2>Memory Utilization</h2>
<div>
<canvas id="memory-utilization" width="400" height="250"></canvas>
</div>
<div id="memory-legend" class="legend"></div>
</div>
</div>
<div class="graph-column js-calls-column">
<h2>JS Calls</h2>
<div>
<canvas id="js-calls-graph" width="400" height="250"></canvas>
</div>
<div id="js-calls" class="js-calls">
</div>
</div> </div>
</body> </body>
</html> </html>

View File

@ -203,6 +203,13 @@ function getDevToolsLauncher(options) {
console.warn(stderr); console.warn(stderr);
}); });
res.end('OK'); res.end('OK');
} else if (req.url.indexOf('/debugger-ui/static/') > -1) {
var fileName = req.url.replace('/debugger-ui/static/', '');
// NOTE: this works for a small number or external dependencies,
// but will need a better solution as the project expands
var chartPath = path.join(__dirname + '/static/' + fileName);
res.writeHead(200, {'Content-Type': 'application/javascript'});
fs.createReadStream(chartPath).pipe(res);
} else { } else {
next(); next();
} }

11
static/Chart.min.js vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

16
static/react-0.13.3.min.js vendored Normal file

File diff suppressed because one or more lines are too long