How can I dynamically connect LightTable to an external browser from console?

Question

I want to try out some of the new ECMAScript features but the browser integrated with LightTable doesn't have those features. For that I need to connect to an external browser and for that LightTable requires this line:

<script type='text/javascript' id='lt_ws' src='http://localhost:53742/socket.io/lighttable/ws.js'></script>

I tried:

document.head.innerHTML+="<script type='text/javascript' id='lt_ws' src='http://localhost:53742/socket.io/lighttable/ws.js'></script>"

But LightTable still doesn't see the connection:

"No client available. We don't know what kind of client you want for this one. Try starting a client by choosing one of the connection types in the connect panel."

How can I change this into JavaScript code that can be pasted in the console tab, so that I dynamically connect LightTable to an external browser from console?

@Bergi LightTable still ask me to choose for a client "No client available. We don't know what kind of client you want for this one. Try starting a client by choosing one of the connection types in the connect panel." — Eduard Florinescu, Dec 04 '15 at 15:14
@Bergi Actually now I see I tried `document.head.innerHTML+=""` — Eduard Florinescu, Dec 04 '15 at 15:17
Well [that doesn't work](http://stackoverflow.com/q/1197575/1048572). Use the DOM methods instead. — Bergi, Dec 04 '15 at 15:18
@Bergi If I try `document.head.appendChild("")` `TypeError: Argument 1 of Node.appendChild is not an object.` — Eduard Florinescu, Dec 04 '15 at 15:20
No, of course [like this](http://stackoverflow.com/a/21320/1048572). `appendChild` takes DOM elements, not strings. — Bergi, Dec 04 '15 at 15:26

score 1 · Accepted Answer · edited May 23 '17 at 11:59

Thanks to Bergi for pointing in comments that innerHTML doesn't work and I have to use DOM methods instead. Pasting below code in console connected LightTable with the browser.

The script will need and ask the the port and because this changes and every window uses a port this needs to be inserted manually.

To see what port you need to introduce: Press Ctrl + Space, type connect, and then select Connect to a browser. You'l see the port there displayed in the URL of the HTML piece of code.

var port = prompt("What's the port number?");   
var script_tag = document.createElement("script");
script_tag.setAttribute("src", "http://localhost:"+port+"/socket.io/lighttable/ws.js");
script_tag.setAttribute("type", "text/javascript");
script_tag.setAttribute("id", "lt_ws");
document.head.appendChild(script_tag);

Also this works also as a bookmarklet:

javascript:(function()%7Bvar port %3D prompt("What's the port number%3F")%3Bvar script_tag %3D document.createElement("script")%3Bscript_tag.setAttribute("src"%2C "http%3A%2F%2Flocalhost%3A"%2Bport%2B"%2Fsocket.io%2Flighttable%2Fws.js")%3Bscript_tag.setAttribute("type"%2C "text%2Fjavascript")%3Bscript_tag.setAttribute("id"%2C "lt_ws")%3Bdocument.head.appendChild(script_tag)%7D)()

The advantage of this approach is that you can connect and try or debug things using LightTable on already loaded live pages.

How can I dynamically connect LightTable to an external browser from console?

1 Answers1