Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
remote debugging now supports queuing of logs, warn, info, etc - and …
…can be included in head of document
  • Loading branch information
remy committed Mar 10, 2011
1 parent 079aefc commit 311bc5e
Show file tree
Hide file tree
Showing 3 changed files with 42 additions and 10 deletions.
4 changes: 2 additions & 2 deletions console.js
Expand Up @@ -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});
Expand Down Expand Up @@ -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');
}
};
Expand Down
2 changes: 1 addition & 1 deletion remote-debugging.html
Expand Up @@ -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>
Expand Down
46 changes: 39 additions & 7 deletions remote.js
Expand Up @@ -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) {
Expand All @@ -104,27 +108,55 @@ 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),
plain = args.pop(),
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;
Expand Down

0 comments on commit 311bc5e

Please sign in to comment.