In this lesson, we'll be discussing a couple of ways we can go about debugging our AdonisJS application. To start off, I'd actually like to point out the AdonisJS documentation has a specific page covering much of what we're going to be talking about here. So, be sure to give the documentation page a look over as well.
Before we begin, I'd like to apologize and recommend the video lesson for now. You're going to think to yourself, "images would've been great", but I haven't yet ported over the in-post image uploader from TipTap 2 to 3 yet. Once I've done that I'll come back to this and add images.
Inspect
The first way we can debug our AdonisJS application is by using an Edge global function called inspect. Inspect will take any argument and print it out onto our page in a nice formatted way.
<body> <main> <header> {{-- ... header ... --}} </header> {{ inspect('testing' }} {{ inspect(['testing', 'again']) }} @set('exampleObject', { user: { id: 1, profile: { id: 1, userId: 1, avatars: [ 'https://via.placeholder/300' ] } } }) {{ inspect(exampleObject) }} </main> </body>Copied!
This will then print all three of these inspects out in an easy to read format directly on our page exactly where inspect is called on the page.
Chromium NodeJS Devtools
The next way we can debug our AdonisJS application is by utilizing the NodeJS Devtools on Chromium-based browsers, like Microsoft Edge and Google Chrome.
First, we'll need to start our AdonisJS service with the Node --inspect flag. For this, I like to add an additional script within my project's package.json so it's always there and ready to use and I don't need to worry about remembering what the flag was called.
"debug": "node ace serve --node-args=\"--inspect\""Copied!
Once you have your script set up, go ahead and start your server using the script.
npm run debugCopied!
Next, open your application in your Chromium browser of choice. Open the devtools and you should now see the NodeJS icon in the top-right corner of your devtools panel. Go ahead and give that icon a click and the NodeJS Devtools should open up and display a list of open connections it's listening to. We're now ready to debug using the NodeJS Devtools.
Edge Debugger
The Edge templating engine comes with an @debugger decorator we can plop anywhere within our Edge pages, partials, components, and layouts. When we place this within our Edge files, Edge will replace it with JavaScript's debuggerkeyword. JavaScript is conditioned to stop the execution of code when it comes across this debugger keyword. So, go ahead and plop the @debugger anywhere to your liking, give your page a save and the NodeJS Devtools should immediately stop the execution of your code at the point in your template where you placed your @debugger. You should also see the underlying source code Edge generates to render your page. You can now step over your application line-by-line from this point out if you wish. The devtools has specific buttons, generally in the top-right corner to:
Continue code execution. If you have another
debuggerkeyword or breakpoint after the current line, hitting continue will continue execution until that line is reached. Otherwise, it'll continue until the request is finished.Step, which allows you to either step over a function or step to the next line.
Step into, which allows you to step into the function on the line you're on.
Step out, which allows you to step out of the function you’re in back into the callee.
When your code execution is stopped in the debugger, you also have open access to your application's state, including the local, closure, and global states. You can also hover over variables to dive into their values at the exact point and time your code execution is stopped at.
JavaScript Debugger
Just like Edge replaces @debugger with JavaScript's debugger keyword, you can also drop the JavaScript debuggerkeyword anywhere in your AdonisJS codebase that you need your request to stop at.
export default class PostsController { public async index({ request, view }: HttpContextContract) { debugger // <- debugger will stop code execution right here const posts = await Post.query() .preload('comments', query => query.orderBy('createdAt', 'desc') .orderBy('publishAt', 'desc') return view.render('posts/index', { posts }) } }Copied!
So, if you're having trouble with one of your controllers or services, you can boot up your server in debug mode, drop a debugger keyword at the point you need, and scope out exactly what state your application is in. Step over lines to view what's changing what. And, really anything else you need to do.
Join The Discussion! (2 Comments)
Please sign in or sign up for free to join in on the dicussion.
smilingkylan
Would be cool to see how to debug in VS Code!
Please sign in or sign up for free to reply
tomgobich
At present, I'm not entirely sure myself how to get it working, but if/when I figure it out I'll be sure to share!! 😊
Please sign in or sign up for free to reply