如何调试 MDN Web Docs 示例？

Question

假设我有Javascript example in MDN:

const object = { a: 1, b: 2, c: 3 };

for (const property in object) {
  console.log(`${property}: ${object[property]}`);
}

// expected output:
// "a: 1"
// "b: 2"
// "c: 3"

我可以用Run按钮运行它：

但是我可以用断点跟踪/调试它，看看它是如何进行的吗？

此示例的源代码位于 Chrome 或 FireFox 的开发人员工具中的什么位置？和/或如何缩小它？

Answer 1

它的位置：可能在一个动态模块中，可能使用eval 或new Function，在它运行之前立即生成，所以在此之前你不会找到它。

相反，您可以在需要断点的位置添加debugger statement，或者在第一行添加一个debugger statement，以便它立即中断到正确的源模块，您可以根据需要在调试器中设置其他断点。

然后打开您的开发工具并运行。等待它在debugger 语句处中断并进行调试。