因为上周一直在前段页面找一个东西，中间用到了谷歌浏览器的调试，来大概总结一下。
Element标签：该标签使用来查看页面的HTML标签元素的，能够也就是查看源码，我们可以看到布局，可以看到用到的样式，还有用到的链接等等。
Source 标签：
点击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（网络请求的时间响应情况）等
其他几个没有具体了解，以后熟悉了在总结
Profiles：用来查看网页的性能，比如CPU和内存消耗
Audits：可以分析当前网页，可以快速的分析出哪些资源被使用、哪些资源没有使用，然后提出建议 Console：可以查看错误信息、打印调试信息、调试js代码，还可以当作JavaScript API查看
三．一些小技巧
1.全局查找：Ctrl+shift +f
2.查看密码：有些网站登陆的时候，密码右边有个眼睛图标，点击可以看到登录密码，是如何实现的呢？它是通过调用js将该文本框的属性从password改为text,感兴趣的话可以在谷歌调试的时候修改尝试
3.代码过长的时候，显示杂乱无章，着看着自己也不知道看到哪里了，第二个窗口下面的括号，可以格式化js代码。
