Debugging a Laravel +Vue.js App in your Browser

Photo by recha oktaviani on Unsplash

Bugs aren’t uncommon, unfortunately

Bugs are an almost inescapable impediment during development, and sometimes we get stuck with some of the really really pesky ones. Lucky for us we do have some really powerful tools accessible in our engineering toolbelts — the dev tools. Browsers have gotten really powerful, and quite capable of much more than rendering web pages. They’re packed full of awesome tools that can really help improve different aspects of our web development processes if we know just where to look.

If you’re working on an application with a backend built on Laravel PHP framework, and some frontend functionalities built around Vue.js, you may likely find yourself trying to figure out an explanation for why there’s an error 500 in your browser dev console resulting from an unresolved axios request to your backend. Well, the next time you find yourself in a pickle of this flavor, follow these simple debugging guide —

NB: The following guide is based on Google Chrome’s DevTools

1. navigate to the networking tab in the dev tools

Tips

• You can check the Preserve log box to retain the logged lists (as shown above) even after refreshing the page.
• Click on the XHR filter on the filter menu to streamline the logs down to xhr request types only, since we're trying to debug an HTTP type request.

2. Trigger the action if the log isn’t visible already. Notice the text in red font color below?

3. The status code 500 above tells us it’s got something to do with the server, so let’s click on the log to expose the details. That should look something like this:

The Headers tab shows us details about the request, such as; the URL, Status Code, Request Method, Response & Request Headers, Request Payload — telling us what was sent through to the server, etc.

4. We’re most curious about the Response the server has sent back in view of our request, so let’s jump to that tab.

Now we see what the issue is — “Call to undefined function App\\Http\\Controllers\\id()”

• The value of “message” is clear enough and has pointed us in the direction to look.
• The value of “file” spells out the name of the buggy file — ExamController.php
• And the value of “line” even narrows it down further.

Tip

Responses can be previewed within the Preview tab, as shown below:

Now we can dive right in and get the issue resolved.

That’s all, folks!