Dump & Die Debugging in AdonisJS 6

In This Lesson

We'll cover the dump and die feature in AdonisJS 6, and how we can use it to easily inspect and debug state and other variables within our application.

Created by: @tomgobich
Published: 8 months ago

For more, check out the Dump & Die documentation within the AdonisJS 6 docs.

Join the Discussion 0 comments

Be the first to comment!

Transcript

Here I have a page with a list of series. A little bit further down on the page are also a list of topics.
Then on the left-hand side of the screen, we see the controller rendering this page out with topics and series within it. If I wanted to inspect to see
what the first series contents were within this controller, one of the more standard approaches is to just go in and console.log,
reach for series and grab the first element within there and drop that into our terminal. If we go back over to our browser, give it a refresh so that we rerun through that controller method,
jump back into our terminal, we can see it's a class of base series DTO and then it lists out all of the properties, topics, lessons, so on and so forth
within this class instance. So that's a traditional JavaScript approach. If we go ahead and hide our terminal back away, let's now see what this looks like
using the new dump and die feature with AdonisJS. So let's import dd from @adonisjs/core/services dumper
and we replace this console.log with a call to this dd method, which by the way, dd is short for dump and die,
which is what we're discussing here and it does exactly as the name suggests. It's going to dump the values that we pass into the function and then it's going to die on the request,
stopping exactly right there. So if we give that a save, jump back over into our browser, give it a refresh, you'll see that now we can inspect the contents
that we're logging directly within our browser as an interactive object. So we can still see that we're working with a base series DTO class and it has properties ID, difficulty ID,
names, slugs, so on and so forth. It has an array of one topic, which is a base topic DTO class consisting of an asset and meta, so on and so forth.
And we're able to collapse and hide each one of those to dig into them as needed. We also get the prototype here by default for non-base objects.
Since this is a class instance that we're taking a look at, we're able to see the prototype, which currently is empty, but if we had anything in there, we'd be able to inspect that here as well.
The red top title bar describes exactly what we're seeing. This is a dump die output and it was dumped and died from within our app controllers, home controller on line 15,
which we can confirm by looking over right here where we see line 15. Much like console logging, if we wanted to inspect multiple variables, we can now add in an object here.
Let's say, let's just take a look at all of our series and then all of our topics, give that a save, come back over into our browser, give it a refresh. Now our top level is just a base object.
And we see that we have a series, which is an array of length five and a topics array of 30 items. So if we expand the topics, we see those 30 items here
and we can dig into each and every one of those as needed. Same here for our series, which we saw a moment ago. Now by default, this will nest the collapsibility down five levels.
So if we go into our base object, it's series, it's first series, it's lessons, and then it's first lesson, we're now five layers deep.
So it's going to stop traversal there and just print out that our meta is an object and not let us go into there any further. However, you can configure this if needed.
And we can do that within our app configuration. So first thing that we're gonna wanna do is define a configuration for dumper. So we'll define config as,
and we can call this dumper config. We need to give it a different name because we already have a defined config here for our HTTP configuration.
And we can import this from @adonisjs/core/dumper. All right, let's scroll on down underneath our HTTP configuration now.
And we can export dumper equals dumper config and define the configurations as needed within here. Now there's an HTML configuration option,
and there's also a console configuration option. Both option sets are the same. The difference is output.
So whenever you're working with a web HTML based application it's going to behave as we saw here and print it out directly on the HTML page for us
in an inspectable and collapsible manner. When you're working with something like an API, it's going to drop it into the terminal for you
where you can then see it in a still pretty listed format like we saw on our HTML page, but all of the properties are going to be expanded since you don't have that collapsibility behavior within the terminal.
So both options sets here are the same, but we're working with an HTML within this application. So add this option into the HTML and it's called depth.
So here we can specify a value and that will determine how deep it's going to add the nesting within our inspect properties. So if we switch that to 10, oops, forgot my const.
So let's define that as a const there. Switch that to 10, give our page a refresh. Now we go into our object, go into our series, the first series, lessons, first lesson.
Now we can see that our meta object is expandable and we can dig into there further. And that will go on and on up to 10 levels deep. Now there's some additional configuration options as well,
which you can find within the AdonisJS documentation under basics, debugging, and then down in the debugging section there will be a dump and die section.
Here, if you scroll down a little bit within this section, it will begin going over the dumper settings and it will go over what each one of those do. So there's depth, we can see that the default for that
was five and we've now switched it to 10. There's also those prototype options that I've discussed here a little bit ago. Now, another really nice functionality with this
is we also have this within EdgeJS readily available for us too. So let's go ahead and get rid of this within our controller, get rid of the import there too.
Let's verify that everything renders out okay again and sure enough, there it is. Okay, let's go into our homepage now. And we have two variables here extracted out of our series,
first series and other series. This first series is this tall one right here and then the other series are these other four. So if we go down below this section,
there is a global tag within EdgeJS called DD that works the exact same way that we saw it within our controller. If we pass the first series into there, give this a save.
Since we're working with Edge, it's going to pick that up and automatically refresh our browser where we'll see our dump and die. Just as we saw within our controller, this too is expandable.
It's going to behave and look the exact same way as it did in our controller. However, an alternative approach here that we have is we can also get rid of the die portion of this
and instead just dump a value. So if we give this a save, give our browser a refresh, scroll on down. Oh, let me get rid of this little pattern right there.
It's adding some gradients over top of it. There we go. We can see that we still get our EdgeJS page rendered out as usual, but now we have this dump readily available to access and read from as well.
Okay, so one last thing to touch on. In order for this dump and dump and die to work successfully, we're going to need a stack called dumper within our page.
That can be directly on the EdgeJS page itself, or it can be within a layout component. It doesn't really matter where, it just needs to be somewhere on the rendered EdgeJS page.
Newer AdonisJS starter kits will come with that by default, but if you're upgrading from an older AdonisJS version, you're going to need to add that in yourself. And it looks just like so. It's just called @stack
and then pass the string dumper into it. Now stacks work very similarly to portals in Vue. If you're familiar with that concept, they might also be in React as well, I'm not too sure,
but they allow us to push things like script and styles into the stack to render elsewhere, no matter where we're dumping from. So we can keep all of those in one consistent location
using stacks and then dump wherever we need to. So do make sure that you have this stack somewhere on your EdgeJS page in order for things like the expandability here to work successfully.
So that is dump and die. It was added to AdonisJS core in September, 2024 with version 6.14.0. So if you're working on an older version, in order to use this,
you're going to want to make sure that you're at least at 16.14.0 or later with your AdonisJS core version. And then again, make sure that you have that dumper stack on your page.

AdonisJS Quick Tip

25 Lessons

2h 59m

Stop losing your best ideas!

Use our integrated note feature to capture and organize your key insights. Take a note at any timestamp and jump instantly back to that moment in the video with a single click.