如何在 VS Code 调试器中命中 React 钩子断点？

Question

简而言之，我的 VSCode 调试器能够命中所有断点，除了我的 nextjs 应用程序中的 React 钩子（useEffect、setState）中的断点。

例如，考虑以下 React 函数组件：

export default function example() {
  console.log("breakpoint 1");
  useEffect(() => {
    console.log("breakpoint 2");
  });
  return (<div></div>);
}

假设我在两个 console.log 语句中都添加了一个断点，VS Code 调试器将在 breakpoint 1 处暂停，但不会在 breakpoint 2 处暂停，即使控制台输出显示两行都已运行。