When I first started using this website for small scripts, quick proof-of-concept, what I noticed was that they have their own console pane where all the output of console.log interpreted.
Look at the figure below.
In the above jsbin figure, the console.log default output is in the chrome window, as well as in the “Console” window of jsbin.
Here’s the animated version.
That piqued my interest. How could they interpret console.log and proxy request to their window along with the default log output, i.e. chrome’s debugger window.
Remember the words of wisdom by Spiderman’s uncle
With great power comes great responsibility.
So, use it with caution and let the action begin.
Provide a surrogate or placeholder for another object to control access to it.
Caution: The purist out there might not agree with this approach of proxy pattern, but what matters is the concepts behind these design pattern and how we can use the language features to leverage their benefits.
We are building a custom log window, which we can embed in any HTML page.
The final application will look like the figure below. Note, I have done only minimal styling.
We can enable a custom log window on any page. We are only extending the behavior of console.log. The output is shown in the chrome default debugger as well as our custom window.
Kindly note, we are only targeting the minimum feature. The running app can be viewed here on jsbin.com. Ensure the “Output” pane is open.
Let the digging being.
First see, how we will use this. To enable log capturing we will set the SHOW_CUSTOM_CONSOLE to true.
JS Magic. We can add custom property to existing object. In this case we are adding the variable to the console object.
console.SHOW_CUSTOM_CONSOLE = true;
After this statement any console.log, should be redirected to our custom window.
console.log(“Hello world!”, “greetings”, “js”);
console.log(“My own console window..”);
Let’s see the implementation. I will put the full code here with comment. If you put his code in a file and include it in your projects, then you can enable the custom logger by setting SHOW_CUSTOM_CONSOLE to true on the console object.
The crux of the thing is in line 13–20 where we overide the log method and line 54–61 where the dynamic JS expression evaluation is done.
Also, the basic css for the above code is in the below gist.
Better Practice: I could have cached the elements for better performance. But for this small demo I duplicated the code.
Please note: This is for educational purpose only, but you can use this technique for lot of other applications, internal to your apps. Also, note overriding existing objects is not considered good practice, but many unique applications can be build using this technique, as long as you are internalizing the code withing your framework/library.
Let me know in case you need explanation on any part of the code. Feel free to leave your comment.
- Added animated gif and some notes.