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 6debfce374
commit 46c6cde947
8 changed files with 16366 additions and 15 deletions

View File

@@ -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, ^{