In the code below, I worked with an API link which shows fakeproducts like an ecommerce website. When I am trying to debug the function addToCart which is called under a template string. It's not breaking on that point. Help me with how to debug it.
Website link: https://inspiring-payne-594c82.netlify.app/
I added the specific code where my issue is.
// show all product in UI
const showProducts = (products) => {
products.forEach(product => {
const image = product.image;
const div = document.createElement("div");
div.classList.add("product");
div.innerHTML = `<div class="single-product">
<div>
<img class="product-image" src=${image}></img>
</div>
<h3>${product.title}</h3>
<p>Category: ${product.category}</p>
<h2>Price: $ ${product.price}</h2>
<button onclick="addToCart(${product.id}, ${product.price})" id="addToCart-btn" class="buy-now btn btn-success">add to cart</button>
<button id="details-btn" class="btn btn-danger">Details</button></div>
`;
document.getElementById("all-products").appendChild(div);
})
};