mirror of
https://github.com/status-im/react-native.git
synced 2025-02-25 15:45:32 +00:00
[ReactNative] Unbreak debugger
This commit is contained in:
Alex Kotliarskyi
parent
3643c127a8
commit
8d07df4a22
@ -18,7 +18,6 @@
|
||||
#import "RCTSparseArray.h"
|
||||
#import "RCTUtils.h"
|
||||
#import "RCTSRWebSocket.h"
|
||||
#import "RCTProfile.h"
|
||||
|
||||
typedef void (^RCTWSMessageCallback)(NSError *error, NSDictionary *reply);
|
||||
|
||||
@ -110,19 +109,11 @@ RCT_EXPORT_MODULE()
|
||||
- (void)webSocket:(RCTSRWebSocket *)webSocket didReceiveMessage:(id)message
|
||||
{
|
||||
NSError *error = nil;
|
||||
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);
|
||||
}
|
||||
NSDictionary *reply = RCTJSONParse(message, &error);
|
||||
NSNumber *messageID = reply[@"replyID"];
|
||||
RCTWSMessageCallback callback = _callbacks[messageID];
|
||||
if (callback) {
|
||||
callback(error, reply);
|
||||
}
|
||||
}
|
||||
|
||||
@ -190,21 +181,6 @@ 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, ^{
|
||||
|
||||
@ -73,24 +73,7 @@ RCT_EXTERN void RCTProfileEndEvent(uint64_t tag,
|
||||
NSDictionary *args);
|
||||
|
||||
/**
|
||||
* 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.
|
||||
* Collects the initial event information for the event and returns a reference ID
|
||||
*/
|
||||
RCT_EXTERN int RCTProfileBeginAsyncEvent(uint64_t tag,
|
||||
NSString *name,
|
||||
@ -156,9 +139,6 @@ RCT_EXTERN void RCTProfileUnhookModules(RCTBridge *);
|
||||
|
||||
#define RCTProfileImmediateEvent(...)
|
||||
|
||||
#define RCTProfileGetMemoryUsage(...)
|
||||
#define RCTProfileGetCPUUsage(...)
|
||||
|
||||
#define RCTProfileBlock(block, ...) block
|
||||
|
||||
#define RCTProfileHookModules(...)
|
||||
|
||||
@ -72,7 +72,7 @@ static NSString *RCTProfileMemory(vm_size_t memory)
|
||||
return [NSString stringWithFormat:@"%.2lfmb", mem];
|
||||
}
|
||||
|
||||
NSDictionary *RCTProfileGetMemoryUsage(BOOL raw)
|
||||
static NSDictionary *RCTProfileGetMemoryUsage(void)
|
||||
{
|
||||
struct task_basic_info info;
|
||||
mach_msg_type_number_t size = sizeof(info);
|
||||
@ -81,76 +81,14 @@ NSDictionary *RCTProfileGetMemoryUsage(BOOL raw)
|
||||
(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": raw ? @(vs) : RCTProfileMemory(vs),
|
||||
@"resident_size": raw ? @(rs) : RCTProfileMemory(rs),
|
||||
@"virtual_size": RCTProfileMemory(info.virtual_size),
|
||||
@"resident_size": RCTProfileMemory(info.resident_size),
|
||||
};
|
||||
} 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)
|
||||
@ -431,7 +369,7 @@ void RCTProfileImmediateEvent(
|
||||
@"ts": RCTProfileTimestamp(CACurrentMediaTime()),
|
||||
@"scope": @(scope),
|
||||
@"ph": @"i",
|
||||
@"args": RCTProfileGetMemoryUsage(NO),
|
||||
@"args": RCTProfileGetMemoryUsage(),
|
||||
);
|
||||
);
|
||||
}
|
||||
|
||||
@ -14,197 +14,8 @@
|
||||
<!-- Fake favicon, to avoid extra request to server -->
|
||||
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
|
||||
<title>React Native Debugger</title>
|
||||
<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">
|
||||
<script>
|
||||
(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');
|
||||
@ -225,8 +36,6 @@ 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) {
|
||||
@ -250,19 +59,6 @@ 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) {
|
||||
@ -272,32 +68,11 @@ 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() {
|
||||
ws = new DebuggerWebSocket('ws://' + window.location.host + '/debugger-proxy');
|
||||
var ws = new DebuggerWebSocket('ws://' + window.location.host + '/debugger-proxy');
|
||||
|
||||
ws.onopen = function() {
|
||||
if (sessionID) {
|
||||
@ -306,9 +81,6 @@ 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) {
|
||||
@ -330,9 +102,6 @@ function connectToDebuggerProxy() {
|
||||
sessionID = null;
|
||||
window.localStorage.removeItem('sessionID');
|
||||
debuggerSetTimeout(connectToDebuggerProxy, 100);
|
||||
|
||||
// stop collecting metrics
|
||||
toggleMetrics(false);
|
||||
};
|
||||
}
|
||||
|
||||
@ -351,9 +120,9 @@ function loadScript(src, callback) {
|
||||
<style type="text/css">
|
||||
body {
|
||||
font-size: large;
|
||||
margin: 20px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: Helvetica Neue, Helvetica, Verdana, sans-serif;
|
||||
font-family: Helvetica, Verdana, sans-serif;
|
||||
font-weight: 200;
|
||||
}
|
||||
.shortcut {
|
||||
@ -392,43 +161,6 @@ 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>
|
||||
@ -447,31 +179,7 @@ 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>
|
||||
<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>
|
||||
<p>Status: <span id="status">Loading...</span></p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -203,13 +203,6 @@ 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();
|
||||
}
|
||||
|
||||
11
packager/static/Chart.min.js
vendored
11
packager/static/Chart.min.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
16
packager/static/react-0.13.3.min.js
vendored
16
packager/static/react-0.13.3.min.js
vendored
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user