- 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
- 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
- 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.
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!