mirror of
https://github.com/status-im/react-native.git
synced 2025-01-09 17:15:54 +00:00
64d56f34b7
Summary: `debugger.html` contained a ton of hacky code that was needed to ensure we have a clean JS runtime every time a client RN app connects. That was needed because we used the page's global environment as runtime. Some time ago WebWorker support was added and now we run RN code inside an isolated WebWorker instance, and we can safely get rid of all these hacks. This has a bunch of nice side-effects: debug reload works faster, `console.log`s are preserved, `debuggerWorker.js` selection doesn't change. Made sure the debugging (breakpoints, etc.) still works as before. Small demo  Closes https://github.com/facebook/react-native/pull/5715 Reviewed By: svcscm Differential Revision: D2906602 Pulled By: frantic fb-gh-sync-id: 1a6ab9a5655d7c32ddd23619564e59c377b53a35
134 lines
3.6 KiB
HTML
134 lines
3.6 KiB
HTML
<!doctype html>
|
|
<!--
|
|
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.
|
|
-->
|
|
|
|
<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() {
|
|
|
|
function setStatus(status) {
|
|
document.getElementById('status').innerHTML = status;
|
|
}
|
|
|
|
var INITIAL_MESSAGE = 'Waiting, press <span class="shortcut">⌘R</span> in simulator to reload and connect.';
|
|
|
|
function connectToDebuggerProxy() {
|
|
var worker;
|
|
var ws = new WebSocket('ws://' + window.location.host + '/debugger-proxy?role=debugger&name=Chrome');
|
|
|
|
function createJSRuntime() {
|
|
// 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.
|
|
worker = new Worker('debuggerWorker.js');
|
|
worker.onmessage = function(message) {
|
|
ws.send(JSON.stringify(message.data));
|
|
};
|
|
window.onbeforeunload = function() {
|
|
return 'If you reload this page, it is going to break the debugging session. ' +
|
|
'You should press ⌘R in simulator to reload.';
|
|
};
|
|
}
|
|
|
|
function shutdownJSRuntime() {
|
|
if (worker) {
|
|
worker.terminate();
|
|
worker = null;
|
|
window.onbeforeunload = null;
|
|
}
|
|
}
|
|
|
|
ws.onopen = function() {
|
|
setStatus(INITIAL_MESSAGE);
|
|
};
|
|
|
|
ws.onmessage = function(message) {
|
|
if (!message.data) {
|
|
return;
|
|
}
|
|
var object = JSON.parse(message.data);
|
|
|
|
if (object.$event === 'client-disconnected') {
|
|
shutdownJSRuntime();
|
|
setStatus('Waiting, press <span class="shortcut">⌘R</span> in simulator to reload and connect.');
|
|
return;
|
|
}
|
|
|
|
if (!object.method) {
|
|
return;
|
|
}
|
|
|
|
// Special message that asks for a new JS runtime
|
|
if (object.method === 'prepareJSRuntime') {
|
|
shutdownJSRuntime();
|
|
createJSRuntime();
|
|
ws.send(JSON.stringify({replyID: object.id}));
|
|
setStatus('Debugger session #' + object.id + ' active.');
|
|
} else if (object.method === '$disconnected') {
|
|
shutdownJSRuntime();
|
|
setStatus(INITIAL_MESSAGE);
|
|
} else {
|
|
// Otherwise, pass through to the worker.
|
|
worker.postMessage(object);
|
|
}
|
|
};
|
|
|
|
ws.onclose = function(e) {
|
|
shutdownJSRuntime();
|
|
setStatus('Disconnected from proxy. Attempting reconnection. Is node server running?');
|
|
if (e.reason) {
|
|
setStatus(e.reason);
|
|
console.warn(e.reason);
|
|
}
|
|
setTimeout(connectToDebuggerProxy, 500);
|
|
};
|
|
}
|
|
|
|
connectToDebuggerProxy();
|
|
|
|
})();
|
|
</script>
|
|
<style type="text/css">
|
|
body {
|
|
font-size: large;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: Helvetica, Verdana, sans-serif;
|
|
font-weight: 200;
|
|
}
|
|
.shortcut {
|
|
font-family: "Monaco", monospace;
|
|
font-size: medium;
|
|
color: #eee;
|
|
background-color: #333;
|
|
padding: 4px;
|
|
border-radius: 4px;
|
|
letter-spacing: 3px;
|
|
}
|
|
.content {
|
|
padding: 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="content">
|
|
<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>
|
|
</div>
|
|
</body>
|
|
</html>
|