JS Browser Dump to help debug when testing

Table of contents

One of my favourite things to use when testing Laravel applications is their dd() and dump() function. It lets you easily inspect PHP variables (either in the browser or on the command line).

(They also have a neat dump-server so you can dump on the server and it'll show up in your console - perfect for API calls. And all of this was originally on Symfony)

I know JS has console.log() but I find that when writing tests that when something isn't quite going right it is very hard to read any output in the console. I don't want to be making my terminal window huge. That is what I have a browser for...

So I created browserDump. It is a simple package that you can import in your tests, then just call it:

import { browserDump } from '@webdevetc/browser-dump';

test('something complicated', async () => {
   const somethingReallyComplicated = someServiceCallThatReturnsSomething();   
   await browserDump(somethingReallyComplicated);
   expect(somethingReallyComplicated).toMatchObject(somethingElse);
});

Then browserDump() will take your somethingReallyComplicated object, automatically spin up a web server, automatically open that page up in your browser (where you can inspect your data!), and as soon as your browser has received the HTML it will automatically stop the web server.

This is intended to be used in jest tests.

Screenshots

As this is the initial version, it isn't too pretty :)

Screenshot of the browser view, where you can see the JSON data

When inspecting via the Chrome console, you can see the raw data (and play with it with window.data): Screenshot of the console view, where you can see the raw JS

The browser will show you your data. Right now (this is the first version) it shows a JSON.stringify() version in the DOM, but if you go to Chrome's inspector and check out the console, you have access to the raw objects in window.data (this means that it will work with things that JSON cannot parse... but you have to use the inspector right now).

This is written with the intention of browserDump() being temporarily in your tests to help when debugging.

If this is useful, please leave a comment and I'll make it a bit more refined. Right now it works for my purposes, I am not sure if anyone else would find this useful when testing sometimes.

How to install

If you use Yarn:

yarn add -D @webdevetc/browser-dump

For NPM:

npm install @webdevetc/browser-dump --save-dev

In your test files just import it:

import { browserDump } from '@webdevetc/browser-dump';

then in your tests call it with some data:

    test('your test', async () => {
        await browserDump({somethingHere: 'any kind of object'})
    });

Just remember to remove it once you have inspected your data!

Comments JS Browser Dump to help debug when testing