Tutorial: Log to Console in PHP

*“All code and no logging makes John a black box error-prone system.” *

Logging is a key aspect of monitoring, troubleshooting and debugging your code.

Not only does it make your project’s underlying execution more transparent and intelligible, but also more accessible in its approach. In a company or a community setting, intelligent logging practices can help everyone to be on the same page about the status and the progress of the project.

In this post, we’ll see how we can refine our PHP web development practices by understanding the importance of logging to the browser console. We’ll see how logging is natively supported in PHP, and how doing it in the browser console has more to offer than printing logs on webpages or writing logs to files.

Use these links to navigate:

1. Background - Logging in PHP
2. The Basics of Browser Console Logging
3. How Console Logging Can be Done in PHP
4. Why You Should be Logging to Console
5. Wrapping it up

Background - Logging in PHP

More than 25 years since its creation, PHP is still one of the most widely used programming languages in the world, accounting for about 78% of the known internet.

Though when I started programming in PHP, I realized that my background in Javascript had not prepared me for this. I was so used to working with the browser’s console for debugging, that having to work with PHP’s native logging support couldn’t fill that void. But there was hope!

Before that, let’s see how PHP natively supports logging and debugging.

PHP can be used for logging through two primary ways -

• By either writing to log files on the disk or
• By displaying variable values on web-pages using echo and var_dump .

Both these options can prove to be restrictive.

Though static log files help in a retrospective analysis of how the execution unfolded, they can in some sense deprive you of the rich real-time experience of monitoring the dynamics of a modern website bustling with network requests and socket connections.

Also, there is only so much information that you can log onto your web-page without disrupting it’s design. Conventional logging mechanisms possible in PHP can, therefore, seem less viable for more extensive, dynamic websites.

The aforementioned issues restrict logging capabilities not only for PHP but for any language that was going to be used for web development in the future.

Modern browsers came to the rescue and realized the importance of providing developers with the necessary tools to make way for some easy, yet powerful logging and debugging support. These are also known as the Developer Tools and can be accessed by right-clicking on the web-page and selecting the ‘Inspect’ option.

These tools allow you to inspect the DOM object, monitor network requests and responses, page load times, website performance, memory consumption and so much more.

One of these Developer Tools, known as the browser’s console allows you to log messages and run Javascript code to debug your application. Let’s see how we can use that to our advantage.

The Basics of Browser Console Logging

When something goes wrong on a website, usually the user is shown a fancy error message about what happened.

But a web developer’s window to what might have gone wrong is the browser’s Dev Tools - primarily the browser console.

What is a browser console?

The browser console, as the name suggests, is a console in the browser.

Just as you can run Python or Node.js code on a console in your terminal, and print results and log errors, the console in your browser allows you to run Javascript code and log information pertinent to your website.

Let us understand this through an example. Let’s say you created an online messaging platform and due to some unknown reason, users on your website weren’t able to receive messages from their friends. Now in such a case, it would be handy to have a clear-cut logging system in place that could help you put a finger on what went wrong and where. The following is an example of a log:

1. Database connected
2. Fetching user’s friends
3. Processing data
4. Rendering data
5. Opening socket connection
6. Successful socket connection
7. Sending a message on channel
8. Received a message on channel
9. Rendering message
10. [ERROR IN RENDERING MESSAGE]

As shown in the above example, well-implemented logs would help you figure out that even though the message content was received, it was in rendering it that your code failed. Now you can go ahead and directly jump to the relevant portion of your code and make the necessary changes.

You can print information to the console by using the console.log() method.

Depending on the requirement, other methods of the console object can also be used -

• console.info()
• console.debug()
• console.warn()
• console.error()

Where is it?

In Google Chrome, you can access the browser console by either using Cmd + Shift + C (Ctrl + Shift + C on Windows, Linux) or by navigating to the ‘Console’ tab in the Dev Tools after selecting the ‘Inspect’ menu option.

**How Console Logging Can be Done in PHP **

Despite PHP’s supremacy, the fact that all modern browsers chose Javascript as the browser interpreter language meant that the only way PHP code logs could make it to the browser’s console was going to be through custom helper functions. These functions can call Javascript’s console.log() by echoing it to the required webpage.

// code for connecting to databaseecho 'console.log("Database connected!")';

This is the basis of how one can utilize the capabilities of a JS-based browser console for a PHP-based environment.

Let’s look at how we can make use of the above to log more often and more flexibly:

• Using json_encode()

The above example was just to print hard-coded message strings that informed about the status and progress of a certain subtask.

It is also very common to debug by logging data variables, such as to request parameters, JSON (Javascript Object Notation) responses, processed outputs, etc. Let us see how we can print a PHP array to the browser console.

<!-- app.php -->
<!DOCTYPE html>
<html>
<?php
   $my_arr = array(1,2,3);
   echo '<script>';
   echo 'console.log('. json_encode($my_arr, JSON_HEX_TAG) .')';
   echo '</script>';
?>
</html>

** CONSOLE OUTPUT:**

The *json_encode() *function converts the PHP variable into a JSON object that can be parsed by Javascript for printing to the console. Our pretty PHP file is converted by the browser to the following HTML markup -

(inspected from the ‘Sources’ section of the Developer Tools)

The *json_encode() *function can be used for converting any PHP data type to a Javascript compatible notation.

Instead of writing the corresponding *echo *statement each time we want to log something to the console, we can make a function for the same as such -

function console_log($data,
$add_script_tags = false) {
    $command = 'console.log('. json_encode($data, JSON_HEX_TAG).');';
    if ($add_script_tags) {
        $command = '<script>'. $command . '</script>';
    }    echo $command;
}

The above function can be used however we like depending on if we want the enclosing