I’ve written a few posts on remote debugging before, using edge inspect and weinre. They’re definitely very good at the problem they try to solve but today I came across a new Javascript-only remote debugging tool (mobiles, desktops, laptops, etc.) called JSConsole and am loving it! It’s pretty amazing for what it does and is trivial to setup.
What's the one thing every developer wants? More screens! Enhance your coding experience with an external monitor to increase screen real estate.
The Setup
- Go to jsconsole.com where you’ll see a light violet bar on the top. It’s the place where you can type commands like the console tab in chrome dev tools.
- Enter the command
:listeninside that bar and hit enter. It’ll generate a unique ID for your usage. You can also specify your own ID like this:listen my_random_private_id. - The previous step will give you a script tag with a particular URL that contains your unique ID. Insert that into your webpage where you want to perform your JS debugging and inspection. The script tag with your unique URL should look something like this
<script src="http://jsconsole.com/remote.js?my_random_private_id"></script>. - Pick any browser of your choice (like chrome or safari) to open your webpage. Now if you view the console on jsconsole it’ll show that a new connection has been made, dumping your browser’s user agent string.
It also has a native iOS app that you can find here.
Debugging
As you see, setting up is super easy. Next all you need to do is start debugging! You can execute JS code from jsconsole like alert('hello world') and it’ll execute in the connected browsers (you’ll see an alert box in them) or you can do some debugging from your code using console.log(my_var) which’ll show up in jsconsole’s data dump area.
The coolest part is, this process has no restrictions as far as browsers and devices are concerned! So you could inspect the app in your iOS, Android or WebOS browsers. Remote Debugging Tools are super essential for frontend developers in today’s world where mobiles, tablets, etc. share a huge portion of web traffic.
How does it Works ?
Taking a quick look at it’s source on github, it seems they use Server-Sent events for server -> client communication falling back to XHR when EventSource is not supported by the browser. The client -> server communication is done via Ajax (XHR). I wonder why it doesn’t uses Websockets which would be a good fit for this usecase, but it does the job anyway and is really fast!
Do You have any knowledge – how to use Livereload, but I want to change anything in my code on Computer ONE, then I want to see the change in a browser on Computer TWO? Is this possible?