> APIs > API Platform 3 Part 1: Mythically Good RESTful APIs
Login to bookmark this video
Buy Access to Course
07.

API Debugging with the Profiler

|

Share this awesome video!

|

We're going to be doing some seriously cool and complex stuff with API platform. So before we get there, I want to make sure we have a really awesome debugging setup. Because... sometimes debugging APIs can be a pain! Ever made an Ajax request from JavaScript... and the endpoint explodes in a 500 error full of HTML? Yea, not super helpful.

Installing the Profiler

One of the best features of Symfony is its Web Debug Toolbar. But if we're building an API... there's not going to be a Web Debug Toolbar on the bottom of these JSON responses. So should we even bother installing that package? The answer is: absolutely!

Spin over to the terminal and run:

composer require debug

This is another Symfony Flex alias that installs symfony/debug-pack. If you pop over to your composer.json file, this installed a bunch of good stuff: a logger... then down in require-dev, it also added DebugBundle and WebProfilerBundle, which is the most important thing for what we'll talk about.

92 lines | composer.json
{
// ... lines 2 - 83
"require-dev": {
"symfony/debug-bundle": "6.2.*",
// ... line 86
"symfony/monolog-bundle": "^3.0",
"symfony/stopwatch": "6.2.*",
"symfony/web-profiler-bundle": "6.2.*"
}
}

AJAX Requests in the Web Debug Toolbar

Head back to our documentation homepage and refresh. Sweet! We get the Web Debug Toolbar down on the bottom! Though... that doesn't really help us because... all of this info is literally for the documentation page itself. Not particularly useful.

What we really want is all of this profiler info for any API request we make. And that's super possible. Use the GET collection endpoint. Hit "Try it out" and then watch closely down here on the Web Debug Toolbar. When I hit "Execute"... boom! Because that made an AJAX request the AJAX icon on the Web Debug Toolbar showed up! Want to see all the deep profiler info for that request? Just click the little link on that panel. Yup, as you can see here, we're now looking at the profiler for the GET /api/dragon_treasures API call.

API Platform & Serializer in the Profiler

And there's lots of cool stuff in here. Obviously, there's the Performance section and all the normal goodies. But one of my favorite parts is the "Exception" tab. If you have an API endpoint and that API endpoint explodes with an error - it happens - you can open this part of the profiler to see the full beautiful HTML exception: including the stack trace in all its glory. So handy.

I have two other favorite spots when working on an API. The first, no surprise, is the "API Platform" tab. This gives us info about the configuration for all of our API resources. We're going to talk more about this config, but this shows you the current and possible options that you could put inside of this ApiResource attribute. That's pretty cool. For example, this shows a description option...

119 lines | src/Entity/DragonTreasure.php
// ... lines 1 - 10
#[ApiResource(
description: 'A rare and valuable treasure.'
)]
class DragonTreasure
{
// ... lines 16 - 117
}

and we already have that!

The other really useful section in the profiler is relatively new: it's for the "Serializer". We're going to be talking a lot about Symfony's serializer and this tool will help us get a look at what's going on internally.

Finding the Profiler for an API Request

So the big takeaway is that every API request actually has a profiler! And there are a few ways to find it. We just say the first: if you're making an AJAX request - even if it's via your own JavaScript - then you can use the web debug toolbar.

And, if you look down here a bit, these are the response headers our API returned. One is called X-Debug-Token-Link which offers us a second way to find the profiler for any API request. This is exactly the URL we were just at.

The last way is... maybe the simplest. Suppose we go directly to /api/dragon_treasure.json. From here, there's no easy way to get to the profiler. But now, open up a new tab and manually go to /_profiler. Yup! This shows us a list of the latest request to our app... include the GET request we just made! If you click the little token link... boom! We're inside that profiler.

You can click this "Last 10" at any point to get back to that list... and find whichever request you need.

Sweet debugging tools, check! Next: let's talk about the concept of "operations" in API platform, which represent these six endpoints. How can we configure these? Or disable one? Or add more? Let's find out!