2015-03-19 19:10:41 +00:00
<!doctype html>
2015-03-23 18:48:02 +00:00
<!--
Copyright (c) 2015-present, Facebook, Inc.
All rights reserved.
This source code is licensed under the BSD-style license found in the
LICENSE file in the root directory of this source tree. An additional grant
of patent rights can be found in the PATENTS file in the same directory.
-->
2015-03-19 19:10:41 +00:00
< 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 >
2015-08-21 17:15:04 +00:00
< script >
2015-03-19 19:10:41 +00:00
(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. ' +
2015-08-19 22:42:27 +00:00
'You should press ⌘R in simulator to reload.';
2015-03-19 19:10:41 +00:00
}
};
2015-08-07 22:01:40 +00:00
window.addEventListener('load', function () {
if (typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ === 'undefined') {
document.getElementById('devtools-banner').style.display = 'block';
}
});
2015-07-16 21:16:50 +00:00
// Alias native implementations needed by the debugger before platform-specific
// implementations are loaded into the global namespace
var debuggerSetTimeout = window.setTimeout;
var DebuggerWebSocket = window.WebSocket;
2015-03-19 19:10:41 +00:00
function setStatus(status) {
document.getElementById('status').innerHTML = status;
}
2015-09-24 03:02:22 +00:00
// This worker will run the application javascript code,
// making sure that it's run in an environment without a global
// document, to make it consistent with the JSC executor environment.
var worker = new Worker('debuggerWorker.js');
2015-03-19 19:10:41 +00:00
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
2015-09-24 03:02:22 +00:00
// message id.
// This message also needs to be handled outside of the worker, since the worker
// doesn't have access to local storage.
2015-03-19 19:10:41 +00:00
'prepareJSRuntime': function(message) {
window.onbeforeunload = undefined;
window.localStorage.setItem('sessionID', message.id);
window.location.reload();
},
2015-09-24 03:02:22 +00:00
'executeApplicationScript': function(message) {
worker.postMessage(message);
2015-03-19 19:10:41 +00:00
},
2015-09-24 03:02:22 +00:00
'executeJSCall': function(message) {
worker.postMessage(message);
2015-03-19 19:10:41 +00:00
}
2015-07-16 21:16:50 +00:00
};
2015-03-19 19:10:41 +00:00
2015-07-16 21:16:50 +00:00
function connectToDebuggerProxy() {
2015-08-21 17:15:04 +00:00
var ws = new DebuggerWebSocket('ws://' + window.location.host + '/debugger-proxy');
2015-03-19 19:10:41 +00:00
2015-07-16 21:16:50 +00:00
ws.onopen = function() {
if (sessionID) {
2015-08-19 22:42:27 +00:00
setStatus('Debugger session #' + sessionID + ' active.');
2015-07-16 21:16:50 +00:00
ws.send(JSON.stringify({replyID: parseInt(sessionID, 10)}));
} else {
2015-08-19 22:42:27 +00:00
setStatus('Waiting, press < span class = "shortcut" > ⌘R< / span > in simulator to reload and connect.');
2015-07-16 21:16:50 +00:00
}
};
2015-03-19 19:10:41 +00:00
2015-07-16 21:16:50 +00:00
ws.onmessage = function(message) {
var object = JSON.parse(message.data);
2015-08-31 18:18:23 +00:00
if (!object.method) {
return;
}
2015-07-16 21:16:50 +00:00
var handler = messageHandlers[object.method];
if (handler) {
2015-09-24 03:02:22 +00:00
handler(object);
2015-07-16 21:16:50 +00:00
} else {
console.warn('Unknown method: ' + object.method);
}
};
ws.onclose = function() {
setStatus('Disconnected from proxy. Attempting reconnection. Is node server running?');
2015-03-19 19:10:41 +00:00
2015-07-16 21:16:50 +00:00
sessionID = null;
window.localStorage.removeItem('sessionID');
debuggerSetTimeout(connectToDebuggerProxy, 100);
};
2015-09-24 03:02:22 +00:00
worker.onmessage = function(message) {
ws.send(JSON.stringify(message.data));
}
2015-03-19 19:10:41 +00:00
}
2015-07-16 21:16:50 +00:00
connectToDebuggerProxy();
2015-03-19 19:10:41 +00:00
})();
< / script >
< style type = "text/css" >
2015-08-07 22:01:40 +00:00
body {
font-size: large;
2015-08-21 17:15:04 +00:00
margin: 0;
2015-08-07 22:01:40 +00:00
padding: 0;
2015-08-21 17:15:04 +00:00
font-family: Helvetica, Verdana, sans-serif;
2015-08-07 22:01:40 +00:00
font-weight: 200;
}
2015-03-19 19:10:41 +00:00
.shortcut {
2015-08-19 22:42:27 +00:00
font-family: "Monaco", monospace;
font-size: medium;
2015-03-19 19:10:41 +00:00
color: #eee;
background-color: #333;
padding: 4px;
border-radius: 4px;
letter-spacing: 3px;
}
2015-08-07 22:01:40 +00:00
#devtools-banner {
display: none;
background-color: #FDFDD5;
padding: 10px;
}
#devtools-banner h3 {
margin: 0;
font-weight: normal;
}
#devtools-banner a {
display: none;
padding: 10px 20px 10px 20px;
margin-bottom: 10px;
color: white;
text-decoration: none;
font-size: 11px;
text-shadow: 0 1px 1px rgba(0,0,0,0.1);
text-transform: uppercase;
font-weight: bold;
background-color: #4d7bd6;
border-radius: 2px;
border: 1px solid #2d53af;
display: inline-block;
}
.content {
padding: 10px;
2015-03-19 19:10:41 +00:00
}
< / style >
< / head >
< body >
2015-08-07 22:01:40 +00:00
< div id = "devtools-banner" >
< h3 > Install React DevTools< / h3 >
< p >
React Developer Tools is an extension that allows you to inspect the
React component hierarchies in the Chrome Developer Tools.
< / p >
< a href = "https://fb.me/react-devtools" target = "_blank" >
Install
< / a >
< / div >
< div class = "content" >
< p >
2015-08-19 22:42:27 +00:00
React Native JS code runs inside this Chrome tab.
2015-08-07 22:01:40 +00:00
< / 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 >
2015-08-21 17:15:04 +00:00
< p > Status: < span id = "status" > Loading...< / span > < / p >
2015-08-07 22:01:40 +00:00
< / div >
2015-03-19 19:10:41 +00:00
< / body >
< / html >
