How to 'console log' PHP code in Chrome or Firefox?

Question

I've been looking up how I can debug PHP code in Chrome or Firefox but I can;t really find a solution. This is my PHP:

<?php
    if(isset($_POST["data"]))
    {
        $var = $_POST["data"];
        print "your message: " . $_POST["data"];
        if(!empty($_POST['ip.data'])){
        $data = $_POST['ip.data'];
        $fname = mktime() . ".txt";//generates random name

        $file = fopen("upload/" .$fname, 'w');//creates new file
        fwrite($file, $data);
        fclose($file);
        }
    }
?>

I want to be able to see the output of print "your message: " . $_POST["data"]; or any errors in Chrome or Firefox. I've tried Firefox Quantum that should be able to debug php? Anyways, how can I console log this?

[Monolog](https://github.com/Seldaek/monolog) with the [`BrowserConsoleHandler`](https://github.com/Seldaek/monolog/blob/master/src/Monolog/Handler/BrowserConsoleHandler.php) handler will do the job. — ishegg, Feb 19 '18 at 03:27
@ishegg I was looking into this but how would I set up the BrowserConsoleHandler? — feners, Feb 19 '18 at 03:28
[Example here](https://github.com/Seldaek/monolog/blob/master/doc/01-usage.md#configuring-a-logger) — ishegg, Feb 19 '18 at 03:29
Isn’t this code going to run server side? That output doesn’t have any path back to the browser (nor should it) — Joe, Feb 19 '18 at 03:29
1. Print it on the screen with `print_r()` (maybe it is not a string). 2. Save it to a variable and `echo` it elsewhere. 3. `echo` it into ' — Aydin4ik, Feb 19 '18 at 03:30
https://stackoverflow.com/questions/1053424/how-do-i-get-php-errors-to-display; `php.ini` `display_errors = on`. ))) — Salim Ibrohimi, Feb 19 '18 at 03:30

hunteke · Answer 1 · 2018-04-27T19:08:45.940

The first step is to recognize that PHP, which is generally a server side language is a completely different context than the browser's console, which is fundamentally Javascript. Thus, to show messages to the browser's console from the server, you will need to find some way to communicate those messages (e.g., errors) to the browser.

At that point, you might consider something as simple as embedding a script tag with your PHP:

function debugToBrowserConsole ( $msg ) {
    $msg = str_replace('"', "''", $msg);  # weak attempt to make sure there's not JS breakage
    echo "<script>console.debug( \"PHP DEBUG: $msg\" );</script>";
}
function errorToBrowserConsole ( $msg ) {
    $msg = str_replace('"', "''", $msg);  # weak attempt to make sure there's not JS breakage
    echo "<script>console.error( \"PHP ERROR: $msg\" );</script>";
}
function warnToBrowserConsole ( $msg ) {
    $msg = str_replace('"', "''", $msg);  # weak attempt to make sure there's not JS breakage
    echo "<script>console.warn( \"PHP WARNING: $msg\" );</script>";
}
function logToBrowserConsole ( $msg ) {
    $msg = str_replace('"', "''", $msg);  # weak attempt to make sure there's not JS breakage
    echo "<script>console.log( \"PHP LOG: $msg\" );</script>";
}

# Convenience functions
function d2c ( $msg ) { debugToBrowserConsole( $msg ); }
function e2c ( $msg ) { errorToBrowserConsole( $msg ); }
function w2c ( $msg ) { warnToBrowserConsole( $msg ); }
function l2c ( $msg ) { logToBrowserConsole( $msg ); }

if ( 'POST' === $_SERVER['REQUEST_METHOD'] ) {
    if ( isset( $_POST['data'] ) ) {
        d2c( "Your message: {$_POST['data']}" 
        e2c( "This is an error from PHP" );
        w2c( "This is a warning from PHP" );
        l2c( "This is a log message from PHP" );
        ...
    }
}

But this will be a fundamentally weak and brittle approach. I would suggest instead tailing your log files on the server directly. If you are after some color, consider using clog, lwatch, or grc:

$ grc tail -f /var/log/syslog

This was really helpful to me, when I found this answer I was looking at phpdbg because I thought that the only way to echo out any php variables without injecting HTML was to use a debugging module (obviously I am a complete beginner). Regardless of the way I got here, I think this answer should be accepted by the OP — Scott Anderson, Apr 13 '19 at 16:15

score 2 · Answer 2 · answered Feb 19 '18 at 03:48

2

echo "console.log( 'Debug Objects: " . $output . "' );";

answered Feb 19 '18 at 03:48

Zachary Gameiro

63
8

score 2 · Answer 3 · answered Sep 30 '18 at 08:30

I ran through the same problem recently, just couldn't find a simple enough way without installing some large external package.

I first tried the obvious way:

<?php echo "<script>console.log(".$myVar.")<script>" ?>

but it only works with scalar types. For example:

<?php
    $arr = [ 'x' => 42 ];
    echo "<script>console.log(".$arr.")</script>";
?>

will output to the html

<script>console.log(Array)</script>

a solution to this is to use json_encode on the variable in the php side, then JSON.parse it in the javascript and finally console.log.

However this approach fails to capture non public properties of objects:

<?php
    class Test {
        private $x = 42;
        public $y = 13;
    }
    $obj = json_encode(new Test());
    echo "<script>console.log(JSON.parse('".$obj."'))</script>";
?>

will output to the browser console:

{y: 13}

Because private/protected fields can't be accessed by json_encode.

The solution here is either to add a __toString method to your class where you properly expose those fields as strings, or use some hack like calling var_export then process the output string to make it json_encode-able.

I ended up writing a small helper using the latter approach, and an output prettifier in the javascript side

Leaving the link here if anyone wants to use it.

score 1 · Answer 4 · answered Feb 19 '18 at 03:45

If you want to see errors on an Ubuntu machine and you run an Apache server, you can constantly monitor and output changes to the error.log file in the apache folder with this command:

tail -f /var/log/apache2/error.log

If you have a server running on apache then this will output any errors occurred.

The tail command simply outputs the last 10 lines of a file and updates when new data is piped into the file.

score 0 · Answer 5 · answered Feb 19 '18 at 03:32

0

I hope will help:

ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

answered Feb 19 '18 at 03:32

Salim Ibrohimi

1,351
3
17
35

Can you explain a bit about this, what it does and how to use it? – conor909 Jan 11 '19 at 11:04

score 0 · Answer 6 · answered Feb 19 '18 at 03:53

Try this

  <?php
  function temp()
  {
   if(isset($_POST["data"]))
   {
    $var = $_POST["data"];
    print "your message: " . $_POST["data"];
    if(!empty($_POST['ip.data'])){
    $data = $_POST['ip.data'];
    $fname = mktime() . ".txt";//generates random name

    $file = fopen("upload/" .$fname, 'w');//creates new file
    fwrite($file, $data);
    fclose($file);
    }
  }
 }//function
 ?>
 <script>
   console.log(".<?php temp(); ?>.");
 </script>

score 0 · Answer 7 · answered Mar 01 '18 at 12:49

0

On Chrome, you can use phpconsole which works quite well. If anybody knows of something similar for Firefox Quantum please comment.

answered Mar 01 '18 at 12:49

Strnm

1,006
2
9
21

How to 'console log' PHP code in Chrome or Firefox?

7 Answers7