Feb 20, 2020 4 min read
Asynchronous Debugging in Vue.js and Laravel
Senior Application Developer
In my experience as a Senior Application Developer at Highland, I’ve found that the hardest errors to debug are 1) errors that aren’t being logged accurately, and 2) errors that take a lot of setup to repeat. I want to share a couple of simple tricks I use regularly to circumvent these two common problems.
We have an error occurring somewhere and the way it is being relayed to us doesn’t make sense. Here’s how we can get around it.
After the Vue.js application is loaded, open up the developer tools and hop over to the “sources” tab. Above all of the collapsable sections (Call Stack, Threads, etc) there is a checkbox that says “Pause on caught exceptions.” Toggling this checkbox on will cause any error — in any code level on the page — to generate a breakpoint, as seen in the screenshot below.
Pretty convenient stuff to have the debugger simply stop when something goes off the rails rather than having to track it down manually. In addition, when you’re trapping the errors (or some other module is helping you) this is advantageous to still be able to find errors in your code. In this example, I was seeing an empty popup in our app, and nothing in the console — when in reality a method is being called on an undefined variable.
My Thumb Hurts From Pressing X
The second problem I frequently encounter is not complicated but it is tedious: I find myself filling out large, complicated forms to get to a specific point in the application workflow in order to test something only to have it fail repeatedly. In this case, the Vue.js side is behaving normally but the Laravel endpoint is generating unexpected errors.
Rather than backing up and re-entering all the form data, I can simply choose to replay a selected XHR in the developer tools.
This provides an easy shortcut to replicate all of the form entry work with just a right-click. Open the developer tools before the asynchronous request you’re calling is made (it needs to be open in order to record the network activity). Navigate to the “Network” tab, find and highlight the request you want to debug. Right-click and choose “Replay XHR.” See below:
Now, a bonus hack! Another option if you need to manipulate the request (i.e. the Vue.js part is a little squirrelly, too) you can very easily copy it and automatically import it into a tool like postman. Right-click the request to debug, but this time select “Copy” and then “Copy as cURL.”
Next, open up postman and at the top choose “Import.”
Then, in the popup, choose “Paste Raw Text” and paste in what you just copied from your browser.
All of the parameters will be automatically populated (including any auth tokens and so forth) allowing you to tweak the data in the request to your heart’s content.
I hope you enjoyed reading, please feel free to leave questions or comments and feedback as it helps me think of new things to write about. Happy coding!