如何解决为什么在 Chrome DevTool 中一步步调试 JavaScript 函数的 toString 方法会被调用多次？

测试环境：

MacOS v10.14.6；
Chrome 89.0.4389.82

问题描述：

我在一个函数的toString方法中加了一个断点，并一步步调试，看到下一行调用了toString方法。

语言描述有点难，请看录屏：Video

为什么？

代码

<!DOCTYPE html>
<html lang="en">

<head>
  <Meta charset="UTF-8">
  <Meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    function fn() { }

    fn.toString = function () {
      debugger;
      console.log('toString called');
      const a = 'a';
      return a;
    };

    fn.toString();
  </script>
</body>

</html>

解决方法

使用IDE调试程序时就是这样。开发工具通过调用其 toString 函数来显示变量的值。当我在IDEA中调试Java程序时，它也是这样工作的。