Ray – Dump Debugging Evolved

The folks over at Spatie have released a new tool called Ray that helps you with debugging.

Ray is a beautiful, lightweight desktop app that helps you debug your app. After installing one of the libraries to send information to Ray, you can use the ray() function to quickly dump stuff. Any variable(s) that you pass to Ray will be displayed.

Since Spatie mainly develops with Laravel it plays very nice with it. It supports logging all performed queries or properly displaying the contents of any Eloquent Model / Mailable for example.

ray('Hello world');

ray(['a' => 1, 'b' => 2])->color('red');

ray('multiple', 'arguments', 'are', 'welcome');

ray()->showQueries();

User::firstWhere('email', 'john@example.com');

At its core Ray is “simply” an app that listens for incoming messages on a specific port (e.g. 23517). That means you can use it with any other programming language, as long as you send it the proper (JSON) payload. Libraries to use Ray with WordPress or JavaScript are already available too.

Ray →
Ray Docs →
Ray Introductory Blogpost →

💁‍♂️ Sidenote: To debug JavaScript I’d recommend the DevTools you already have though, as they’re already built for it. To debug from a remote source you could use something like JSConsole or get knee-deep in ADB and remote debugging protocols. But from a technological point of view it’s pretty cool that you can use Ray for it if you wanted to.

Debugging CSS

Apart from writing a ton of articles for his website this year, Ahmad has also written a book on Debugging CSS:

An ebook with lots of tips and techniques on how to debug CSS the right way with easy and studied methods.

It’s a very practical book that should get you help solve any potential CSS issues you might run into.

Debugging CSS →

Side note: I’m proud to have been asked to review this book while it was still in the making, and am glad I was of help to Ahmad. Great job you did there!

Reactime – A time-travel state debugger for React apps

Reactime is a debugging tool for React developers. It records state whenever it is changed and allows the user to jump to any previously recorded state.

This dev tool is for React apps using stateful components and prop drilling, and has beta support for Context API, conditional state routing, Hooks (useState, useEffect) and functional components.

Here’s a demo of it in action:

Comes in two parts: a Chrome Extension and a NPM package that you need to install inside your project.

npm i reactime

You’ll also need perform some (upfront) code adjustments so that the package sends data over to the extension:

import reactime from 'reactime';

const rootContainer = document.getElementById('root');
ReactDOM.render(, rootContainer);

reactime(rootContainer);

To support concurrent mode, you’ll need this adjustment:

import reactime from 'reactime';

const rootContainer = ReactDOM.createRoot(document.getElementById('root'));
rootContainer.render();
reactime(rootContainer);

Reactime →

💡 Be sure to also check out the “regular” React DevTools. They’re awesome!

How to start using your browser’s debugger

Solid introduction – with a real use case – on how to use the browsers’s built-in debugger:

In this post, I will cover using breakpoints, stepping through your code, setting watch expressions, and applying your fixes in Chrome Developer Tools.

How to stop using console.log() and start using your browser’s debugger →

☝️ Do not confuse the debugger with extra console.… methods such as console.table(), something which you can read about here.

How to use React Dev Tools, an introduction

Dev Tools can do a lot of things. We’re are not going to dive into the nitty gritty details of each and every feature. Instead we’ll take a look at the top 10 helpful features that help us save time and write better React code.

Good intro (*) on how to find your way around in the aforementioned React DevTools 4.0.

React DevTools — Debug Like a Ninja →

(*) The “Debug Like a Ninja” subtitle is overkill, to be honest 😅

Exceptional Exceptions: Cleverly throwing Exceptions in PHP

TIL, from the Engagor Clarabridge Development Blog: When creating an \Exception in PHP (including your own extended classes), you can pass in a third argument named $previous. It defines the previous \Exception used for exception chaining, leaving you with better errors for debugging:

try {
    $this->doSomeImportantStuffWith($foo);
} catch (VeryDescriptiveException $e) {
    // do some stuff here
    throw new SomethingWentWrongException('oh no!', 0, $e);
}
Fatal error: Uncaught VeryDescriptiveException: hello there! in test.php:15
Stack trace:
#0 /Users/toon/Projects/devblog/test.php(23): Test->doSomeImportantStuffWith('test')
#1 /Users/toon/Projects/devblog/test.php(34): Test->withPrevious()
#2 {main}

Next SomethingWentWrongException: oh no! in test.php:6
Stack trace:
#0 /Users/toon/Projects/devblog/test.php(34): Test->withPrevious()
#1 {main}
  thrown in /Users/toon/Projects/devblog/test.php on line 6

The tip to use named constructors for Exceptions also is something I’ll be using from now on 🙂

Clarabridge Development Blog: Exceptional Exceptions →

LogRocket: Logging and Session Replay for JavaScript Apps

LogRocket is a front-end logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from React, Angular, and Vue.js.

I especially dig the fact that it plays nice with Redux and lets you “inspect actions and state at any point in time”.

LogRocket →

Debugging Node.js using the Chrome DevTools

With Chrome 57+, the Node.js debugging feature is enabled by default. To start debugging, run your Node.js application [using Node 6.4+] with the --inspect flag.

Like so:

$ node --inspect <your_file>.js

Open the outputted URL or visit chrome://inspect/ to open dedicated DevTools for Node to start debugging 🙂

Debugging Node.js with Google Chrome →