JSConsole is one of the easiest way to get your JavaScript logs when your app is executing on a remote platform (Mobile, SmartTV or any web browser based device really). It is free to use and open source.
Why use JSConsole
JSConsole is really useful when:
- You don’t need a complete remote dev tools but just the
console.log()outputs - You need a nicely presented console. The font is resizable which makes it really useful when doing a live coding presentation for example.
- You need to quickly remote debug something. You can use http://jsconsole.com/ directly and you don’t have to setup a local server.
- You want to see real time log for an app that is being used the other side of the world. You don’t have to be in the same network, which makes it very easy to use with your QA team or client, thousands of kilometers away.
JSConsole is not the right choice when:
- You want to understand the DOM structure of the app and test some CSS changes.
- You want to observe network calls being made
- You want to debug JavaScript execution
(Note: if you are looking for full featured web debugging, checkout weinre)
How to get started
Here is a straight to the point, step by step guide, on how to get started.
Step 1: Get the JSConsole <script> tag:
Go to http://jsconsole.com/.
Type :listen in the textbox.
Press Enter.
This will print out a <script> tag, something like
<script src="http://jsconsole.com/js/remote.js?dc69ca75-55bf-405c-aad8-cbd10262bb17"></script> |
Step 2: Insert the script in your code
In the <head> of your code, add the JSConsole script tag.
Reload or launch your app on the device under test (or simply in your browser).
The logs will start showing on the http://jsconsole.com/ virtual console
Step 3 (Optional): Save the URL for future use
In the JSConsole, type :listen [Your GUID]. In my example, that would be:
:listen dc69ca75-55bf-405c-aad8-cbd10262bb17 |
See how the URL of the page has changed ? Mine is:
http://jsconsole.com/?%3Alisten%20dc69ca75-55bf-405c-aad8-cbd10262bb17 |
This URL will automatically launch JSConsole and start listening to your app’s logs.
- Share this URL with your colleagues or friends so that they can see the log as well.
- Save it for future use (for example tomorrow, when you want to continue development/debugging).
Conclusion
Give it a try and see by yourself, JSConsole is really good at what it does. There are so many scenarios where it can be useful.
Check out the Github Repo for more info.
