From 311bc5e2dc9d5a1a88189b407bb82c3155c8f192 Mon Sep 17 00:00:00 2001
From: remy <remy@remysharp.com>
Date: Thu, 10 Mar 2011 13:17:55 +0000
Subject: [PATCH] remote debugging now supports queuing of logs, warn, info,
 etc - and can be included in head of document

---
 console.js            |  4 ++--
 remote-debugging.html |  2 +-
 remote.js             | 46 ++++++++++++++++++++++++++++++++++++-------
 3 files changed, 42 insertions(+), 10 deletions(-)

diff --git a/console.js b/console.js
index 5fca7a6..9640525 100644
--- a/console.js
+++ b/console.js
@@ -74,7 +74,8 @@ function run(cmd) {
     xhr.open('POST', '/remote/' + remoteId + '/run', true);
     xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
     xhr.send(params);
-    // return ['info', 'sent remote command'];
+	setCursorTo('');
+    return ['info', 'sent remote command'];
   } else {
     try {
       if ('CoffeeScript' in sandboxframe.contentWindow) cmd = sandboxframe.contentWindow.CoffeeScript.compile(cmd, {bare:true});
@@ -615,7 +616,6 @@ var exec = document.getElementById('exec'),
             } else {
               if (data.cmd != 'remote console.log') data.response = data.response.substr(1, data.response.length - 2); // fiddle to remove the [] around the repsonse
               echo(data.cmd);
-              setCursorTo('');
               log(data.response, 'response');
             }
           };
diff --git a/remote-debugging.html b/remote-debugging.html
index 1cf4c8f..2705aca 100644
--- a/remote-debugging.html
+++ b/remote-debugging.html
@@ -53,7 +53,7 @@ <h1>Remotely debug a mobile web app</h1>
 <h2>Creating a session</h2>
 <p>To create a new session, in the jsconsole prompt, <a target="_blank" href="/?:listen">simply run</a>:</p>
 <pre><code>:listen</code></pre>
-<p>This will yield a unique key along the lines of <code>FAE031CD-74A0-46D3-AE36-757BAB262BEA</code>. Now using this unique key, include a <code>&lt;script&gt;</code> in the <code>body</code> element (not in the <code>head</code>) of your web app that you wish to debug:</p>
+<p>This will yield a unique key along the lines of <code>FAE031CD-74A0-46D3-AE36-757BAB262BEA</code>. Now using this unique key, include a <code>&lt;script&gt;</code> anywhere in the web app that you wish to debug:</p>
 <pre><code>&lt;script src=&quot;http://jsconsole.com/remote.js?FAE031CD-74A0-46D3-AE36-757BAB262BEA&quot;&gt;&lt;/script&gt;</code></pre>
 
 <p>Now any calls to <code>console.log</code> from your web app will display the result in the jsconsole session that is listening to your key. Equally, if you run a command in the jsconsole session, the code will injected in to your web app and the result returned to jsconsole.</p>
diff --git a/remote.js b/remote.js
index d3c476b..33dd20a 100644
--- a/remote.js
+++ b/remote.js
@@ -74,12 +74,16 @@ if (last.getAttribute('id') == '_firebugConsole') { // if Firebug is open, this
 var lastSrc = last.getAttribute('src'),
     id = lastSrc.replace(/.*\?/, ''),
     origin = 'http://' + lastSrc.substr(7).replace(/\/.*$/, ''),
-    remoteWindow = null;
+    remoteWindow = null,
+    queue = [],
+    msgType = '';
 
 var remoteFrame = document.createElement('iframe');
 remoteFrame.style.display = 'none';
 remoteFrame.src = origin + '/remote.html?' + id;
-document.body.appendChild(remoteFrame);
+
+// this is new - in an attempt to allow this code to be included in the head element
+document.documentElement.appendChild(remoteFrame);
 
 
 window.addEventListener('message', function (event) {
@@ -104,7 +108,17 @@ var remote = {
     [].forEach.call(arguments, function (args) {
       response.push(stringify(args, true));
     });
-    remoteWindow && remoteWindow.postMessage(JSON.stringify({ response: response, cmd: 'remote console.log' }), origin);
+    if (remoteWindow) {
+      remoteWindow.postMessage(stringify({ response: response, cmd: 'remote console.log', type: msgType }), origin);
+    } else {
+      queue.push(stringify({ response: response, cmd: 'remote console.log' }));
+    }
+    
+    msgType = '';
+  },
+  info: function () {
+    msgType = 'info';
+    remote.log.apply(this, arguments);
   },
   echo: function () {
     var args = [].slice.call(arguments, 0),
@@ -112,19 +126,37 @@ var remote = {
         cmd = args.pop(),
         response = args;
 
-    var argsObj = stringify(response, plain);
-    remoteWindow && remoteWindow.postMessage(JSON.stringify({ response: argsObj, cmd: cmd }), origin);
+    var argsObj = stringify(response, plain),
+        msg = stringify({ response: argsObj, cmd: cmd });
+    if (remoteWindow) {
+      remoteWindow.postMessage(msg, origin);
+    } else {
+      queue.push(msg);
+    }
   },
   error: function (error, cmd) {
-    remoteWindow && remoteWindow.postMessage(JSON.stringify({ response: error.message, cmd: cmd, type: 'error' }), origin);
+    var msg = stringify({ response: error.message, cmd: cmd, type: 'error' });
+    if (remoteWindow) {
+      remoteWindow.postMessage(msg, origin);
+    } else {
+      queue.push(msg);
+    }
   }
 };
 
+// just for extra support
+remote.debug = remote.dir = remote.log;
+remote.warn = remote.info;
+
 remoteFrame.onload = function () {
   remoteWindow = remoteFrame.contentWindow;
   remoteWindow.postMessage('__init__', origin);
   
-  remoteWindow.postMessage(JSON.stringify({ response: 'Connection established with ' + navigator.userAgent, type: 'info' }), origin);
+  remoteWindow.postMessage(stringify({ response: 'Connection established with ' + navigator.userAgent, type: 'info' }), origin);
+  
+  for (var i = 0; i < queue.length; i++) {
+    remoteWindow.postMessage(queue[i], origin);
+  }
 };
 
 window.remote = remote;