如何调试模板字符串中调用且断点无法命中的addToCart函数

问题描述 #

我在代码中使用了一个返回电商类模拟商品的API接口，当前尝试调试模板字符串内调用的addToCart函数时，断点无法命中该位置，求助该问题的调试方法。
网站链接：https://inspiring-payne-594c82.netlify.app/
以下是出现问题的对应代码段：

// 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);
  })
};

解决方案 #

首先明确：你直接在模板字符串内部的onclick="addToCart(...)"位置打断点无法命中是正常现象，这段内容是作为HTML字符串拼接后插入DOM的，不属于JS文件里可直接断点的可执行代码段。可以按以下步骤排查调试：

• 强制触发断点
  直接修改addToCart函数的定义，在函数第一行加上debugger;语句，只要函数被执行，浏览器就会自动进入断点状态，不需要手动标记断点位置。如果加了之后点击按钮还是没断住，说明函数根本没有被触发，大概率是参数拼接错误或者函数作用域问题导致执行时报错。
• 排查模板字符串参数拼接问题
  你当前的onclick写法是onclick="addToCart(${product.id}, ${product.price})"，如果product.id是字符串类型（比如包含字母、特殊符号），拼接出来的执行代码会变成addToCart(abc123, 99)，缺少引号会直接报语法错误，根本不会执行函数。可以调整为带引号的写法适配字符串类型的ID：onclick="addToCart('${product.id}', ${product.price})"，数字类型的price不需要额外加引号。
• 排查函数作用域问题
  内联onclick属性里的代码只能访问全局作用域下的变量和函数，如果你的addToCart是定义在某个函数内部的局部函数，内联onclick无法调用到，会报addToCart is not defined错误。如果是这种情况，你可以把函数挂载到全局作用域：window.addToCart = addToCart即可解决。
• 改用事件绑定代替内联onclick（推荐）
  内联onclick本身调试友好度很低，你可以改成创建元素之后手动绑定事件，既不会有参数拼接问题，断点也能正常命中：
  首先把innerHTML里的按钮去掉onclick属性，添加自定义data属性存储参数：

  <button data-id="${product.id}" data-price="${product.price}" class="add-cart-btn buy-now btn btn-success">add to cart</button>
  

  然后在插入DOM前绑定点击事件：

  div.querySelector('.add-cart-btn').addEventListener('click', () => {
    addToCart(product.id, product.price)
  })
  

  这种写法是直接绑定的函数引用，在原JS文件的addToCart定义位置打断点可以直接命中。

内容的提问来源于stack exchange，提问作者Tech Sink