A couple of months ago, I was developing a plugin for Kirby. Everything was going well until I hit a bump in one JSON response. I tried to dig up some information regarding the bug via
var_dump() but the problem with those is that they break the JSON formatting, which ruins the response.
I wanted to get a proper debugging tool and installed Xdebug. Although it had very promising features, it had the following issues:
- It took some time to set up
- The Sublime Text plugin didn’t work properly
- Each request was seconds slower, and most importantly:
- I still couldn’t log data without ruining the response
This tool has pretty fancy features like breakpoints, but in terms of logging — it only changes the original
var_dump() with a more visually appealing version. It doesn’t fix the problem of providing data without messing with the output.
While there are tools like Monolog that let you log to a file, they are wrapped up as a dependency for your project, not as a developer tool that you use on demand for debugging. I wanted something that can be used anytime without messing with the codebase of my current project.
At first, I had a simple script that provided a logging function. That function simply saved whatever was passed to it in a file. It was more than enough to help me with my situation regarding the plugin bug.
Then, I realized I can use
fs.watch() of Node.js to read data and log it in real time. This was pretty handy because I was able to have a terminal window open while testing and see the logs as they came:
Finally, my browser extension mania kicked in and I couldn’t resist the urge to create an extension that received logs through a WebSocket server and output them in DevTools:
Now, you can log data from the back-end and see it in the console where your front-end logs appear. Very handy!
The tool is called relog: