浏览器开发者工具基本使用

开发者工具到底有什么用？

它的作用在于，帮助开发人员对网页进行布局，比如HTML+CSS，帮助前端工程师更好的调试脚本（JavaScript、jQuery）之类的，还可以使用工具查看网页加载过程，获取网页请求（这个过程也叫做抓包），抓包是非常有意思的过程，而每一个浏览器厂商生产出来的浏览器都会有自己的杀手锏，也就是功能上的差别，那么这个时候你就找一个最适合自己的浏览器使用就可以。

一、谷歌浏览器chrome

一般在windows系统上浏览器开发者工具打开都是按F12快捷键。

上面这张图就是打开chrom开发者工具之后的样子，现在简单的介绍：

第一个框：是用于屏幕适配的，也就是传说中的chrom能够调试各种移动设备的屏幕分辨率。

上面这张图就是打开chrom开发者工具之后的样子，现在简单的介绍：

第一个框：是用于屏幕适配的，也就是传说中的chrom能够调试各种移动设备的屏幕分辨率。

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

console标签：这个就是一个web控制台

sources标签：这个是显示资源文件的

1.该选择框使用来选择资源的，当网页被加载的时候向服务器端请求出来的文件包括.html .ccs .js这样的文件。
2.这个地方使用来调试js代码的地方，这个非常重要，看到行号上面有蓝色的标签，这个标签就是断点，当我们需要调试程序的时候打一个断点，然后通过3这个工具栏进行调试，那么调试过程就不详细解释，也就是打一个断电然后刷新页面程序会调到你打断点的地方，然后通过4来查看程序中变量的值什么的。
3.中的标签，第一个是停止状态的按钮就是表示程序是否停止（在debug时），后面的是程序继续跳过方法，跳过下一个语句，调到上一个语句。

Network标签：这个就是抓包常用的工具

那么这个页面就是用于抓包的页面，我们需要分析页面的请求，比如模拟登陆什么的都需要去分析程序是怎么在后台执行的，接下来就，我们可以看到Headers（请求消息头） Preview（预览） Response（响应） Timing（求求时间）Cookie这些东西

最上面还有一个工具栏，有一个红色的圆点和静止符号的按钮，那么这两个按钮，当为红色按钮的时候表示当前的请求不被清空（但是这里的请求是不跳转页面的请求，当跳转到新的页面，那么也会请求也会被清空），后面这个按钮就是清空请求的。

下面还有一行工具栏，这个工具栏主要是用来选择和过滤请求消息的。

再下面可以看到时间线，这个就是记录一个请求开始到结束的时间。

注意：当你需要请求到另一个页面的时候都不清空你的请求的时候需要勾选上Preserve log，同时让红色按钮显示红色

TimeLiness标签：这个就是我们上面讲的请求时间

二、火狐浏览器FireFox

通过谷歌浏览器的认识那么我们就很简单的使用火狐咯，其实在mac上我是非常喜欢火狐的，因为功能是非常的强大。

现在只讲火狐和谷歌浏览器的区别：

1、这里列出的消息头 Cookie 响应什么的一个都不少，而且人家多了参数 安全性
参数这个就不用多说了，在我们抓包分析的过程中参数绝对是非常重要的内容，所以能够直接给你展示出来，可以给你减少去分析参数的过程，那么安全性呢，不言而喻了吧。

2、我们再来看，编辑和重发 原始头 能够模拟请求，简直碉堡啦，有没有，喜欢到爆，谷歌当然也可以有，但是好像是要装插件的。