How to troubleshoot Livewire & Alpine.js?

Does anyone have any good tips for troubleshooting? I am having two major and very odd issues right now and quite frankly I am not even sure where to turn to really troubleshoot them.

For example: I am trying to filter an eloquent collection while a user is typing in an input field but no matter what I do I can’t get the screen to re-render with the filtered data. Two, I have a modal that is always showing on page load even though the property is clearly set to false. For the life of me, I can’t figure out why Alpine thinks it’s set to true and displays the modal.

On both of these, everything appears to be right. I’ve spent several hours going through the code, double checking for any errors in the console, using old school troubleshooting methods of printing out values to the the screen, etc. Working with Livewire and Alpine is really nice when things are working as expected, but I am struggling to figure out how to rip the cuts open when things start to go sideways.

Has anyone developed anything like the Vue Devtools browser extension?

If you have a backend issue you can make some tests to make sure all things work as expected and if you want to troubleshoot alpinne.js you can use the dev-tools that alpineJs provide.

and if you have struggled with some code, please provide it to me and I will help you if I can.