react-native/local-cli/server/util/debugger.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>