<!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>