mirror of https://github.com/status-im/metro.git
113 lines
3.2 KiB
HTML
113 lines
3.2 KiB
HTML
|
<!doctype html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset=utf-8>
|
||
|
|
<!-- Fake favicon, to avoid extra request to server -->
|
||
|
|
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
|
||
|
|
<title>React Native Debugger</title>
|
||
|
|
<script>
|
||
|
|
(function() {
|
||
|
|
|
||
|
|
var sessionID = window.localStorage.getItem('sessionID');
|
||
|
|
window.localStorage.removeItem('sessionID');
|
||
|
|
|
||
|
|
window.onbeforeunload = function() {
|
||
|
|
if (sessionID) {
|
||
|
|
return 'If you reload this page, it is going to break the debugging session. ' +
|
||
|
|
'You should ⌘+R in the iOS simulator to reload.';
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
function setStatus(status) {
|
||
|
|
document.getElementById('status').innerHTML = status;
|
||
|
|
}
|
||
|
|
|
||
|
|
var messageHandlers = {
|
||
|
|
// This method is a bit hacky. Catalyst asks for a new clean JS runtime.
|
||
|
|
// The easiest way to do this is to reload this page. That also means that
|
||
|
|
// web socket connection will be lost. To send reply back we need to remember
|
||
|
|
// message id
|
||
|
|
'prepareJSRuntime': function(message) {
|
||
|
|
window.onbeforeunload = undefined;
|
||
|
|
window.localStorage.setItem('sessionID', message.id);
|
||
|
|
window.location.reload();
|
||
|
|
},
|
||
|
|
'executeApplicationScript:sourceURL:onComplete:': function(message, sendReply) {
|
||
|
|
for (var key in message.inject) {
|
||
|
|
window[key] = JSON.parse(message.inject[key]);
|
||
|
|
}
|
||
|
|
loadScript(message.url, sendReply.bind(null, null));
|
||
|
|
},
|
||
|
|
'executeJSCall:method:arguments:callback:': function(message, sendReply) {
|
||
|
|
var returnValue = [[], [], [], [], []];
|
||
|
|
try {
|
||
|
|
if (window && window.require) {
|
||
|
|
returnValue = window.require(message.moduleName)[message.moduleMethod].apply(null, message.arguments);
|
||
|
|
}
|
||
|
|
} finally {
|
||
|
|
sendReply(JSON.stringify(returnValue));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var ws = new WebSocket('ws://' + window.location.host + '/debugger-proxy');
|
||
|
|
|
||
|
|
ws.onopen = function() {
|
||
|
|
if (sessionID) {
|
||
|
|
setStatus('Debugger session #' + sessionID + ' active');
|
||
|
|
ws.send(JSON.stringify({replyID: parseInt(sessionID, 10)}));
|
||
|
|
} else {
|
||
|
|
setStatus('Waiting for simulator');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
ws.onmessage = function(message) {
|
||
|
|
var object = JSON.parse(message.data);
|
||
|
|
var sendReply = function(result) {
|
||
|
|
ws.send(JSON.stringify({replyID: object.id, result: result}));
|
||
|
|
}
|
||
|
|
var handler = messageHandlers[object.method];
|
||
|
|
if (handler) {
|
||
|
|
handler(object, sendReply);
|
||
|
|
} else {
|
||
|
|
console.warn('Unknown method: ' + object.method);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
ws.onclose = function() {
|
||
|
|
setStatus('Disconnected from proxy. Is node server running?');
|
||
|
|
}
|
||
|
|
|
||
|
|
function loadScript(src, callback) {
|
||
|
|
var script = document.createElement('script');
|
||
|
|
script.type = 'text/javascript';
|
||
|
|
script.src = src;
|
||
|
|
script.onload = callback;
|
||
|
|
document.head.appendChild(script);
|
||
|
|
}
|
||
|
|
|
||
|
|
})();
|
||
|
|
</script>
|
||
|
|
<style type="text/css">
|
||
|
|
.shortcut {
|
||
|
|
font-family: monospace;
|
||
|
|
color: #eee;
|
||
|
|
background-color: #333;
|
||
|
|
padding: 4px;
|
||
|
|
border-radius: 4px;
|
||
|
|
letter-spacing: 3px;
|
||
|
|
}
|
||
|
|
body {
|
||
|
|
font-size: large;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<p>
|
||
|
|
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>
|
||
|
|
</body>
|
||
|
|
</html>
|