When we need to get a real-time response in our IOS APP, we often use Node.js to resolve this problem. and generally, we are using a console log to debug or check the output at the backend. But these things are only can be helpful when we run a project at the localhost.

Now, what if we need to check logs or error after uploading at the server. We get logs from servers and check logs one by one to sort out. But this solution takes a huge amount of time.

Is there any way to short it out in less amount of time?

YES, you are at the right place, In this blog, we will see how can we print or display console log real-time in HTML page so we can see logs easily. Here is

Step-by-step solution Print / Display Console Log real-time in HTML page

Step 1: Create New Project and Declare or assign basic or important variables

Firstly we need to create a sample node.js project and then we need to create some sample functions to print of debug logs in the typescript page.

Here we are using Index.ts . And for output or display logs we are going to use Index.HTML. So let’s start the project.

So as per snippet, first we need to declare or assign basic or important variables for a project, and now we are rapidly moving on logic for display real-time logs,

Step 2: Logic for (display) Logs in Index.ts

As per code snippet, we need to create a new function and then it will call every time when console.log is executed and it will pass the message as a data parameter.

It will call eventEmitter which will be call logging function and which will pass as log message to HTML page so quickly we now we look at HTML page for better explanations.

Step 3: Display logic in HTML page

So as per the above snippet; listener method "log_messege" getting called from index.ts page every time when ‘logging’ function called. It will pass data as msg parameter and it will append in HTML element as text format.

Next, we move on to example for better explanations.

Step 4: Create Sample project and create functions

For example, we are going to create functions in the typescript page and put logs inside in the function. so check out next snippet,

Whenever connection established then "connection" will be called and a log will be executed and it will print. After that, we create new function FirstFunction and whenever it calls it will execute console.log, 

Now, we are going to create more functions so we can be more clear about this functionality so please check out next snippet,

Step 5: Create sample functions in HTML page and design button to create event

As per function ‘FirstFunction ’ function, ‘SecondFunction’ and ‘ThirdFunction’ will work same but log message is different.

Now we quickly move on HTML page to use these functions,

We create a function in the HTML page for a call. These listener methods in HTML page and gave name ‘First’, ’Second’, ’Third’.

Now, we will design HTML element button to execute this function's runtime,

You can see we also design "ul" in this page also, So using this "ul" we will print logs on the screen. And we call functions onClick event of the button, we will watch log_message method again so we can be more clear as we do it in Step 3.

Now, log message will append as list in the screen so we can see logs; all logs one by one. Next, we are going to run a project and let see this method is working or not.

Step 6: Execute project and check output

We can see there is some text on a screen. That is a log message which we put in the "Connection" method and we also discussed that it will execute when connection established so following is the output of this.

Now, we are going to call first function and let see log is print real time in screen or not.

At last, we can see log message successfully print on screen real time for first method. Following, we click on second or third function and let see its work fine or not.

From the above screenshot, we can see it is working fine and we are getting logs real-time on a screen for all methods. Hope you can understand functionality properly.

Thank You. That’s it for now. Stay Connected for more tutorials, until than Happy Coding…

We're always happy to assist you to turn your business development ideas into beautiful reality; you can hire our node.js developers for further assistance with easy hiring model.