是谁调用了我的函数？
最近在给前人留下的项目填坑。在这个过程中，我发现往往定位一个Bug需要很长时间，特别是有一些被多次调用的函数极其难以定位。在此过程中，我也学会了利用一些特殊的技巧，在这里做一下分享。
Chrome Dev Tool,我的最爱
利用Google浏览器提供的开发者工具进行调试，一直是前端工程师的一项基本功。但是，仍然有些功能，以前一直不怎么用到调用栈(Call Stack)的功能。最近发现，它特别的好用，特别是在弄清楚一些函数的运行流程的时候。
你可以从上图看到，当你启用断点的时候，右侧会有一个函数调用栈（Call Stack)你可以查看到函数的具体调用情况。
Console黑科技
如果你懒得打断点，可以在函数体内加入以下这句:
1 | console.log("Being called from " + arguments.callee.caller.toString()); |
你可以从最后打印出来的结果看到，hello函数是被sayHello这个函数调用了。（对于不在window下的函数不管用，所以有点鸡肋）
作者：SCQ000
链接：https://www.jianshu.com/p/a2f5965cf86e
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
动画调试
https://webdesign.tutsplus.com/articles/quick-tip-chrome-animation-dev-tools--cms-31505
文件替换（overrides）
overrides可以将远程的页面下载到本地，我们可以对下载到本地的页面进行编辑修改， 在下一次请求该页面时可以用本地页面进行替换显示。 具体使用方法：
1.选中Sources–>Overrides–>+Select folder for overrides,添加一个页面存储目录。
2.允许获得访问权限。
3.勾选Enable Local Overrides。
4.刷新页面。
5.切换到Network面板，选中需要下载到本地的页面–>鼠标右键–>Save for overrides。
6.保存以后，在Sourced面板–>Overrides选项卡下可以看到已经下载的页面， 把菜单栏的“首页”随便改一下，再刷新页面，可以发现菜单栏已经显示为修改的值。
调试问题记录
下面纯粹是我遇到的问题，也没有找到具体原因，仅做记录
vue2.x调试变量显示undefined，实际console.log出来不是
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<script>
export default {
data () {
return {}
},
created: {
const flag = false
if (flag) {
const x1 = 1
console.log(x1)
} else {
const x1 = 2
console.log(x1)
}
}
}
</script>
调试可以发现，x1是可以正常打印出2的，但是调试显示确是undefined，这时候只要把x1放到if外面就不会有这个问题，或者x1不重名
加载页面断点（Breakpoints）有时触发有时不触发
该问题暂时无法稳定复现，目前在webpack的项目下有遇到过，不确定是否相关，新开一个tab标签页第一次刷新就一定正常（可以每次都触发，确认没有代码逻辑设计成条件触发，比如session记录状态啥的）。
本文链接： http://www.ionluo.cn/blog/posts/8c91d8e.html
版权声明： 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处！
