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>

Libraries/WebSocket/RCTWebSocketExecutor.m

@@ -18,6 +18,7 @@
 #import "RCTSparseArray.h"
 #import "RCTUtils.h"
 #import "RCTSRWebSocket.h"
+#import "RCTProfile.h"
 
 typedef void (^RCTWSMessageCallback)(NSError *error, NSDictionary *reply);
 
@@ -109,11 +110,19 @@ RCT_EXPORT_MODULE()
 - (void)webSocket:(RCTSRWebSocket *)webSocket didReceiveMessage:(id)message
 {
   NSError *error = nil;
-  NSDictionary *reply = RCTJSONParse(message, &error);
-  NSNumber *messageID = reply[@"replyID"];
-  RCTWSMessageCallback callback = _callbacks[messageID];
-  if (callback) {
-    callback(error, reply);
+  NSDictionary *parsedMessage = RCTJSONParse(message, &error);
+
+  if ([parsedMessage objectForKey:@"method"]) {
+    NSString *methodName = parsedMessage[@"method"];
+    if ([methodName isEqual:@"requestMetrics"]) {
+      [self sendUsageMetrics];
+    }
+  } else if ([parsedMessage objectForKey:@"replyID"]) {
+    NSNumber *messageID = parsedMessage[@"replyID"];
+    RCTWSMessageCallback callback = _callbacks[messageID];
+    if (callback) {
+      callback(error, parsedMessage);
+    }
   }
 }
 
@@ -181,6 +190,21 @@ RCT_EXPORT_MODULE()
   }];
 }
 
+- (void)sendUsageMetrics
+{
+  NSDictionary *memoryUsage = RCTProfileGetMemoryUsage(YES);
+  NSNumber *cpuUsage = RCTProfileGetCPUUsage();
+
+  NSDictionary *message = @{
+                            @"method": @"usageMetrics",
+                            @"memoryUsage": memoryUsage,
+                            @"deviceCPUUsage": cpuUsage
+                            };
+
+  // TODO: handle errors
+  [self sendMessage:message waitForReply:^(NSError *socketError, NSDictionary *reply) {}];
+}
+
 - (void)injectJSONText:(NSString *)script asGlobalObjectNamed:(NSString *)objectName callback:(RCTJavaScriptCompleteBlock)onComplete
 {
   dispatch_async(_jsQueue, ^{

React/Base/RCTProfile.h

@@ -73,7 +73,24 @@ RCT_EXTERN void RCTProfileEndEvent(uint64_t tag,
                                    NSDictionary *args);
 
 /**
- * Collects the initial event information for the event and returns a reference ID
+ * Exposes memory usage metrics
+ */
+
+NSDictionary *RCTProfileGetMemoryUsage(BOOL);
+
+/**
+ * Exposes device cpu usage metrics - Note this does not include JS Runtime CPU usage
+ */
+
+NSNumber *RCTProfileGetCPUUsage(void);
+
+/**
+ * This pair of macros implicitly handle the event ID when beginning and ending
+ * an event, for both simplicity and performance reasons, this method is preferred
+ *
+ * NOTE: The EndEvent call has to be either, in the same scope of BeginEvent,
+ * or in a sub-scope, otherwise the ID stored by BeginEvent won't be accessible
+ * for EndEvent, in this case you may want to use the actual C functions.
  */
 RCT_EXTERN int RCTProfileBeginAsyncEvent(uint64_t tag,
                                          NSString *name,
@@ -139,6 +156,9 @@ RCT_EXTERN void RCTProfileUnhookModules(RCTBridge *);
 
 #define RCTProfileImmediateEvent(...)
 
+#define RCTProfileGetMemoryUsage(...)
+#define RCTProfileGetCPUUsage(...)
+
 #define RCTProfileBlock(block, ...) block
 
 #define RCTProfileHookModules(...)

React/Base/RCTProfile.m

@@ -72,7 +72,7 @@ static NSString *RCTProfileMemory(vm_size_t memory)
   return [NSString stringWithFormat:@"%.2lfmb", mem];
 }
 
-static NSDictionary *RCTProfileGetMemoryUsage(void)
+NSDictionary *RCTProfileGetMemoryUsage(BOOL raw)
 {
   struct task_basic_info info;
   mach_msg_type_number_t size = sizeof(info);
@@ -81,14 +81,76 @@ static NSDictionary *RCTProfileGetMemoryUsage(void)
                                  (task_info_t)&info,
                                  &size);
   if( kerr == KERN_SUCCESS ) {
+    vm_size_t vs = info.virtual_size;
+    vm_size_t rs = info.resident_size;
     return @{
       @"suspend_count": @(info.suspend_count),
-      @"virtual_size": RCTProfileMemory(info.virtual_size),
-      @"resident_size": RCTProfileMemory(info.resident_size),
+      @"virtual_size": raw ? @(vs) : RCTProfileMemory(vs),
+      @"resident_size": raw ? @(rs) : RCTProfileMemory(rs),
     };
   } else {
     return @{};
   }
+
+}
+
+NSNumber *RCTProfileGetCPUUsage(void)
+{
+  kern_return_t kr;
+  task_info_data_t tinfo;
+  mach_msg_type_number_t task_info_count;
+
+  task_info_count = TASK_INFO_MAX;
+  kr = task_info(mach_task_self(), TASK_BASIC_INFO, (task_info_t)tinfo, &task_info_count);
+  if (kr != KERN_SUCCESS) {
+    return nil;
+  }
+
+  thread_array_t thread_list;
+  mach_msg_type_number_t thread_count;
+
+  thread_info_data_t thinfo;
+  mach_msg_type_number_t thread_info_count;
+
+  thread_basic_info_t basic_info_th;
+
+  // get threads in the task
+  kr = task_threads(mach_task_self(), &thread_list, &thread_count);
+  if (kr != KERN_SUCCESS) {
+    return nil;
+  }
+
+  long tot_sec = 0;
+  long tot_usec = 0;
+  float tot_cpu = 0;
+  unsigned j;
+
+  for (j = 0; j < thread_count; j++) {
+    thread_info_count = THREAD_INFO_MAX;
+    kr = thread_info(thread_list[j], THREAD_BASIC_INFO,
+                     (thread_info_t)thinfo, &thread_info_count);
+    if (kr != KERN_SUCCESS) {
+      return nil;
+    }
+
+    basic_info_th = (thread_basic_info_t)thinfo;
+
+    if (!(basic_info_th->flags & TH_FLAGS_IDLE)) {
+      tot_sec = tot_sec + basic_info_th->user_time.seconds + basic_info_th->system_time.seconds;
+      tot_usec = tot_usec + basic_info_th->system_time.microseconds + basic_info_th->system_time.microseconds;
+      tot_cpu = tot_cpu + basic_info_th->cpu_usage / (float)TH_USAGE_SCALE * 100.0;
+    }
+
+  } // for each thread
+
+  kr = vm_deallocate(mach_task_self(), (vm_offset_t)thread_list, thread_count * sizeof(thread_t));
+
+  if( kr == KERN_SUCCESS ) {
+    return @(tot_cpu);
+  } else {
+    return nil;
+
+  }
 }
 
 static NSDictionary *RCTProfileMergeArgs(NSDictionary *args0, NSDictionary *args1)
@@ -369,7 +431,7 @@ void RCTProfileImmediateEvent(
       @"ts": RCTProfileTimestamp(CACurrentMediaTime()),
       @"scope": @(scope),
       @"ph": @"i",
-      @"args": RCTProfileGetMemoryUsage(),
+      @"args": RCTProfileGetMemoryUsage(NO),
     );
   );
 }

packager/debugger.html

@@ -14,8 +14,197 @@
 <!-- Fake favicon, to avoid extra request to server -->
 <link rel="icon" href="data:;base64,iVBORw0KGgo=">
 <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() {
+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');
 window.localStorage.removeItem('sessionID');
@@ -36,6 +225,8 @@ window.addEventListener('load', function () {
 // Alias native implementations needed by the debugger before platform-specific
 // implementations are loaded into the global namespace
 var debuggerSetTimeout = window.setTimeout;
+var debuggerSetInterval = window.setInterval;
+var debuggerClearInterval = window.clearInterval;
 var DebuggerWebSocket = window.WebSocket;
 
 function setStatus(status) {
@@ -59,6 +250,19 @@ var messageHandlers = {
     loadScript(message.url, sendReply.bind(null, null));
   },
   '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;
     try {
       if (window && window.require) {
@@ -68,11 +272,32 @@ var messageHandlers = {
     } finally {
       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() {
-  var ws = new DebuggerWebSocket('ws://' + window.location.host + '/debugger-proxy');
+  ws = new DebuggerWebSocket('ws://' + window.location.host + '/debugger-proxy');
 
   ws.onopen = function() {
     if (sessionID) {
@@ -81,6 +306,9 @@ function connectToDebuggerProxy() {
     } else {
       setStatus('Waiting, press <span class="shortcut">⌘R</span> in simulator to reload and connect.');
     }
+
+    // start collecting metrics
+    toggleMetrics(true);
   };
 
   ws.onmessage = function(message) {
@@ -102,6 +330,9 @@ function connectToDebuggerProxy() {
     sessionID = null;
     window.localStorage.removeItem('sessionID');
     debuggerSetTimeout(connectToDebuggerProxy, 100);
+
+    // stop collecting metrics
+    toggleMetrics(false);
   };
 }
 
@@ -120,9 +351,9 @@ function loadScript(src, callback) {
 <style type="text/css">
   body {
     font-size: large;
-    margin: 0;
+    margin: 20px;
     padding: 0;
-    font-family: Helvetica, Verdana, sans-serif;
+    font-family: Helvetica Neue, Helvetica, Verdana, sans-serif;
     font-weight: 200;
   }
   .shortcut {
@@ -161,6 +392,43 @@ function loadScript(src, callback) {
   .content {
     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>
 </head>
 <body>
@@ -179,7 +447,31 @@ function loadScript(src, callback) {
       React Native JS code runs inside this Chrome tab.
     </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>
 </body>
 </html>

packager/packager.js

@@ -203,6 +203,13 @@ function getDevToolsLauncher(options) {
         console.warn(stderr);
       });
       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 {
       next();
     }