Google调试进阶

tip:此乃进阶操作，如有不懂，先看基础篇

---

目录

1、抛出错误处开始断点

一般情况下，不知道什么时候会抛出错，所以断点就不知道打在哪里，利用调试工具可以

这个时候在抛出错误时自动断点。这样就可以查看上下文的错误与堆栈

---

2、查看堆栈，即调用过程

一般我们打断点的地方发现也没啥问题，那猜测应该就是上一步的问题，可是这个是函数是谁调用的就有点尴尬了，不要傻傻的去搜索这个函数调用，没准调用的地方有好几处，这个时候调试工具也是有方法的

调试工具中有Call Stack调用堆栈，调用是按照调用顺序排列，可以点击看每一步的调用

这样就知道是谁在调用了。上下文你就可以很清楚的知道业务流程有没有出差错

---

3、查看断点处的周围变量的值

就是Scope 局部的意思。就是局部变量的意思。

还可以在断点周围利用鼠标悬停，即可查看变量的值

---

4、条件断点

这种情况一般是你已经知道bug是什么了，但是不知道什么条件触发的，比如往后台发送数据，莫名其妙传了undefined或者NaN，目前还不知道这两个货是咋来的，无法复现bug，这个时候就用条件断点非常好用。

然后选择Add conditional breakpoint（我也想截图试了好几个办法都截不下来）

然后就是这样子

这个时候你把值设成undefined的时候出发断点。设置成功断点颜色为黄色，这样就可以调试了。这样就很好解决bug产生的原因了

---

5、调试取这几个按钮的作用

---

6、把局部变量变成全局变量即时输出查看

当想要传入不同的参数调到某个组件的方法时，在调试过程中将这些参数添加到全局范围可以节省大量时间

显示下边这个菜单，选择Store as global variableglobal


意思就是现在有个全局变量temp4保存了你刚才操作的局部变量，你就可以拿着这个值操作些事情了。

---

7、Blackboxing 脚本将通过从堆栈中排除特定的脚本或者正则匹配模式的脚本来过滤调用堆栈。

调用堆栈有的时候又有jquery源码，又有vue源码的，我们不想看，只想看我们写的部分调用堆栈，这个时候使用最合适。

要通过 Blackbox 过滤一个脚本，有两种方法：

• 右键单击 Sources 选项卡中的 JS 脚本，然后单击“Blackbox Script”
• 转到Chrome设置页面，然后转到 Blackboxing 并单击 Add Pattern… 并输入您想要加入 Blackbox 的正则，在您想要过滤大量脚本时很有用。
  

---

8、 watch除了可以监听变量的值还可以是表达式

---