浏览器开发者工具到底是什么？
其实简单的说，浏览器开发者工具就是给专业的web应用和网站开发人员使用的工具，当然只要你有兴趣想要了解，只要你对这个世界充满这好奇，什么东西你都可以了解。
开发者工具到底有什么用？
它的作用在于，帮助开发人员对网页进行布局，比如html+css，帮助前端工程师更好的调试脚本（javascript、jquery）之类的，还可以使用工具查看网页加载过程，获取网页请求（这个过程也叫做抓包），抓包是非常有意思的过程，而每一个浏览器厂商生产出来的浏览器都会有自己的杀手锏，也就是功能上的差别，那么这个时候你就找一个最适合自己的浏览器使用就可以，接下来就是介绍我常用的三个浏览器。
chrom浏览器打开－开发人员工具－方式如下：
手动打开开发者工具的方法
当然，也可使用快捷方式，最为简便：打开方式有两种：第一“按f12”，第二：shift+ctrl+i
开发人员工具的界面
下面，为大家介绍下几个功能的使用方法：
elements
elements工具像一把手术刀一样“解剖”了当前页面，我们看到的elements页面一般像这样子：
图中标记为1的红色区块为页面html文件，html中的每个元素比如<body>、<p>都是一个dom节点，所有的dom节点组成了dom树。我们完全可以把红色区块1当做是dom树，把html元素标签看做dom节点。
当我们在这里选中某一dom对象时，网页中相应元素也会被阴影覆盖。我们可以对dom对象进行修改，修改后结果会在页面实时显示出来。此外，还可以用 command + f 搜索dom树中指定的内容，或者是以html形式更改页面元素，如下图：
选中dom对象之后右键即可以看到一些辅助的功能，如图中标记为2的区块所示：
add attribute: 在标签中增加新的属性；
force element state: 有时候我们为页面元素添加一些动态的样式，比如当鼠标悬停在元素上时的样式，这种动态样式很难调试。我们可以使用force element state强制元素状态，便于调试，如下图：
![图4. 强制元素状态][4]edit as html: 以html形式更改页面元素；
copy xpath: 复制xpath；
delete node: 删除dom节点；
break on: 设置dom 断点。
图中被标记为3的蓝色区块显示当前标签的路径：从html开始一直到当前位置，我们单击路径中任何一个标签，即可以跳转到相应标签内容中去。
图中标记为4的蓝色区块实时显示当前选中标签的css样式、属性等，一共有以下5小部分：
styles: 显示用户定义的样式，比如请求的default.css中的样式，和通过javasript生成的样式，还有开发者工具添加的样式；
computed: 显示开发者工具计算好的元素样式；
event listeners: 显示当前html dom节点和其祖先节点的所有javascript事件监听器，这里的监听脚本可以来自chrome的插件。可以点击右边小漏斗形状(filter)选择只显示当前节点的事件监听器。
dom breakpoints: 列出所有的dom 断点；
properties: 超级全面地列出当前选中内容的属性，不过基本很少用到。
实际应用中我们经常会用到styles，如下图：
图中标记为1的+号为new style rule，可以为当前标签添加新的选择器，新建立的样式为inspector-stylesheet。此外，也可以直接在原有的样式上增加、修改、禁用样式属性，如图中标记2显示。
在new style rule右边为toggle element state，选择后会出现标记3显示的选择框，如果选中:hover后，即可以看到鼠标悬停在页面元素上时的css样式了，作用类似于前面的force element satte，更多内容可以看:hover state in chrome developer tools 。
更强大的是，开发者工具以直观的图形展示了盒子模型的margin、border、padding部分，如标记5所示。下面动态图给出了盒子模型的一个示例：
console
console可以查看网页运行后提示的消息，错误或者警告以及输出内容等，网页后台可以使用console.debug(输出内容)；来在console输出显示，可以做到调试的作用吧，不过一般真正调试不是拿console。console.debug(console使用介绍);console是小写形式，不然提示没有console
resources
resources里可以查看web程序跑起来后所加载的一些资源（resources），包括图片或者其他“值”，以及cookies
network
有时候我们的网页加载的很慢，而相同网速下，其他网页加载速度并不慢。这时候就得考虑优化网页，优化前我们必须知道加载速度的瓶颈在哪里，这个时候可以考虑使用network工具。下图为我的博客首页加载时的network情况：
请求的每个资源在network表格中显示为一行，每个资源都有许多列的内容(如红色区块1)，不过默认情况下不是所有列都显示出来。
name/path: 资源名称以及url路径；
method: http请求方法；
status/text: http状态码/文字解释；
type: 请求资源的mime类型；
initiator解释请求是怎么发起的，有四种可能的值：
parser：请求是由页面的html解析时发送的；
redirect：请求是由页面重定向发送的；
script：请求是由script脚本处理发送的；
other：请求是由其他过程发送的，比如页面里的link链接点击，在地址栏输入url地址。
size/content: size是响应头部和响应体结合起来的大小，content是请求内容解码后的大小。进一步了解可以看这里chrome dev tools - “size” vs “content”；
time/latency: time是从请求开始到接收到最后一个字节的总时长，latency是从请求开始到接收到第一个字节的时间；
timeline: 显示网络请求的可视化瀑布流，鼠标悬停在某一个时间线上，可以显示整个请求各部分花费的时间。
以上是默认显示的列，不过我们可以在瀑布流的顶部右键，这样就可以选择显示或者隐藏更多的列，比如cache-control, connection, cookies, domain等。
我们可以按照上面任意一项来给资源请求排序，只需要单击相应的名字即可。timeline排序比较复杂，单击timeline后，需要选择根据start time、response time、end time、duration、latency中的一项来排序。
红色区块2中，一共有6个小功能：
record network log: 红色表示此时正在记录资源请求信息；
clear: 清空所有的资源请求信息；
filter: 过滤资源请求信息；
use small resource raws: 每一行显示更少的内容；
perserve log: 再次记录请求的信息时不擦出之前的资源信息；
disable cache: 不允许缓存的话，所有资源均重新加载。
选择filter后，就会出现如红色区块3所显示的过滤条件，当我们点击某一内容类型(可以是documents, stylesheets, images, scripts, xhr, fonts, websockets, other)后，只显示该特定类型的资源。在xhr请求中，可以在一个请求上右键选择“replay xhr”来重新运行一个xhr请求。
有时候我们需要把network里面内容传给别人，这时候可以在资源请求行的空白处右键然后选择save as har with content保存为一个har文件。然后可以在一些第三方工具网站，比如这里重现网络请求信息。
选定某一资源后，我们还可以copy as curl，也就是复制网络请求作为curl命令的参数，详细内容看 copying requests as curl commands
此外，我们还可以查看网络请求的请求头，响应头，已经返回的内容等信息，如下图：
资源的详细内容有以下几个：
http request and response headers
resource preview: 可行时进行资源预览；
http response: 未处理过的资源内容；
cookie names and values: http请求以及返回中传输的所有cookies；
websocket messages: 通过websocket发送和接收到的信息；
resource network timing: 图形化显示资源加载过程中各阶段花费的时间
source
sources面板几乎是我最常用到的chrome功能面板，也是在我看来决解一般问题的主要功能面板。通常只要是开发遇到了js报错或者其他代码问题，在审视一遍自己的代码而一无所获之后，我首先就会打开sources进行js断点调试，而它也几乎能解决我80%的代码问题。js断点这个功能让人兴奋不已，在没有js断点功能，只能在ie（万恶的ie）中靠alert弹出窗口调试js代码的时代（特别alert一个object根本不会理你），那样的开发环境对于前端程序员来说简直是一场噩梦。本篇文章讲会介绍sources的具体用法，帮助各位在开发过程中够愉快地调试js代码，而不是因它而发疯。首先打开f12开发工具切换到sources面板中:
sources功能面板是资源面板，他主要分为四个部分，四个部分并不是独立的，他们互相关联，互动共同实现一个重要的功能:监控js在执行期的活动。简单来说就是断点啦。
首先我们来看区域1，它的功能有些类似于resources面板，主要是显示网页加载的脚本文件：例如css， js等资源文件（它不包含cookie，img等静态资源文件）。
区域1的导航条上有三个tab切换选项，他们都存有不同域名和环境下的js和css文件，我们首先来说明sources（资源）选项的作用:
sources: 包含该项目的静态资源文件。双击选中文件，该文件内容会在区域2中显示，如果你选中的是js文件，那么你可以在区域2种单击行号进行断点调试，只要js执行到了你所标记的这一行，它会停止向下执行并且等待你的命令:
从上图可以看到js执行到断点处时各个区域的变化，首先是区域3中的breakpoints记录信息会变高亮，然后是区域4中scope 选项中列出了断点处私有和公有的变量信息，这样，我可以很直观地知道，此时此刻js的执行状态。同样的，你可以把鼠标放到区域2种的某个变量上，浏览器会弹出一个小框框，框框里面则是你悬浮其上的变量所有信息:
然后，你可以按f10跟着js执行的路径一步一步地走下去，如果你遇到了一个函数包含着另外一个函数，那么你可以按f11进入到个函数中去观察它的代码执行活动。你也可以通过点击区域1底部的各个图标对js代码进行跟踪。不过我建议你使用快捷键，故名思义，因为它比较快捷方便。不过怎么用完全按照个人习惯来吧。下图是各个按钮的作用功能。
在上图蓝色圆圈中数字，它们分别代表:
1、停止断点调试
2、不跳入函数中去，继续执行下一行代码（f10）
3、跳入函数中去（f11）
4、从执行的函数中跳出
5、禁用所有的断点，不做任何调试
6、程序运行时遇到异常时是否中断的开关
接下来在区域4种切换到watch expressions 选项，它的作用是为目前断点添加表达式，使得每次断点往下走一步都会执行你写下的js代码。需要注意的是这个功能必须谨慎使用，因为这可能会导致你写下的监控代码段会不断地被执行。
为了避免你的调试代码重复执行，我们可以在调试时直接在console控制台上一次性地输出当前断点处的信息（推荐这样做）。为了验证我们在console面板中拥有的是当前断点环境，我门可以对比断点执行前后的this值变化。
如果你觉得在断点的时候为了看一个变量必须借用console面板输出的方式来查看会比较麻烦，那么你可以更新最新版的chrome，它已经为我们解决了这个烦恼。为了方便开发者调试，在这一点上谷歌已经做到了极致，就在前几天更新过chrome以后，卤煮意外地发现了断点时监控环境变量的另外一种方式，这种方式极为清晰，在断点调试的时候，区域2中会自动显示每个变量的值，每次代码往下走的时候这个值都回时时更新。这让开发者对当前环境变量几乎可以说是一目了然。（此功能有一个小缺陷，那就是无法查看数组或者对象的具体索引和值，不过我相信google会改进它的。）
当你的项目已经线上，出现了一个bug，你修复了之后无法看到它真正在线上的效果，那么你可以在打开线上的项目，直接在浏览器中修改代码然后看到效果。这样的效果往往是最直接的，这种方法也能帮你省去频繁验证发布的麻烦，毕竟身为前端码农的你也一定会听到过后台（通常情况下是后台发布）大哥的抱怨：“xxx，测试通过了没，不要出现了哈，发布一次很麻烦的！”。而在chrome里面，只需要在区域2种直接修改，你就可以验证你的代码在线上是否可行。卤煮在此处只是指出该功能的用法之一。其他的就凭诸位的聪明才智去想了。
即使在断点时，你也可以编辑代码，按ctrl+s保存之后，你会看到区域2的背景由白色变为浅色，而断点会重新开始执行。
回到区域1，content script 选项开里面包含着一些第三方插件或者浏览器自身的js代码,经常它是被忽略的，实际上它的作用很少。我们可以更多关注一下snippets选项。还记得基础篇里面介绍的style吗？在里面我们可以编辑界面的css代码并且即时看到它们的映射效果，同样地，在sinppets中，我们也 可以编辑（重写）js代码片段。这些片段实际上就相当于你的js文件一样，不同的是本地的js文件在编辑器里面编辑的，而此处，你是在浏览器中编写的。这些代码片段在浏览器刷新的时候既不会消失，也不会执行，除非是你手动执行它。它可以存在你的本地浏览器中，即使关闭浏览器，再次打开时它依然还在那里。它的主要作用可以使得我们编写一些项目的测试代码时提供便捷，你知道，如果你在编辑器上编写这些代码，在发布时你必须为它们添加注释符号或者手动删除它们，而在浏览器上编写就不需要这样繁琐了。
在snippets选项的空白处右键后选择弹出的new选项，建立一个你自...