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

1 min read Original article ↗

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.