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