How to debugger in vue?

To debug in Vue, you can use the Vue Devtools browser extension. This extension allows you to inspect the Vue component tree, view component data and props, and debug Vuex state changes.

To install the Vue Devtools extension, follow these steps:

1. Install the extension for your browser from the official website: https://github.com/vuejs/vue-devtools#installation

2. Once installed, open your Vue app in the browser and open the Devtools panel.

3. In the Devtools panel, you should see a new tab labeled "Vue". Click on this tab to view the Vue component tree.

4. You can now inspect the component tree, view component data and props, and debug Vuex state changes.

Here's an example of how you can use console.log to debug the axios post request in the provided code:

sendData() {
    console.log('Sending data:', this.date, this.product_id);
    axios.post('{{ route('product.warranty.save') }}', {
        date: this.date,
        product_id: this.product_id,
    })
        .then(response => {
            console.log('Response:', response.data);
            this.dates.push(response.data.date);
            this.products.push(response.data.product_id);
            alert('Data saved successfully!');
            window.location.href = '{{ route('product.warranty.save') }}';
        })
        .catch(error => {
            console.log('Error:', error);
        });
}

This will log the data being sent in the request, as well as the response and any errors that occur. You can then use the Vue Devtools extension to inspect the component data and state to further debug any issues.