谷歌调试介绍

一 断点调试：

Element标签：该标签使用来查看页面的HTML标签元素的，能够也就是查看源码，我们可以看到布局，可以看到用到的样式，还有用到的链接等等。



点击source标签有三个模块：

第一个:是来选择资源的，当网页被加载的时候向服务器端请求出来的文件包括.html .ccs .js这样的文件;
第二个:是js调试窗口，可以在左边打断点，刷新页面，进行调试。
第三个:窗口重点说明一下：

1.Pause script excution 【单步执行，在断点处暂停，等待调试–不是直译】

2.Step over next function call【单步跳过】 ： 会跳到下一个断点

3.Step into next function call【单步进入】 ：会进入函数内部调试

4.Step out of current function 【单步跳出】: 会跳出当前这个断点的函数，

5.step ：一步步执行

6.Deactivate breakpoints : 使所有断点临时失效

7.Don’t Pause on exceptions: 不要在异常处暂停，

8.Pause On Caught Exceptions– 若抛出异常则需要暂停在那里

9.Watch： 监听表达式 不需要一次又一次地输入一个变量名或者表达式，你只需将他们添加到监视列表中就可以时时观察它们的变化：

9.Call stack：在一行代码里暂停时，可以在 Call Stack 面板查看是哪些栈将你带到了当前断点（到达当前函数调用了哪些函数）。如果不是在一行代码里暂停， Call Stack 面板是没有内容的。点击函数会跳到此函数调用的地方。蓝色箭头是当前查看的函数。在 Call Stack 面板里右键，选择 Copy stack trace 可以将面板里的 stack 信息复制到 clipboard。复制格式如下（函数名称、在代码里的行数）：

fix (jquery.min.js:formatted:2005)

dispatch (jquery.min.js:formatted:1961)

r.handle (jquery.min.js:formatted:1853)

10.scope:可以看到相当多实用的信息，比如this的指向，是否有值，断点是对象还是其他等。。

11.BreakPoints: 记录了标记的所有断点，可以点击跳转

12.XHR/FETCH BreakPoints: 针对某一个请求或者请求的关键字设置断点

13.Dom BreakPoints:右键单击某个DOM元素，并选择Break on下的subtree modifications。这样调试器就可以在脚本遍历到该元素并且要修改它的时候自动停止，以让用户进行调试检查

14.Global listener:

15.Event listener breakPoints:在监听器监听到某个事件发生的时候，断点暂停

二．Network：查看网页的http通信情况，包括Method、Type、Timeline（网络请求的时间响应情况）等

三．小技巧

1.全局查找：Ctrl+shift +f

2.查看密码：有些网站登陆的时候，密码右边有个眼睛图标，点击可以看到登录密码，是如何实现的呢？它是通过调用js将该文本框的属性从password改为text,感兴趣的话可以在谷歌调试的时候修改尝试

3.代码过长的时候，显示杂乱无章，着看着自己也不知道看到哪里了，第二个窗口下面的括号，可以格式化js代码。