Chrome调试：如何增加Ajax调用的调用栈显示数量？

别担心，Chrome DevTools其实自带了调整调用栈显示长度的设置，还有几个关键技巧能帮你看到完整的调用链，一步步来操作：

• 调整栈追踪的最大显示帧数

  1. 打开Chrome开发者工具（按F12或者右键页面选择「检查」）
  2. 点击右上角的齿轮图标（或者直接按F1）打开设置面板
  3. 在左侧菜单找到「Debugger」选项，然后定位到「Maximum stack trace size」这一项
  4. 把默认的数值（通常是10左右）改成你需要的大小，比如100，保存设置后刷新页面，再调试就能看到更多调用栈记录了

• 开启异步栈追踪（重中之重！）
  因为Ajax是异步操作，默认情况下可能只会显示当前异步回调的局部栈，开启这个选项能帮你追踪到触发Ajax的源头（比如你要找的点击函数）：
  在刚才的Debugger设置里，找到「Enable async stack traces」，确保它处于勾选状态。开启后，你就能看到从初始点击事件到Ajax调用的完整调用链，而不仅仅是异步回调里的几帧。

• 额外小提示
  如果还是觉得栈信息不够清晰，检查一下你的代码是否被压缩工具（比如Webpack）混淆了函数名——混淆后的无意义函数名会让调用栈可读性变差，这时候可以开启Source Map来还原真实的函数名，更方便定位问题。

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