Chrome——F12谷歌开发者工具详解

Chrome——F12⾕歌开发者⼯具详解
我们这⾥介绍主要的⼏块：、、
Console
⼤家都有⽤过各种类型的浏览器，每种浏览器都有⾃⼰的特⾊，本⼈拙见，在我⽤过的浏览器当中，我是最喜欢Chrome的，因为它对于调试脚本及前端设计调试都有它⽐其它浏览器的地⽅。

可能⼤家对console.log会有⼀定的了解，⼼⾥难免会想调试的时候⽤alert不就⾏了，⼲嘛还要⽤console.log这么⼀长串的字符串来替代alert输出信息呢，下⾯我就介绍⼀些调试的⼊门技巧，让你爱上console.log
先的简单介绍⼀下chrome的控制台，打开chrome浏览器，按f12就可以轻松的打开控制台
⼤家可以看到控制台⾥⾯有⼀⾸诗还有其它信息，如果想清空控制台，可以点击左上⾓那个来清空，当然也可以通过在控制台输⼊console.clear()来实现清空控制台信息。

如下图所⽰
现在假设⼀个场景，如果⼀个数组⾥⾯有的元素，但是你想知道每个元素具体的值，这时候想想如果你⽤alert那将是多惨的⼀件事情，因为alert阻断线程运⾏，你不点击alert框的确定按钮下⼀个alert就不会出现。

下⾯我们⽤console.log来替换，感受⼀下它的魅⼒。

看了上⾯这张图，是不是认识到log的强⼤之处了，下⾯我们来看看console⾥⾯具体提供了哪些⽅法可以供我们平时调试时使⽤。

1、先说⼀下源码定位
⼤家打开看到页⾯右下⽅有⼀个推荐的图标吗？右击推荐图标，选择审查元素，打开⾕歌控制台，如下图所⽰
我们现在想知道votePost⽅法到底在哪？跟着我这样做，在Console⾯板⾥⾯输⼊votePost然后回车
直接点击上图标红的链接，控制台将定位到Sources⾯板中，展⽰如下图所⽰
⼤家看了上⾯这个图⽚之后估计头都要晕了吧，这么多js都整在⼀⾏，让⼈怎么看呀，不⽤担⼼，按下图操作即可（也就是点击中间⾯板左下⽅的Pretty print就⾏了）
这时我们再回到Console⾯板时会惊奇的发现原来的链接后⾯的1现在变成91了（其实这⾥的数字1或者91就是代表votePost⽅法在源码中的⾏号）现在看出Pretty print按钮的强⼤之处了吧
知道了怎么样查看某⼀个按钮的源码，那接下来的⼯作便是调试了，调试第⼀步需要做的便是设置断点，其实设置断点很简单，点击⼀下上图所⽰的92即可，这时你会发现92⾏号旁边会多了⼀个图标，这⾥解释⼀下为什么不在91处设置断点，你可以试下，事实上根本就没法在91处上设置断点，因为它是函数的定义处，所以没法在此设置断点。

设置好了断点后，你就会在右边Breakpoints⽅框⾥看到刚刚设置的断点。

我们先来介绍⼀下⽤到的调试快捷键吧（事实上我们也可以不⽤下表所⽰的快捷键，直接点击上图所⽰右侧栏最上层的⼀排按钮来进⾏调试，具体⽤哪个按钮，把⿏标放到按钮上⽅⼀会就会显⽰它相应的提⽰）
快捷键功能
F8恢复运⾏
F10步过，遇到⾃定义函数也当成⼀个语句执⾏，⽽不会进⼊函数内部
F11步⼊，遇到⾃定义函数就跟⼊到函数内部
Shift + F11步出，跳出当前⾃定义函数
其中值得⼀提的是，当我们点击“推荐”按钮进⾏调试的时候会发现，不管我们是按的F10进⾏调试还是按F11进⾏逐步调试，都没法进⾏$.ajax函数内部，即使我们在函数内部设置了断点也没有办法进⼊，这⾥按F8才是真正起效果的，不信你试试。

当我们在调试的时候，右侧Scope Variables⾥⾯会显⽰当前作⽤域以及他的⽗级作⽤域，以及闭包。

你不仅能在右侧 Scope Variables(变量作⽤域) ⼀栏处看到当前变量，⽽且还能把⿏标直接移到任意变量上，就可以查看该变量的值。

⽤图说话（哈哈）
刚刚我们介绍的只是在html⾥⾯能够看得到它绑定了onclick事件，这样我们就找到它绑定的js函数，如果它是在jQuery页⾯加载完成函数⾥⾯绑定的，这时候我们怎么知道它绑定的是哪个js函数呢，如果我们不知道绑定的js函数就更加不⽤说调试进去了
下⾯介绍⼀下如何查看，还是以刚刚那个为例⼦吧，但是这次我们来看“提交评论”作说明吧，
右击“提交评论”–>审核元素，我们可以清楚的看到在这个按钮上未绑定任何事件。

在Console⾯板内输⼊如下代码
function lookEvents (elem) {
return $.data ? $.data( elem, "events", undefined, true ) : $._data( elem, "events" );
}
var event = lookEvents($("#btn_comment_submit")[0]); // 获取绑定的事件
如下图所⽰：
按照上述介绍的⽅法定位到具体的blog-common.js⾥⾯，找到postComment 然后⼀层层的找到具体的代码，再设置断点就好了。

最后介绍⼀下⼀个神器，很好⽤的debugger
如果你⾃⼰写的代码，你执⾏的时候想让它在某⼀处停下来，只要写上的debugger就好了，不信你试试！哈哈
⾕歌控制台Elements⾯板
要想打开⾕歌控制台，有两种⽅式
1. ctrl+shift+i
2. f12
⼤家知道Elements⾯板最⼤的功能就是操作属性和修改html。

这⾥我再说⼀些⼤家可能不太熟悉的特性，
拖拽节点, 调整顺序
拖拽节点到编辑器
ctrl + z 撤销修改
这些功能是我觉得最有意思的，你们可以试试哦。

下⾯来具体说说⼏个复杂点的功能
查看元素上绑定的事情
默认会列出 All Nodes, 这些包括代理绑定在该节点的⽗/祖⽗节点上的事件, 因为在在冒泡或捕获阶段会经过该节点
Selected Node Only 只会列出当前节点上绑定的事件
每个事件会有对应的⼏个属性 handler, isAtribute, lineNumber, listenerBody, sourceName, type, useCapture
handler是处理函数, 右键可以看到这个函数定义的位置, ⼀般 js 库绑定事件会包⼀层, 所以这⾥很难找到对应handler
isAtribute 表明事件是否通过 html 属性(类似onClick)形式绑定的
useCapture 是 addEventListener 的第三个参数, 说明事件是以冒泡还是捕获顺序执⾏
样式操作
可以通过 ctrl + z 取消
总况
⽬前控制台⽅法和属性有：
["$$", "$x", "dir", "dirxml", "keys", "values", "profile", "profileEnd", "monitorEvents", "unmonitorEvents", "inspect", "copy", "clear", "getEventListeners", "undebug", "monitor", "unmonitor", "table", "$0", "$1", "$2", "$3", "$4", "$_"]下⾯我们来⼀⼀介绍⼀下各个⽅法主要的⽤途。

⼀般情况下我们⽤来输⼊信息的⽅法主要是⽤到如下四个
console.log
⽤于输出普通信息
⽤于输出提⽰性信息
console.error
⽤于输出错误信息
console.warn
⽤于输出警⽰信息
console.debug
⽤于输出调试信息
⽤图来说话
console对象的上⾯5种⽅法，都可以使⽤printf风格的占位符。

不过，占位符的种类⽐较少，只⽀持字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）四种。

格式化符号实现的功能
%s格式化成字符串输出
%d or %i格式化成数值输出
%f格式化成浮点数输出
%o转化成展开的DOM元素输出
%O转化成JavaScript对象输出
%c把字符串按照你提供的样式格式化后输⼊
console.log("%d年%d⽉%d⽇",2011,3,26);
console.log("圆周率是%f",3.1415926);
%o占位符，可以⽤来查看⼀个对象内部情况
var dog = {};
= "⼤⽑";
dog.color = "黄⾊";
console.log("%o", dog);
下⾯重点说⼀下console.log的⼀些技巧
1、重写console.log 改变输出⽂字的样式
console.log("%c3D Text"," text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10p
console.log('%cRainbow Text ', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), co 输出的结果如下图所⽰：
2、利⽤控制台输出图⽚
3、指定输出⽂字的样式
console.dirxml
⽤来显⽰⽹页的某个节点（node）所包含的html/xml代码
<body>
<table id="mytable">
<tr>
<td>A</td>
<td>A</td>
<td>A</td>
</tr>
<tr>
<td>bbb</td>
<td>aaa</td>
<td>ccc</td>
</tr>
<tr>
<td>111</td>
<td>333</td>
<td>222</td>
</tr>
</table>
</body>
<script type="text/javascript">
window.onload = function () {
var mytable = document.getElementById('mytable');
console.dirxml(mytable);
}
</script>
console.group和console.groupEnd
>输出⼀组信息的开头和输出结束⼀组输出信息
看你需求选择不同的输出⽅法来使⽤，如果上述四个⽅法再配合group和groupEnd⽅法来⼀起使⽤就可以输⼊的不同形式的输出信息。

哈哈，是不是觉得很神奇呀！
console.assert
对输⼊的表达式进⾏断⾔，只有表达式为false时，才输出相应的信息到控制台
console.count
（这个⽅法⾮常实⽤哦）当你想统计代码被执⾏的次数
console.dir
(这个⽅法是我经常使⽤的可不知道⽐for in⽅便了多少) 直接将该DOM结点以DOM树的结构进⾏输出，可以详细查对象的⽅法发展等等
console.time和console.timeEnd
计时开始和计时结束（看了下⾯的图你瞬间就感受到它的厉害了）
console.profile和console.profileEnd
配合⼀起使⽤来查看CPU使⽤相关信息
在Profiles⾯板⾥⾯查看就可以看到cpu相关使⽤信息
console.timeLine和console.timeLineEnd
配合⼀起记录⼀段时间轴
console.trace
堆栈跟踪相关的调试
上述⽅法只是我个⼈理解罢了。

如果想查看具体API，可以上官⽅看看，具体地址为：https:///devtools/docs/console-api
下⾯介绍⼀下控制台的⼀些快捷键
⽅向键盘的上下键
⼤家⼀⽤就知晓。

⽐如⽤上键就相当于使⽤上次在控制台的输⼊符号
$_
命令返回最近⼀次表达式执⾏的结果，功能跟按向上的⽅向键再回车是⼀样的
上⾯的$_</code>需要领悟其奥义才能使⽤得当，⽽$0~$4则代表了最近5个你选择过的DOM节点。

什么意思？在页⾯右击选择审查元素，然后在弹出来的DOM结点树上⾯随便点选，这些被点过的节点会被记录下来，⽽$0</code>会返回最近⼀次点选的DOM结点，以此类推，$1返回的是上上次点选的DOM节点，最多保存了5个，如果不够5个，则返回undefined。

$ // 简单理解就是 document.querySelector ⽽已。

$$ // 简单理解就是 document.querySelectorAll ⽽已。

$_ // 是上⼀个表达式的值
$0-$4 // 是最近5个Elements⾯板选中的DOM元素，待会会讲。

dir // 其实就是 console.dir
keys // 取对象的键名, 返回键名组成的数组
values // 去对象的值, 返回值组成的数组
1
2
3
4
5
6
看⼀下chrome控制台⼀个简单的操作，如何查看页⾯元素，看下图就知道了
你在控制台简单操作⼀遍就知道了，是不是觉得很简单！
Chrome 控制台中原⽣⽀持类jQuery的选择器
也就是说你可以⽤$加上熟悉的css选择器来选择DOM节点
copy
通过此命令可以将在控制台获取到的内容复制到剪贴板(如果在elements⾯板中选中某个节点，也可以直接按ctrl+c执⾏复制操作)
（哈哈刚刚从控制台复制的body⾥⾯的html可以任意粘贴到哪⽐如记事本是不是觉得功能很强⼤）
keys和values
前者返回传⼊对象所有属性名组成的数据，后者返回所有属性值组成的数组
console.table
monitor & unmonitor
monitor(function)，它接收⼀个函数名作为参数，⽐如function a,每次a被执⾏了，都会在控制台输出⼀条信息，⾥⾯包含了函数的名称a及执⾏时所传⼊的参数。

⽽unmonitor(function)便是⽤来停⽌这⼀监听。

看了这张图，应该明⽩了，也就是说在monitor和unmonitor中间的代码，执⾏的时候会在控制台输出⼀条信息，⾥⾯包含了函数的名称a及执⾏时所传⼊的参数。

当解除监视（也
就是执⾏unmonitor时）就不再在控制台输出信息了。

Console.log样式
格式化符号实现的功能
%s格式化成字符串输出
%d or %i格式化成数值输出
%f格式化成浮点数输出
%o转化成展开的DOM元素输出
%O转化成JavaScript对象输出
%c把字符串按照你提供的样式格式化后输⼊
说了上⾯⼀堆公式，还是举个例⼦让你印象深刻⼀些，哈哈。

在控制台输⼊如下代码
console.log("%c3D Text"," text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10p console.log('%cRainbow Text ', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), co
输出的结果如下图所⽰：
Source
这次分享的是Chrome开发⼯具中最有⽤的⾯板Sources。

Sources⾯板⼏乎是我最常⽤到的Chrome功能⾯板，也是在我看来决解⼀般问题的主要功能⾯板。

通常只要是开发遇
到了js报错或者其他代码问题，在审视⼀遍⾃⼰的代码⽽之后，我⾸先就会打开Sources进⾏js断点调试，⽽它也⼏乎能解决我80%的代码问题。

Js断点这个功能让⼈兴奋不已，
在没有js断点功能，只能在IE（万恶的IE）中靠alert弹出窗⼝调试js代码的时代（特别alert⼀个object根本不会理你），那样的开发环境对于前端程序员来说简直是⼀场噩梦。

本
篇⽂章讲会介绍Sources的具体⽤法，帮助各位在开发过程中够愉快地调试js代码，⽽不是因它⽽发疯。

⾸先打开F12开发⼯具切换到Sources⾯板中:
Sources功能⾯板是资源⾯板，他主要分为四个部分，四个部分并不是独⽴的，他们互相关联，互动共同实现⼀个重要的功能:监控js在执⾏期的活动。

简单来说就是断点啦。

⾕歌浏览器2015最新版下载：
⾸先我们来看区域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选项，建⽴⼀个你⾃⼰的新的⽂件，然后在区域2种编辑它。

Snippets 的⾮常功能强⼤，它的许多隐藏功能还有待发掘。

⽬前卤煮使⽤它是在记住调试⽚段、单元测试、少量的功能代码编写功能上。

最后我们看看js中时间丰富的监控功能，同上篇⽂章介绍的⼀样，Sources⾯板和Elements⾯板⼀样有监控事件的功能，⽽且Sources中功能更加丰富，也更加强⼤。

它的这部分
功能集中在区域3中。

我以下图为例，观察其作⽤。

从上到下，紫⾊圈内的数字的意义：
1、断点处的债堆栈，就是从该函数起，逐级追寻调⽤到他的函数名。

例如:
function a () { b(); } function b() { c(); } function c() { //在该处断点，查看call stack } a->b->c. call stack 从上到下的顺序就是 c b a
2、在区域2中你的断点调试信息。

当某个断点在执⾏的时候对应的信息会⾼亮，双击该处信息可以在区域2中快速定位。

3、添加的Dom监控信息。

4、击+ 并输⼊ URL 包含的字符串即可监听该 URL 的 Ajax 请求，输⼊内容就相当于 URL 的过滤器。

如果什么都不填，那么就监听所有 XHR 请求。

⼀旦 XHR 调⽤触发时就会在 request.send() 的地⽅中断。

5、为⽹页添加各种类型的断点信息。

如选中了Mouse中的某⼀项（click），当你在⽹页上出发这个动作（单击⽹页任意地⽅），你浏览器就是⽴刻断点监控该事件。

值得再次重复⼀遍，Sources是⼀般的功能开发中最常⽤到也是最有⽤的功能⾯板，它⾥⾯的许多功能对于我们开发前端⼯程来说是⾮常有帮助的。

在web2.0时代的今天，我不推荐依然在⾃⼰的代码⾥⾯写调试信息的⾏为，因为这会然你的开发变得繁琐。

Chrome开发⼯具给我们提供的强⼤功能，我们应该好好利⽤之。

Network
开发者⼯具初步介绍
chrome开发者⼯具最常⽤的四个功能模块：
Elements：主要⽤来查看前⾯的html的Dom结构，和修改css的样式。

css可以即时修改，即使显⽰。

⼤⼤⽅便了开发者调试页⾯，这真是⼗分友好的~
console：这个除了查看错误信息、打印调试信息(console.log())、写⼀些测试脚本以外，还可以当作Javascript API查看⽤。

例如我想查看console都有哪些⽅法和属性，我可以直接在Console中输⼊”console”并执⾏~
Sources：主要⽤来调试js和查看源代码
Network：重头戏来了~
Network详细介绍
那我就按照从左到右的顺序来写啦~
记录按钮处于打开状态时会在此⾯板进⾏⽹络连接的信息记录，关闭后则不会记录。

清除按钮清除当前的⽹络连接记录信息。

（点击⼀下就能清空）
捕获截屏记录页⾯加载过程中⼀些时间点的页⾯渲染情况，截图根据可视窗⼝截取，如下图所⽰。

过滤器能够⾃定义筛选条件，找到⾃⼰想要资源信息，如下图所⽰。

也可以是⼀些指定条件
指定条件有哪些？
domain：资源所在的域，即url中的域名部分。

如 domain:
has-response-header：资源是否存在响应头，⽆论其值是什么。

如 has-response-header：Access-Control-Allow-Origin is：当前时间点在执⾏的请求。

当前可⽤值：running
larger-than：显⽰⼤于指定值⼤⼩规格的资源。

单位是字节(B),但是K(kB)和M(MB)也是可以的~ 如larger-than:150K method：使⽤何种HTTP请求⽅式。

如 GET
mime-type：也写作content-type，是资源类型的标识符。

如 text/html
scheme：协议规定。

如 HTTPS
set-cookie-name：服务器设置的cookies名称
set-cookie-value：服务器设置的cookies的值
set-cookie-domain：服务器设置的cookies的域
status-code：HTTP响应头的状态码
显⽰详细信息
显⽰时间流
是否保留⽇志
当选择保留⽇志，重新加载url当前界⾯时，之前请求显⽰的资源信息，会保留下来，不会清空的哟~
是否进⾏缓存
当打开开发者⼯具时⽣效，打开这个开关，则页⾯资源不会存⼊缓存，可以从Status栏的状态码看⽂件请求状态。

设置限速，如下图所⽰。

设置限速可以模拟处于各种⽹络环境下的不同⽤户访问本页⾯的情况。

Network主题内容介绍
下列介绍中，前者为名词解释，后者为举例
Name/Pat：资源名称以及URL路径（main.css）
Method：Http请求⽅法 (GET或者POST)
status/Text：Http状态码/⽂字解释（200，ok）
Type ：请求资源的MIME类型，MIME是Multipurpose Internet Mail Extensions (html,css,js等)
Initiator：解释请求是怎么发起的，有四种可能的值
1.
1.Parser ：请求是由页⾯的html解析时发送
2.
2.Redirect：请求是由页⾯重定向发送
3.
3.script ：请求是由script脚本处理发送
4.
4.other ：请求是由其他过程发送的，⽐如页⾯⾥的Link链接点击
1
size/content：size是响应头部和响应体结合的⼤⼩，content是请求解码后的⼤⼩
请求⽂件具体说明
点击某个具体请求后的界⾯，如下图所⽰：
⼀共分为四个模块：
Headers
Header⾯板列出资源的请求url、HTTP⽅法、响应状态码、请求头和响应头及它们各⾃的值、请求参数等等Preview：预览⾯板，⽤于资源的预览。

Response：响应信息⾯板包含资源还未进⾏格式处理的内容
Timing：资源请求的详细信息花费时间
细节补充
对某请求右键，出现页⾯如下图所⽰。

Copy Request Headers：复制HTTP请求头到系统剪贴板
Copy Response Headers：复制HTTP响应头到系统剪贴板
Copy Response：复制HTTP响应内容到系统剪贴板
Copy as
cURL：将⽹络请求作为⼀个curl的命令字符复制到系统剪贴板(curl是⼀种开源的命令⾏⼯具和库，⽤于配合url语法进⾏数据传输) Copy All as HAR：将⽹络请求记录信息以HAR格式复制到系统剪贴板(what is HAR file)
Save as HAR with Content：将资源的所有的⽹络信息保存到HAR⽂件中(.har⽂件)
Clear Browser Cache：清除浏览器缓存
Clear Browser Cookies：清除浏览器cookies
Open in Sources Panel：当前选中资源在Sources⾯板打开
Open Link in New Tab：在新tab打开资源链接
Copy Link Address：复制资源url到系统剪贴板。